Readability of Type in Colour – the W3C Colour Difference Guidelines

This page has now been moved to Experiments with Colour and Brightnesses.

This page is related to my text colour readability page, where by the use of sliders you can see the effect of coloured letters over different coloured backgrounds.

What are the W3C guidance-setters playing at with this 'colour difference' formula? It’s a nonsense.

To recap (from the W3C guideline formula given on my text colour readability page):

Color difference is determined by the following formula: (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)) The range for color difference is 500. This means that the maximum colour difference (black on white or white on black) will be 255+255+255 = 765.

I wondered whether the guidelines intended to mean the brightness-adjusted colour values here, rather than the absolute colour values, but you can see from the source of the guidelines at Testing The Readability Of Web Page Colors that it is the absolute colour values that are intended.

There are many colour combinations, particularly where the background colour is around the mid-range mark, where no text colour would meet the min-500 colour difference criterion. For example, this:

I need more pay!

The white-on-blue text looks pretty legible to me, but it has a low colour difference score, of 323, so shouldn’t be, if the W3C guidelines are to be believed.

And there would be no way of rectifying this, no way of obtaining readable text on that background colour, well that’s just ridiculous isn't it? The background colour total is 111+112+219= 442. With black text, (0,0,0) this would give a colour difference of 442, ie short of the required 500. And with white text (255,255,255) it gives a colour difference of (255-111)+(255-112)+(255-219) = 323, also short of the required 500. It is fairly easy to work out that any background colour with a colour value between 265 and 499 (>264 and <500) could never have a text colour on top of it that would fit the colour difference readability test. Clearly that cannot be right, clearly the researches haven’t done their homework properly.

Actually, you can see the mistake they’ve made by looking at Testing The Readability Of Web Page Colors from the University of Totonto. They’ve used as a basis the suggestions from http://www.lighthouse.org/accessibility/effective-color-contrast/ which, as they say, do not give a formula for colour difference but suggest that there should be one.

Then they did what researchers at universities have a horrible tendency to do, because it’s what you do, you put some samples out to a selection of students and you analyse the results of what they say. The problem with this approach can be that it depends heavily on how representative the samples are, and this seems to be where they’ve tripped up, for you can soon see by looking at the analysis above their results fall apart in no time.

Poor old academic researchers, I’m so glad I don't have to be one of them, for I can be as right or wrong as I like, though it is a little bit irritating when they get paid for producing nonsense and I don’t, but then life is a piggy much of the time.

Let’s abandon this idea of a ‘colour difference’. It will work sometimes, but then no doubt all manner of formulas will work sometimes. Let’s concentrate on making the brightness difference work and then we can begin to get a workable formula. This is discussed further on my Readable Text in Colour – Effect of Brightness page.