Colour Contrast Check

Description

The Colour Contrast Check Tool allows to specify a foreground and a background colour and determine if they provide enough of a contrast "when viewed by someone having color deficits or when viewed on a black and white screen"[W3C].

The tool will indicate that the colours pass the test if both the colour difference and the brightness difference exceed their threshold. It will indicate that it sort of passes if only one of the two values exceed their threshold. And finally, it'll fail to pass if neither value exceeds its threshold.

The tool will also indicate if the colours pass the newer WCAG 2.0 contrast ratio formula. The WCAG 2.0 formula differentiates between text smaller than 18pt text larger than 18pt (or text that is bold and larger than 14pt). For AA compliance, text should have a ratio of at least 4.5:1 (larger text, at least 3:1). For AAA compliance, text should have a ratio of at least 7:1 (larger text, at least 4.5:1).

You can enter a three character value (eg: 036) and it'll automatically convert it to it's six character version.

Alternatively

• Juicy Studio: CSS Colour Contrast Test - web-based tool to check CSS code for appropriate contrast

Development Notes

This colour contrast tool was originally based on a HP Colour Contrast Tool that no longer seems to be available. However, it had a few issues which prompted me to develop my own:

1. the colour threshold on the HP one is 400. I changed it to 500 to match the W3C guidelines
2. you had to manually enter each colour manually (red, green and blue)
3. there's a bug in the HP one that doesn't calculate hex values correctly under certain circumstances

For more information, check out the Techniques For Accessibility Evaluation And Repair Tools from the W3C.