Brightness 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 text over different coloured backgrounds.

The text colour readability page uses a formula to determine readability based upon the W3C Web Accessibility Guidelines on colour visibility. Those guidlelines are OK up to a point, but they do not stand up fully to experiment. In particular, ‘Colour Difference’ in the guidelines makes little sense at all, as shown on my Discussion on Colour Difference’ page.

The ‘Brightness Difference’ formula given by the W3C works by itself (ie not bothering with ‘Colour Difference’) up to a point, but not fully. This page discusses how it can be adjusted with the idea of making a formula that works.

To recap (from the W3C guideline formula, reproduced in full on my text colour readability page):

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

But I don't think it is. I think that 125 is an average value and readability based upon brightness does not work like that. I would set the brightness range for readability for 10-point text, (see my font size colour readability difference page) at >110 where the text is brighter than the background, and at >140 where the text is darker than the background (though this is a basic hypothesis that is subject to qualification, see below). So:

This seems pretty readable, but if we make the text darker than the background, at the same brightness difference (and incidentally the same ‘colour difference’ – not that we should take any notice of that) it is much less easy to read:

So grey is, well . . . grey. here are the same brightness difference demonstrations in two coloured backgrounds, a green and an orange:

The effect is similar to text on grey.

On the face of it, then, if we say that subtracting the background brightness from the text brightness, a positive number (ie text brighter than background), greater than 110 is readable, but it’s not so simple, take a look at this:

That is readable, but not what you’d call very easily readable, especially if you can imagine a paragraph of text set in these colours.

It is to do with the dark background. Although my formula on the page with the sliders says that a range for readability of text brightness minus background brightness at 10pt text brighter than background is 110, in fact this needs adjusting a bit for as darker background.

There is a formula for providing a greater brightness difference, the darker the background, that I am currently experimenting with. For work in progress see Readable Text in Colour.

There is also the possibility that the values are being skewed because the YIQ brightness values as used in the W3C formula, aren’t right. Take a look at my Red on Green Readability page.

Thank you for getting this far. Work in progress on this topic is now on my blog. Take a look at my page that shows that red on green is readable (or can be), and talks about the issue of designing for people with colourblindness.