Designer
Plaything

The Standalone Web Typography and Colour Testing Tool

CURRENT VERSION: 1.1

LAST UPDATED: 26 OCT 2007


Colour Contrast

Why is it important?

An often overlooked element of web site design is the effect of certain colour combinations and their contrast levels, for users with colour blindness, poor vision or black and white screens. If the level of colour contrast between your text and the background is too low your content may well become illegible or at least very difficult to read for certain users.

So what it it?

Original W3C guidelines about colour contrast were somewhat subjective with their instructtion to, "ensure that foreground and background colors contrast well". In an attempt to add some sort of standardisation to what is after all quite an important area of accessibility the working draft of Techniques For Accessibility Evaluation And Repair Tools proposes and equation to assess the contrast level of two colours and the difference between them. Designer Plaything works out this equation as you change font and background colours on your document and gives you instant feedback as to whether your chosen colours fall within the suggested acceptible boundaries.

Tell me more about the maths

The formulas provided by W3C to assist in meeting the Web Content Accessibility Guidelines 1.0 (WCAG) are as below

For colour brightness: ((Red value x 299) + (Green value x 587) + (Blue value x 114)) / 1000 Once this value has been calculated for two colours the W3C recomendation is that the difference betweeen the two results should be 125 or more. Hewlett Packard recommend that this difference only needs to be 400 but more about that later.

For colour difference: (maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2)) Once this value has been calculated based on the RGB values of two colours the W3C recommendation is that the resulting value should be 500 or more. Hewlett Packard recommend that this difference only needs to be 400 but more about that later.

So if I use the W3C recommendations everyhting will be guaranteed to be just fine?

Alas not really. For one thing the W3C itself introduces this section with caveat "This is a suggested algorithm that is still open to change" and in addition Hewlet Packkard, use the same formula but say that the colour difference figure is fine as low as 400

I have also found that it is possible to create some fairly illegible or head ache inducing colour combinations that happily pass both the W3C and HP tests.

So with uncertaintly about the mathematics of the formula itself, disagreement about the required values from the formula and some obvious fallibility in the results: I'm afraid to say this is by no means a fail safe colour tool for your website. What it does offer though is at least some sort fo sanity check and assistance in making sure your site is viewable to as many users as possible.

At worst you can tell your client that you checked all colour combinations for W3C recommendations, which is usually enough to make them happy.

I recommend that you use the tool in conjuction with looking at the screen and applying a bit of your own judgement on what is accesptible.