Readable Text in Colour – Effect of Brightness

This page has now been moved to Readable Text in Colour.

Close Colour Readability

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

This passage is in red text on green, so that converted to monochrome both the text and the background should be the same shade of grey. If you have a colour perception deficiency you may not be able to read this. In fact even if you haven’t you probably don’t find it that easy.

This passage is in red text on green, so that converted to monochrome the text and the background should not be not quite the same shade of grey. If you have a colour perception deficiency you may not be able to read this. In fact even if you haven’t you probably don’t find it that easy.

The passages on the left are in red text on green, both the red and the green in the first example being at the same STW* brightness (see Readable Text in Colour), therefore converted to monochrome both the text and the background should theoretically be the same shade of grey. Background is #008200, foreground #DC0000.

On the second example there is a STW* brightness difference of 16. Background #008200 and foreground #AE0000.

I find that the effect of these close colour combinations varies quite a lot from monitor to monitor. On some screens, the first example is quite jarring and it’s hard to read the text, while on another the first is more easily legible than the second. This will presumably be something to do with the colour calibrations of the monitor.

Something else is happening too. In both samples there is on many monitors a yellow border or shadow to each letter, sometimes noticeably stronger on the example with the brighter red (the first) than on the darker one.

This passage is in blue text on orange, both the blue and the orange being at the same brightness, so that converted to monochrome both the text and the background would be the same shade of grey. If you have a colour perception deficiency you may not be able to read this. In fact even if you haven’t you probably don’t find it that easy.

This passage is in blue text on orange, but the blue and the orange are not at quite the same brightness, so that converted to monochrome the text and the background are not quite the same shade of grey. If you have a colour perception deficiency you may not be able to read this. In fact even if you haven’t you probably don’t find it that easy.

The passages on the right are in blue text on orange-red, the blue and the orange being at the same STW* brightness (and YIQ brightness in this example, as it happens) in the top panel, and in the second panel there is a STW* brightness difference of 16, as with the green on red samples above. The same considerations apply, the degree of readability, or perhaps we should say distinguishability, of the text varies from monitor to monitor.

On both of the blue-on-red samples, I perceive a kind of darker blue shadow on the south-west side of each letter. Presumably this is an optical illusion, that equates to the yellow shadow in the red-on-green examples.

With red on green, the yellow can be explained by additive colour mixing (presumably in the eye).

The orange-red is #C73100 and the blue is #0066FF in the first sample and #003DFF in the second. You’ll see if you try an additive mix that the result is a kind of pale lilac colour, so that doesn’t adequately explain why the shadowing should be dark blue. I have an idea this might be something to do with blue being a relatively non-bright colour in the scheme of things, though quite how this might be resolved mathematically has not yet come to me. Anyone any ’bright’ ideas?

And do these shadowing effects exist if you are someone with colourblindness? For if they do, then perhaps you can read the words, even though you theoretically shouldn’t be able to. Whether you have a colour perception deficiency or not, you probably don’t find it that easy to read the text, though with regular vision you probably can, just about, solely on hue difference, though whether this is solely on hue difference, or whether there’s actually an element of brightness difference there, is still a matter for experiment.

Of course, you wouldn’t normally use a text colour that was this close to the background colour if you wanted someone to be able to read something comfortably, but this is not the same thing as saying that red text on a green background is illegible, it isn’t, it all depends on the brightness difference between the shades of red and green, see my Red on Green is Readable page.

Red on Green is Readable

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

Red on green is readable, including by people with red-green blindness, it just depends on the shade of red or green (This is #DC0000 on #82FEA9).

And we can predict it will be readable because the brightness difference, which on the above example is 159 STW* brightness difference and 141 YIQ brightness difference (see Readable Text in Colour), and this is above the breakpoint for brightness difference, irrespective of hue, so even if you have red-green blindness it will be readable. (Try it on the colour blindness tester: http://colorfilter.wickline.org).

We could convert the same brightness levels to monochrome using the reliable STW* formula, so as to simulate how someone with no colour perception at all would see it. This is #707070 on #E5E5E5, which also has a brightness difference of 159. (It has a W3C guideline colour difference of 351, so should be out of readability range according to the W3C guidelines. But as I say so often on these pages, the W3C guidelines are easily discredited with even the cursoriest of researches.)

Brightness difference is the key to readability, and it is so significant, that you can ignore the issue of designing for people with colourblindness. If the brightness level difference indicates that the text will be readable, it will be readable by people with colour recognition deficiencies, because there’s adequate difference in brightness, irrespective of the hue.

Where there is inadequate difference in brightness for the text to be considered readable, that doesn’t mean that the text is unreadable, but it may be to varying levels hard to read. There’s more on this on my Close Colour Readability page.

Colour Text Readability Experiment

This page has now been moved to Text Readability in Colour.

Legibility of Type in Colour – The Point of it All

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

Readability of Type in Colour – Effect of Font Size

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

Black on white is readable, white on white definitely isn’t. Shades in-between will depend, you may not want the text to shout at you, you may want it to be just readable, as in for example a watermark.

And the larger the text is, the more readable it is likely to be, compared with text of the same colour that is of a smaller size.

Happy Candy

Happy Candy

The bigger the type, the easier it will be to read it when there’s not much contrast between the text and background colours.

Obvious that, isn’t it? Doesn’t take much imagination to work that out – unless you design guidelines for readability of text in colour, since the people who draw up such guidelines don’t seem to have noticed this. 

Remember that different fonts at a given point size do not LOOK all the same size:

Hypothesis for type size adjustments:

You get a brightness difference by subtracting the brightness value of the background from the brightness value of the text, ie TextBrightness - BackgroundBrightness = BrightnessDifference

If the background is brighter then the text, for example black text on white, then the brightness difference will, of course, be a negative number.

I start with the general rule of thumb that at 10pt text, there will be very adequate readability outside of the brightness difference range of -80 to 80. This is using the exponential formula described in Readable Text in Colour, rather then the W3C recommendation which as I explain on these pages is worse than unreliable. (I ignore what the W3C guidelines call ‘colour difference’ as that is a complete red, green or blue herring, as explained on my W3C Colour Difference Guidelines page). 

I’ve found that by adjusting the brightness difference range (ie the -80 to 80) for changes in type size, I can get a reasonable readability analysis that takes into account the fact that bigger text is generally easier to resolve.

As a general rule, I decrease the brightness difference criteria by 2.5% for each additional point size. For example, if the bounds of 10pt text are -80 to 80, the bounds of 11pt text will be -78 to 78, that is a decrease of 2.5%. My formula for calculating this gives a zero result for text of 4pt size or less, as that is unlikely to be readable on the screen whatever the brightness levels.

Bigger font size is not a readability panacea

I must stress, here, that making type sizes bigger doesn’t automatically mean that text is easier to read. We are talking about breakpoints for colour readability on this page, not about readability measurements of text in two sizes, where in both sizes the text is fundamentally readable. There is more on this topic on my Discussion on Type Sizes page.

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.