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.

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 :)

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.

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.

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.

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)

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/.

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.

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.

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.

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..

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.

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.

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!

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.