Contrast is King

by Leslie Jensen-Inman

33 Reader Comments

Back to the Article
  1. I’m a little bit surprised you talk only about colour-contrast.
    I consider contrast should be considered from a widely larger point of view.

    Example:
    you talk about the InterACT website: we know orange and light blue turn to the same level of grey when “monocromized”. So, if you want to target visually impaired audience or low-fi devices (B/W printers or viewers) you should avoid it “a priori”. In your case, the logo and the main title “Connecting Education & Industry” have a very low visibility (Fig. 2). Is it a good design?

    Links have a very low visibility too (fig. 16). Why don’t underline the normal link state rather than the :hover?
    Why don’t improve the contrast between links and text thanks to shape too, not only colour?

    Generally speaking, a good interface approach should distinguish main content and interaction elements from decoration and possibly 2nd level content.
    A good contrast is provided by shape, positioning (layout), size and colour.
    An excellent example of it is the International Swiss Style (from 70ies, so nothing really new).

    I’m sorry but I agree Checkmycolors.com is based on css only so not really useful.

    Copy & paste the code below to embed this comment.
  2. This is really well timed for me, I had someone comment on my blog recently they were having a hard time reading it because the text and a background pattern were competing. I adjusted it this past weekend, but next time I’ll have some more tools to reference due to this article. This also a bit of trial and error I suppose, since subtle issues can appear from display to display. Thanks again.

    Copy & paste the code below to embed this comment.
  3. You should remember that the contrast of colors used in a page
    is a matter discussed in the WCAG (web content accessibility guidelines) by the w3c.
    An online tool that helps meeting those accessibility
    requirements is my “accessibility color wheel”:http://gmazzocato.altervista.org/colorwheel/wheel.php
    It checks by standard algorithms whether a color pair has good contrast and simulates various types of color deficiencies.

    Copy & paste the code below to embed this comment.
  4. Great article, Leslie. I always thought that color is important, but that contrast might be even more important.

    Copy & paste the code below to embed this comment.
  5. using same color could really be annoying and difficult to differentiate which is important and which is not.. and thus the best solution is to use contrast color to highlight the important thing to the user… thanks for sharing this..

    Steve

    Copy & paste the code below to embed this comment.
  6. I think there may have been an issue with greybit.com when I tested it with my website “www.dotvolution.com.(Website design)”:http://www.dotvolution.com

    I put my url in there and the whole site was just white. That isn’t possible to have made such a huge error in the design. I think it was probably just a bug.

    Copy & paste the code below to embed this comment.
  7. Interesting read! Perhaps I am intuitive on this particular aspect of design because I’ve never really thought about contrast or contrast at least in this context. I’ve also rarely had a client tell me to make something pop more or tell me certain elements looked washed out.

    Is it normal for most designs to make a big deal out of this?

    Copy & paste the code below to embed this comment.
  8. I love your blog, it really helps spell out what differences and difficulties there can be with the way a designer views the same thing. Keep them coming. mainstreethost.com

    Copy & paste the code below to embed this comment.
  9. Thanks aDesigner for sharing another tool. However, knowing this fact that people having colorblindness interpret colors in their own way will help me focus more on choosing colors and setting contrast for them.

    Copy & paste the code below to embed this comment.
  10. Designers often find themselves in a conflict between aesthetics and usability; people always quote Jakob Nielsen but his own website is hardly lovely to look at?! I feel, contrast can play a huge part in usability effectiveness BUT it is also a great tool for designers on the basis of aesthetics if used sensibly. It’s the opposite of a double edged sword… if you get what I mean!

    Copy & paste the code below to embed this comment.
  11. Our “color picker”:http://www.workwithcolor.com/hsl-color-picker-01.htm calculates the (relative) luminance of a color through which one knows upfront the amount of contrast between two colors. This can save you from having to start over, which can happen if you check for contrast at the end of the design process.

    P.S.: We use an individual approach to calculate what we define as the luminance of colors.

    Copy & paste the code below to embed this comment.
  12. Contrast is very effective for radiance in objects and controlling bleeds too, overall it isnt used as well as it should be.

    Copy & paste the code below to embed this comment.
  13. i like CheckMyColours.com also thank you for share other useful links to.

    Copy & paste the code below to embed this comment.