Colour contrast checking tools to improve the accessibility of your design

If text does not have sufficient contrast compared to its background, people will have problems. People with color 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.

With that background out of the way, on to the actual color 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 tool gives you immediate feedback by showing what the chosen colour combination looks like and whether it passes the test.

Colour Contrast Analyser: 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 Visualizer: Using a slightly different approach, Tom Hooper’s color Contrast Visualizer helps you find acceptable color combinations by visualizing the colors that provide sufficient contrast on a color palette. color Contrast Visualizer is available in Flash and Adobe AIR versions, so you will need support for either of those to use it.

Colour Contrast Analyzer 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: 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 Analyzer: This tool tests foreground and background colour combinations according to an algorithm developed by the Trace R&D Center.

Vischeck: 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. You can specify the foreground and background colours numerically or by pulling sliders, it will check and preview the selected colours against various types of colour blindness.

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


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