Contrast is King

by Leslie Jensen-Inman

33 Reader Comments

Back to the Article
  1. http://colorfilter.wickline.org/
    Copy & paste the code below to embed this comment.
  2. http://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast
    Copy & paste the code below to embed this comment.
  3. the checkmycolors.com is just check the css not the way human see the page I think
    Copy & paste the code below to embed this comment.
  4. I love that line bq. Each designer must determine the balance between design and readability—a decision often made easier when considering the target audience and the purpose of the website. Isn’t everything easier when you consider the target and purpose while creating? thanks.
    Copy & paste the code below to embed this comment.
  5. ...but the W3 WAI site (http://www.w3.org/WAI/) scores < 4%. Gotta love it.
    Copy & paste the code below to embed this comment.
  6. I’ve been using the OS X based tool “Sim Daltonism”:http://michelf.com/projects/sim-daltonism/ for years. It’s a dead simple app but allows you to see 10 levels of varying color blindness live.
    Copy & paste the code below to embed this comment.
  7. “aDesigner”:http://www.eclipse.org/actf/downloads/tools/aDesigner/index.php is another tool which can be used to test how your pages look to people with different levels of colour blindness.
    Copy & paste the code below to embed this comment.
  8. Thank you very much for this article. I’ve long been aware that I should have colour-blindness in mind when picking schemes but I always thought that meant just choosing distinct colours. But browsing around the sites you listed it has become obvious that is not how it works at all. Colour Scheme Designer in particular is a gem. Thanks
    Copy & paste the code below to embed this comment.
  9. Nicely put Leslie. Those pictures demonstrate what i usually try to tell my designer friends. Color is indeed important of course. But contrast is much more important. Just like adding alt tags for blind people, you should check how your web site seems in every way. If the site is burning my eyes, then there indeed is something wrong with the contrast :)
    Copy & paste the code below to embed this comment.
  10. www.CheckMyColours.com is a well intentioned site with potential, but it seems like it is still a young site; I tested a site design where all of the content was wrapped in a white-background div and it said everything was unreadable.
    Copy & paste the code below to embed this comment.
  11. Thanks for this article! I’ve been trying to find a site like http://graybit.com/ for a while! Excellent post. -sara cannon
    Copy & paste the code below to embed this comment.
  12. Thanks to everyone for posting additional tools! It’s great to check out what other people use. I look forward to delving into them further. @David Rodriguez
    I find everything to be easier when considering target and purpose while creating but it turns out not everyone thinks this way (who knew?). So I find myself stating it”¦ just in case. @Stargazer
    Of course, these tools are _just_ tools. They are ways to help guide us while reminding us that contrast needs to be considered when making design decisions. It’s ultimately up to us to make sure that we use the tools responsibly and in ways that make sense within our process.
    Copy & paste the code below to embed this comment.
  13. Color is indeed important specially for children, that’s the way on how can they can show their expressions. Through drawing and coloring, they can draw what they want.
    Copy & paste the code below to embed this comment.
  14. As a colour-blind website designer, I think it’s important to understand that colour-blindness is much more prevalent than a lot of people think. It’s great to see that articles are popping up on websites as credible as this one. I’m not sitting on my high-horse by posting on here, I just think it’s a really great thing. Just in case anyone is interested, I’m colour blind to green stuff. Fortunately, it’s only helped me. There aren’t many green websites out there that are effectice, so I don’t have to worry about that; plus, green clothes aren’t the nicest thing in the world. Though it does annoy my girlfriend when she asks me to try on something that she insists is green but I see as some sort of vile mustard colour. Anyway, I digress. Thank you for the wonderful article.
    Copy & paste the code below to embed this comment.
  15. I been using “Colour Contrast Analyser”:http://www.wat-c.org/tools/CCA/1.1/index.html (CCA).
    This used to be available only for Windows, though I believe there is a “Mac version”:http://www.paciellogroup.com/resources/contrast-analyser.html#macdownload now available as well as a “Firefox plug-in”:http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php . A description: bq. It is primarily a tool for checking foreground & background colour combinations to determine if they provide good colour visibility. It also contains functionality to create simulations of certain visual conditions such as colour blindness.

    Determining “colour visibility” is based on two sets of algorithms: Luminosity Contrast Ratio and Colour Difference and Brightness Difference, suggested by the World Wide Web Consortium (W3C) I hope you find it helpful. I sure have.
    Copy & paste the code below to embed this comment.
  16. Fujitsu’s “Color Doctor”:http://www.fujitsu.com/global/accessibility/assistance/cd/ also works very well.  Alas, it is only available for Windows.
    Copy & paste the code below to embed this comment.
  17. I’m pretty sure “Deuteronomy” is a book of the Bible, not a variant of colorblindness. ;)
    Copy & paste the code below to embed this comment.
  18. @GarrettW
    Nice catch. Looks like Microsoft Word hid an Easter Egg in the article on the last spell check Passover.
    Copy & paste the code below to embed this comment.
  19. Long overdue article - well done! I design some scientific sites where the users are predominantly male and the information is often colour-coded. It amazes me that other similar sites don’t check combinations in relation to colour-blindness. I tend to use the Vischeck free Photoshop plugin: http://www.vischeck.com/downloads/.
    Copy & paste the code below to embed this comment.
  20. Because many people believe that “colorblind” means only able to see gray, a term I’ve found that is more descriptive is “color vision deficiency” or just “color deficiency”
    Copy & paste the code below to embed this comment.
  21. 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.
  22. 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.
  23. 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.
  24. 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.
  25. 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.
  26. 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.
  27. 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.
  28. 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.
  29. 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.
  30. 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.
  31. 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.
  32. 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.
  33. i like CheckMyColours.com also thank you for share other useful links to.
    Copy & paste the code below to embed this comment.