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

  • Colour Contrast Check: The first really intuitive online tool for checking colours that I know of, Jonathan Snook’s Colour Contrast Check lets you input foreground and background colours either by entiering hexadecimal values or by adjusting sliders. The tool gives you immediate feedback by showing what the chosen colour combination looks like and whether it passes the test.
  • Colour Contrast Analyser: Gez Lemon’s Colour Contrast Analyser uses the same algorithm as the Colour Contrast Check tool, so the results should be identical. The difference is that this tool has no live feedback and no sliders, meaning that you will need to enter the values for foreground and background colours into a form and submit it, after which the results are displayed.
  • Colour Contrast Visualiser: Using a slightly different approach, Tom Hooper’s Colour Contrast Visualiser helps you find acceptable colour combinations by visualising the colours that provide sufficient contrast on a colour palette. Colour Contrast Visualiser is available in Flash and Adobe AIR versions, so you will need support for either of those to use it.
  • Colour Contrast Analyser Firefox Extension: Instead of having you enter each colour combination manually, Gez Lemon’s Firefox extension finds all text elements in a document and examines the difference between foreground and background colours for them. It displays the results in a new tab, complete with previews of the colours. This can look a bit overwhelming, but it’s a good way of finding problematic areas of a design. Obviously this tool does not work with images – you’ll need an HTML document for it to work.
  • CSS Analyser: Another tool created by Gez Lemon, the CSS Analyser does a colour contrast test of your CSS. It also validates the CSS and checks that relevant text sizes are specified in a relative unit of measurement.
  • Luminosity Contrast Ratio Analyser: This tool, also created by Gez Lemon, tests foreground and background colour combinations according to an algorithm developed by the Trace R&D Center.
  • Vischeck: A colour blindness simulator that can be used online or as a Photoshop plugin that appears in the “Filter” menu. The online tool simulates colour blindness on an image that you upload or on a web page that you specify, while the Photoshop plugin changes the colours of the document you are working on.
  • Contrast Analyser, Version 2.0: A standalone application available for Windows and Mac OS X. This is a very neat application that does pretty much everything except analyse a web page for you. You can specify the foreground and background colours numerically or by pulling sliders, you can set it to use the colour/brightness or luminosity algorithms, and it will check and preview the selected colours against various types of colour blindness.
  • Graybit: An online tool developed by Jona Fenocchi and Mike Cherim. This tool does what you can guess from its name – it lets you submit a URL to a web page which will be converted to grayscale and displayed in your web browser.
  • Sim Daltonism: Available for Mac OS X only, this standalone application does not calculate colour contrast, but is still very useful. It simulates various kinds of colour blindness in realtime, which makes it easy to check if a design is likely to cause problems.

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, which was mentioned in the first comment.

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, Graphic Design, Usability

