Colour Difference

Readability of Type in Colour

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.

The colour readability page page uses a formula to determine legibility based upon the W3C Web Accessibility Guidelines on colour visibility, that are half-alright so far as they go, but which do not stand up to experiment in the area of ‘Colour Difference’.

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 intend 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:

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. 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 total 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.

Furthermore, in the example it is black text that is much closer to the 500 breakpoint than white, yet black text would be noticeably less legible:

You can see from a few experiments on my text colour readability page that there are many cases where a perfectly readable text colour gets a low ‘colour difference’ score.

Furthermore, any one colour, red, green, blue, from its minimum to maximum state, has a colour difference of 255. Therefore to get a 500 difference you need to have two of the red, green and blue colours at almost their maximum difference, text from background, like this:

What are the W3C guidance-setters playing at with this ‘colour difference’ formula? It’s a nonsense. 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 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 the representativeness of the samples, and this seems to be where they’ve tripped up, for you can soon see by using my text colour readability page that their results fall apart in no time, as I’ve just described. 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 here I have to say I do believe I’ve got it right, or at least subject to the riders that I identify on these pages.

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 readability colour brightness page.