Making Your Web Colors Visible For All – Five Color Accessibility Tools

ishihara

If you are designing, or re-designing your web site, it is time well spent running your website through the color accessibility tools below to ensure that your site can be seen correctly by as many people as possible. Most of these tools use WC3 guidelines to perform their various operations. If you can actually read and understand them, the Web Content Accessibility Guidelines (WCAG) 2.0 requires, amongst other things, that there is sufficient contrast between text and background color. For a person with a color disability, the colors used on a web site can mean the difference between being able to read text and images or not. 1 in 12 people have some sort of color deficiency.

Vischeck allows you to see your website or an image, as a person with color disabilities would see it.
vischeck

The Gray Bit web site comes with the tagline, “Experience Color, Wearing Shades of Gray”. That’s exactly what this tool does. You submit your URL on the homepage and Gray Bit converts you colorful web-page into a grayscale version so that you can test the contrast on the page.

graybit

Colour Scheme Designer. In the image below, the blocks of color in the bottom right show how red looks to people with Deuteranomaly, which is the most common form of color blindness affecting 5% of men and about 0.4% of women. You can choose a vision simulation which shows you how

Colour Scheme Designer

The Check My Colors web site provides a simple form on which to submit your URL. It then checks all of the elements on your page against the W3C’s guidelines on color brightness and luminosity on web sites.

checkmycolors

And finally, there’s Hue Vue, which is not so much a tool for web designers, as a tool for color blind people. This is an iPhone application and color tool designed to help people with color vision deficiencies to identify, match and coordinate colors. Necessity is the mother of invention as they say, and this app was created by a color blind person who needed a tool to help him discern which color he was looking at. He once had the problem of buying a pink phone for his son by accident, when it should have been grey!

These are just five of many color accessibility tools available. Which tools are you using for testing colors?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.tyssendesign.com.au Tyssen

    There’s also the Juicy Studio Accessibility toolbar extension for Firefox which includes a colour contrast analyser and for a standalone (ie, not browser-based) application, there’s aDesigner.

  • http://www.optimalworks.net/ Craig Buckler

    I’m loving checkmycolours.com. I haven’t encountered that one before. Useful stuff and the design is gorgeous!

  • battez

    In fact, there are easier guides to the WCAG requirements (rather than wading through the full accessiblity documentation)
    and as long as you get the priority points, that’s a good way to go.

    It’s a good collection of website accessiblity tools you have here anyway, and the more people raise awareness the better!

    (I work for a Scottish web design company, developing accessible websites)

  • http://www.laughingliondesign.net Jennifer Farley

    @ Tyssen, thanks for the Juicy Studio tip.

    @Craig, yeah I love checkmycolours too. So simple and nice looking too.

    @battez, thanks for the “easy guide” to WCAG. That stuff takes a lot of work to wade through.

  • cancel bubble

    Check out Contrast-A at http://www.dasplankton.de/ContrastA/

    It allows users to experiment with color combinations, examine them under the aspect of accessibility guidelines and to create custom color palettes. Contrast-A checks color combinations for sufficient contrast and displays the results according to WCAG 2.0 (Luminance Ratio) as well as the results according to older accessibility guidelines, WCAG 1.0 (Difference in Brightness and Color).

  • Andrew

    Don’t forget contrast issues too – from the age of 40, contrast sensitivity at higher spatial frequencies starts to decline until at the age of 80 it has been reduced by up to 83% (http://www.everyeye.co.uk/htms/oldAgeVision.htm). There are a wide range of colour checking tools listed on the W3C WAI site too (http://www.w3.org/WAI/ER/tools/) – if your favourite tool isn’t listed, encourage the owner to submit it (http://www.w3.org/WAI/ER/tools/submission).

  • http://www.brothercake.com/ brothercake

    That hobo-web site is really not helpful at all. Confused about WCAG? Why not not try and comprehend a dozen different sets of accessibility guidelines instead! (All of which are based on WCAG anyway.) And why not praise Jakob Neilson with a page full of sanctimonious quotes while you’re at it (nb. Jakob Neilson gets it wrong as often as he get it right – he’s just a human being, after all)

    You’re far better off investing the time reading and coming to terms with WCAG 2, which really is not that hard – WCAG 1 was a bit of a mess for sure, but WCAG 2 is far easier to read and understand – and its authors have gone to great lengths to make it so (though I’d stay away from the “techniques” documentation, which is extremely patchy in quality; some of it’s great, but some of it is nonsense).

  • eric