10 colour contrast checking tools to improve the accessibility of your design

At my dayjob we create the graphic design for most of our clients' sites, but not for all of them. Sometimes the client or the client's design agency creates the visual design and leaves conversion to HTML + CSS + JavaScript and CMS-ifying to us. When that happens, I almost always find problems with insufficient colour contrast in the design. Sometimes the problems are minor enough to be acceptable, but often there are areas that need to be adjusted.

In case you're wondering why I care (and why I think you should care) about the colour contrast of a website, it's very simple. If text does not have sufficient contrast compared to its background, people will have problems. People with colour blindness or other visual impairments as well as people browsing the Web under less than ideal circumstances (bad monitor, window reflections, sunlight hitting the screen) may not be able to read the text, at least not without difficulty.

And you don't really want that, do you? If you publish text on a website, as most people do, I'm guessing that in almost all cases it is because you want people to read that text. So colour contrast, whether you think about it or not, is important to you, your clients, and your end users.

I've become so accustomed to checking the contrast of any designs I create or implement that I sort of take it for granted that everybody does. Apparently this is not the case, so I figured it would be nice to be able to refer people to a list of various tools that help you check colour contrast. Hence this article.

A very brief explanation of how colour contrast ratios are calculated is in order. There are different algorithms used to calculate contrast ratios. Some tools use the luminosity contrast ratio algorithm mentioned by the WCAG (Web Content Accessibility Guidelines) 2.0 working draft, while others use the colour brightness and colour difference algorithms that are mentioned in a companion document to WCAG 1.0. Some even use both.

Note that neither of these algorithms are W3C recommendations (at least not yet), but they are still useful for determining if a combination of text and background colours is likely to cause problems for people with colour blindness or other visual impairments.

With that background out of the way, on to the actual colour contrast checking tools. Some tools are Web based, while others are standalone applications or browser extensions that you run locally on your computer.

The list

Bonus tools

Try them, find your favourite, and use it

All tools mentioned here are free, so try them all to find the ones that suit your setup and workflow best. I don't think it makes a lot of difference which tools you use, as long as you do use one that calculates the contrast ratio and one that simulates colour blindness.

The colour blindness simulation tools really help you understand how difficult it can be for a person with colour blindness to distinguish links that only differ in colour from the surrounding text.

Finally, I don't think the results of these tools (or rather the algorithms they use) need to be followed slavishly. Large headings and text that is of minor importance don't necessarily have to pass, while any text that is essential to the site (like the body copy) really should.

Use the results as guidance, apply some of your own common sense, and you should be able to find a balance between sufficient contrast and pleasing aesthetics.

Update: I have been informed by Steve Faulkner that the Colour Contrast Analyser for Web Pages provides the same functionality as Contrast Analyser, Version 2.0 but uses an outdated algorithm. I removed it from the list and replaced it with Graybit.

Sorry for any confusion that may have caused.

Translations

This article has been translated into the following languages:

Posted on September 12, 2007 in Accessibility, Usability, Graphic Design