Comments

  1. I would recommend GrayBit. It shows you how your site looks in black and white, directly in your browser.

  2. September 12, 2007 by Roger Johansson (Author comment)

    Gerben:

    Excellent addition. I’m sure there are plenty of other tools I forgot to mention, so if anyone else has suggestions please post them.

  3. I have a poor eyesight and a red-green color blindness. If I use this tools, I see my color deficiencies doubled.

    So I think the tools are good for people who have no problems with their eyes, but not for people with color deficiencies.

    Aside from that great list. Only three tools are well known to me.

  4. The mentioned Firefox plug-in works fine for me, thanks for sharing :) The ‘problem’ with background images is just something to see by yourself. I think if it is very unreadable even an unexperienced designer sees that.

  5. I think the results of such tools give only a slight orientation about what is readable and what not. Relying much on them, in my opinion, would restrict the designer and disturb the balance between content and presentation in favour of the last one. Also a point that I missed in the article is that a good monitor calibration is needed, before using any tools, otherwise results may seem questionable. Anyway, I think these tools will be useful for people, who want to follow the WCAG guidelines.

  6. September 12, 2007 by Roger Johansson (Author comment)

    Matthias:

    I have a poor eyesight and a red-green color blindness. If I use this tools, I see my color deficiencies doubled.

    Good point. I wonder if there is any way around that… anyone know?

    Arjan:

    I think if it is very unreadable even an unexperienced designer sees that.

    Believe me, they don’t always see it. And even worse, sometimes they will see it and not care.

    R. Kostadinov:

    I think the results of such tools give only a slight orientation about what is readable and what not.

    Of course these tools are only guides. That’s why I ended the article by saying you need to use common sense as well :-). But tools like these help make you aware that many people do not have the same level of eysight as you might have.

    Also a point that I missed in the article is that a good monitor calibration is needed, before using any tools, otherwise results may seem questionable.

    Good point. Though having a badly calibrated monitor may be a good thing since it lets you see what most people see ;-P.

  7. September 12, 2007 by chris Jangelov

    I like this. If “web 2.0” earlier was about rounded corners it now definitely is about gray text. (and just look at MS Office 2007 (if you can) :-) For me, now needing reading glasses, bad contrast is becoming a real problem.

    I’ve been using some of these tools for the last couple of years but have not found an authotarive source to convince graphic design staff that this has to be concidered. Anyone has a tip?

    /chris

  8. Thanks for the inclusion :)

    Regarding the problem of either blindly (sorry) following the ‘rules’ or just winging it; I hope my tool proves useful in visualising how far off a combination may be from the guidelines - allowing you to make a sensible choice.

  9. I use the FF extension too - it’s a good one for pointing out when you’ve forgotten to specify a bg-color with your bg-image for those cases when the image might not be visible and a bg-color needs to be different from that of its parent.

  10. Its disappointing that the W3c has “color compliance.” I think that group should cram it up their ass.

  11. The Web Accessibility Toolbar has a few colour options included along with others which is handy as it keep it all together. I personally hate having to go to different locations for different toolbars.

    http://www.visionaustralia.org.au/info.aspx?page=614

  12. September 13, 2007 by Roger Johansson (Author comment)

    Chris:

    I’ve been using some of these tools for the last couple of years but have not found an authotarive source to convince graphic design staff that this has to be concidered.

    WCAG 1.0 covers it in Guideline 2. Don’t rely on color alone and the current draft of WCAG 2.0 in Guideline 1.4 Make it easier for people with disabilities to see and hear content including separating foreground from background.

    Tom:

    I hope my tool proves useful in visualising how far off a combination may be from the guidelines - allowing you to make a sensible choice.

    Yes, I think it will prove very useful for that. Thanks for creating it!

  13. I recently wrote an article about accessible creating accessible designs and one thing that is hugely important that I too mentioned was colour. Colour can show a lot in design but when taken for granted can also become a hardship for some users.

    You can read my article here - Basic Tips for Accessible Web Design

  14. Roger:

    I wonder if there is any way around that… anyone know?

    No, not really. If a site have bad contrast or colors that are indistinguishable, so I switch off CSS to read the content. This is the point to see how accessible a site is.

  15. I can’t believe no-one has mentioned aDesigner from IBM.

    It is build on Eclipse technology and render pages based on different kinds of color-blindness and gives an estimated timeline for blind people.

    It’s quite excellent. And I don’t use it enough.

    http://www.alphaworks.ibm.com/tech/adesigner

  16. September 13, 2007 by steve faulkner

    Jeremy Parker wrote:

    The Web Accessibility Toolbar has a few colour options included along with others which is handy as it keep it all together.

    Can I suggest you try the latest version (2.0) of the Web Accessibility Toolbar, which includes the latest version of the contrast analyser (2.0) and an IE version of Gez Lemon’s “Colour Contrast Analyser Firefox Extension”, as well as a grayscale function.

  17. Great list.

    I had no idea the firefox extension existed before. Th ebulk analysis of a web page is really useful - reckon I’ll use it all the time.

  18. Thanks for these links. I tried to sign up to Stumble Video using the media PC attached to my TV the other day and the text is so low contrast I couldn’t even see it, let alone read it! Surely the designers of a video site should think to test it on a TV.

  19. About vischeck and Sim Daltonism: I’m a little bit colour-blind and I was wondering if there are applications doing the inverse? (so I could check how certain colours appear to “normal” people)

  20. About vischeck and Sim Daltonism: I’m a little bit colour-blind and I was wondering if there are applications doing the inverse? (so I could check how certain colours appear to “normal” people)

    In a way, yes: http://www.vischeck.com/daltonize/

    In looking for this (I had lost the link), I found a couple of other applications on Wikipedia: http://en.wikipedia.org/wiki/Color_blindness#External_links

    (At the bottom)

  21. I don’t suffer from normal colour-blindness but I seem to have contrast issues with my sight. I have found that some sites pass Snook’s contrast analyzer but fail for me because of the typeface: Arial bold is easier to see than Times normal. While these tools do help, they may not always be sufficient.

  22. I’ve run into this on a recent website project where the client was in fact color-blind. It was a very enlightening experience. I would present a design - or we would look at a dashboard page that had to pack a lot of information into one page. I used a different colored border around a box to indicate the item that had been clicked on last - the client said “I need a way to tell which one I clicked on most recently.”

    Lesson I’ve learned - When showing change in state for navigation or anything like that use a change in shape as well as color. Add an arrow like the Apple dock does - or change the bullet. It can really make things clearer.

    Also, I know this went around the web a couple months ago - but Color Oracle is a great app for OSX, it filters the entire screen at once.

  23. @Tom Hooper: Thanks a lot. Going to check those out asap.

    @Roger: Thanks. Now I can show my girlfriend my perception of things. (Pink shirts can be grey! ;-)

  24. On a Mac, you can go to the System Prefs > Universal Access > Seeing, and select the “Use grayscale” checkbox, which will turn your whole screen to grayscale.

  25. If you want to learn a lot about contrast, just work with somebody that does a lot of offline print-work for the retail sector.

    I’ve been doing that for the past year or so as an in-house web developer. Coming from a CS-background, I was surprised at just how much of a focus there was on contrast.

  26. September 14, 2007 by Steve B

    Great article and good references, many I currently use.

    One thing that is, sometimes, missing is a good reference to WHY this is important.

    I used to spend a lot of time telling people that good contrast is necessary and spending even more time explaining the details.

    I still discuss it at the same length but provide them with a good reference to follow.

    The SAP Design Guild has a great article to help designers/developers understand visual disabilities: http://www.sapdesignguild.org/editions/edition9/vision_physiology.asp

  27. September 14, 2007 by Steve B

    My apologies for “double posting” but in relation to the topic at hand, this colour test is really informative (link contained in the previous post): Colorvision test (The “Science” Stuff Website): home.sc.rr.com/mikebennett/colorblind.html

  28. Nice post! :)

    This is very useful.

  29. also http://colorfilter.wickline.org/

  30. Here’s another one that might be of interest:

    http://www.designerplaything.co.uk

    As well as colour checking it offers control over article layout and typography.

  31. For color blindness simulation directly in your browser, please check my accessibility color wheel. The address is http://gmazzocato.altervista.org/colorwheel/wheel.php

    Bye, Giacomo

  32. Sorry for reposting. The clickable link is Accessibility color wheel

  33. The Graybit tool has an interesting effect on a lot of sites … nice list, very useful

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.