Holes in the W3C Colour Readability Guidelines

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

The W3C Colour Readability Guidelines Have Not Been Tested Properly – Disgraceful

Web Accessibility Guidelines from the W3C

Color visibility can be determined according to the following algorithm:

(This is a suggested algorithm that is still open to change.)

Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.

Color brightness is determined by the following formula: ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000 Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color.

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 brightness difference is 125. The range for color difference is 500.

The suggested algorithms for good text colour visibility in the W3C Web Content Accessibility Guidelines, see suggested colour attributes algorithm from the W3C and reproduced in the box on the right cover brightness difference and colour difference.

Brightness differences less than 125 and colour differences less than 500 are supposed to be not good for readability, though the W3C algorithm is a suggested algorithm that is ‘still open to change’ and that’s no bad thing, seeing as how on three easily-shown counts does it not stand up to a few moments experiment. Do these researchers never test anything?

The three counts on which the guidelines flop are these:

1. There is a greater difference between two brightness levels on a bright pixel pair than a darker pair, a formula that is linear such as that proposed in the W3C guidelines will never, never ever, give you a consistent result across the whole range of brightnesses.

This is green on green, background value 64, foreground 128, so a difference of 64.

This is green on green, background value 151, foreground 215, so a difference of 64.

Both those examples on green on green with a difference of 64, or in the YIQ formula 38 (for by multiplying by a constant the YIQ difference on a colour value difference will be equivalent). Yet the brighter one is clearly much more readable – much clearer to read – than the darker one.

Similarly where the background is brighter than the text colour:

This is green on green, background value 128, foreground 64, so a difference of 64.

This is green on green, background value 215, foreground 151, so a difference of 64.

Ah yes, you might say, but provided the brightness difference is 125 or more as stipulated by the W3C guidelines, does it matter what happens when it is less? Well if you set the bar high enough I suppose, though even then:

Background value 255,0,0, foreground 217, 185, 255, YIQ brightness difference 126. It is readable I suppose . . . just.

So even with a high-set bar, the problem still arises. that of CONSISTENCY.

If brighter text and backgrounds are more easily distinguished than are darker, at least on a computer monitor, then for determining readability when calculating a relative brightnesses between background and foreground you need to apply a brightness weight to the calculated brightness values. See my pages Formulas for Calculating Colour Brightness and Text Readability in Colour.

2. Readability of coloured text/background pairs is influenced by text size. Make the font bigger, and the readability of text improves. This is not covered in the W3C guidelines. See my page Readability of Type in Colour – Effect of Font Size.

3. The ‘colour difference’ requirement means that background or text with a colour value between 256 and 499 should be out of range for readability. That can’t be right can it? No, it clearly isn’t.

I explain this more fully on my discussion on colour difference page.

I could here have a rant about the levels of basic knowledge of people who set guidelines such as these, and how much they get paid in relation to me, which seeing as I don’t get paid anything at all is definitely more, but, er . . . oh I just did.