snook.ca

Colour Contrast Check

Date created: January 11, 2005
Date last modified: February 14, 2005
Visit the discussion

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.

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

Foreground Colour:
  #
Background Colour:
  #
Results
Lorem ipsum dolor sit amet.

Alternative Tools

Development Notes

This colour contrast tool was originally based on the HP Colour Contrast Tool. 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

The excellent sliders are courtesy of Erik Arvidsson over at WebFX.

For more information, check out the Techniques For Accessibility Evaluation And Repair Tools from the W3C. As well, there has been some interesting research on this subject by the University of Toronto which discusses the effectiveness of this technique.