The breathalyser test for colour contrast

  • Author: Allayne Woodford
  • Date: 31 Aug 2015

One of the great tools available to accessible content authors are colour contrast analysers. These tools measure foreground and background colour to produce a luminosity ratio and are often based on Web Content Accessibility Guidelines (WCAG) 2.0 techniques. But how accurate are they?

How do colour contrast analysers work?

Fundamentally, these tools take on two formats: either online or as a downloadable tool. Colours used for text or images of text can be checked against their background colour with the results presented for a range of vision conditions, including colour blindness.

To input the colours and get an accurate result, knowing the hexadecimal colours is the best option. With some tools though a secondary option is available, which is the use of a selection tool often called an ‘eyedropper’ that will pick up a colour off the screen. For the most part, these will give you adequate results and you’ll be on your way to an accessible design. But what if your result is teetering on the edge of the ratio limit?

A working example

Take this blue: it has an RGB (red, green, blue) code of 0, 124, 194 and presents as what you might call a mid-blue, not too dark, not too light. A colour patch of the shade is shown below

This particular blue was to be used for various heading styles in a document, and in testing for its contrast using an eyedropper tool it was found to have a ratio of 4.45:1 against a white background.

NB: ratios for text that is less than 14 point bold or 18 point normal in size should be a minimum 4.5:1.

This is where the story becomes a little parochial, as Australian drink driving laws state that blood alcohol readings must be .05 or under. With a ratio of 4.45:1 this blue is .05 under the limit. I’m sure you get the gist of what we’re saying.

While the initial test for this blue presented the result above, which was close to the limit, it made the user wonder whether that was close enough? An online search of the colour’s RGB code offered the related hexadecimal code of #007CC2. This code was input into the foreground panel and a ratio of 4.5:1 was achieved.

So if you’re .05 below or above the limit, go the extra mile to check for accessibility. It may just be that a colour you thought you couldn’t use is now good to go as was the case with this blue. Or it could the reverse. Oh, and don’t drink and drive.

Some common colour contrast analyser tools