Readable Text in Colour

To Decide by Formula Whether Text Is Readable
This block is in black text on a mid-grey background, you’ll notice that it is not so clear to read as the white text on the same colour background in the next block, with the same font and size.
This block is in white text on a mid-grey background, it is surely noticeably clearer to read than the black text on the same colour background in the previous block, with same font and size.
 
The white text on mid-grey (RGB 128,128,128) is more clear to read than black text on mid-grey ( RGB 1,1,1 black so that the white and black are equidistant from grey 128, i.e. minus 127 and plus 127).
Why so? Shouldn’t the readability be the same, if the hues are the same and their brightnesses equidistant?
They would if the brightness of pixels on a screen increased linearly, but they do not increase linearly, there is a greater difference between two brightness levels on a bright pixel pair than a darker pair, a formula that is linear will never, never ever, give you a consistent result across the whole range of brightnesses.
This phenomenon, of relative brightness of bright pixels being perceptually greater than relative brightness of darker pixels, means that any formula that gives a brightness R, where R = G = B (i.e. red = green = blue colour values are equal and so the colour is grey) is not going to be useful when calculating the distance between two brightnesses, since the distance between the two brightnesses of given values will always be constant, irrespective of how bright or dark those relative values are. As my two panels above illustrate, this will not be a good determinant of readability.
ALL those formulas therefore which are of the type R*a + G*b + B*c, where a, b and c are each a constant, will be of limited use in determining readability of text over a background, because they do not take into account the different distance in relative brightness between darker and brighter pixels.
There are the gamma calculations, which work on an exponent and are described on my page Formula for Calculating Colour Brightness. The gamma calculation that gives a result identical to what you get with Photoshop still gives a brightness R where R = G = B. Although the formula uses exponents, the brightness results come out linear, see my page Colour Brightness Experiment. This is obvious when you consider the 256 shades of grey, any one of which gets a brightness value equal to its brightness number, i.e. a grey of value 80, say, will have a brightness value of 80. As the two panels above show, this is inadequate for determining relative brightness perception.
In order to gauge relative brightness, the brightnesses need to be weighted, to give a lower value the darker the brightness value. This is demonstrated on my page Colour Brightness Experiment and on my page Text Readability in Colour. For example, unweighted, the following two panels both have the same brightness difference.
This block is in green text on a red background, the background brightness values are 132 in like-Photoshop gamma, 98 in linear CIE XYZ, and 113 in linear YIQ. Text brightness values 192 like-Photoshop gamma (diff 60) 174 in linear CIE XYZ (diff 76) and 153 in linear YIQ (diff 40).
This block is in red text on a green background, the background brightness values are 132 in like-Photoshop gamma, 123 in linear CIE XYZ, and 111 in linear YIQ. Text brightness values 192 like-Photoshop gamma (diff 60) 187 in linear CIE XYZ (diff 64) and 193 in linear YIQ (diff 82).
 
The brightness differences are the same (in the like-Photoshop gamma formula) but their perceptual difference clearly isn’t. Most people will, I think, find the rightmost panel much more comfortable to read than the leftmost.
Now we do the same backgrounds, but use a weighted formula with an exponent of 2.5 (see my page Colour Brightness Experiment. The brightness difference in the like-Photoshop formula is, as above, 60 in both cases, though this time it has been weighted.
This block is in green text on a red background, the background brightness values are 49 in like-Photoshop gamma, 23 in linear CIE XYZ, and 34 in linear YIQ. Text brightness values 109 like-Photoshop gamma (diff 60) 81 in linear CIE XYZ (diff 59) and 67 in linear YIQ (diff 34).
This block is in red text on a green background, the background brightness values are 49 in like-Photoshop gamma, 41 in linear CIE XYZ, and 32 in linear YIQ. Text brightness values 109 like-Photoshop gamma (diff 60) 100 in linear CIE XYZ (diff 49) and 111 in linear YIQ (diff 79).
 
Is that better? Yes I think it looks much more consistent. And green on red of similar brightness levels is an extreme example to demonstrate.
And how about greys? Weighted with an exponent of 2.5, mid-grey comes out at R=G=B=194.
This block is in black text (R=G=B=42) on a grey background, the background brightness values are 129 in all calculation formulas (you cannot get 128). Text brightness values 3 in all formulas (diff 126).
This block is in white text on a grey background, the background brightness values are 129 all formulas. Text brightness values are 255 in all formulas (diff 126). The brightness difference is therefore the same in both panels.
 
That’s more like it.
The menu down the right of the page points to various experiments with colour brightness calculations, being the part-completed fruits of my researches. See also Text Readability in Colour.

More Options on a Dark Background

Dreamweaver’s Editor Changes to Light Text on a Dark Background – November 2015
The Adobe Dreamweaver editor pages used to be on a white background, mainly black text but some in colour. And then with the update to Dreamweaver CC in November 2015 that changed, now the background is dark, with lighter text on top. Why?
My guess is that you can get more differential in colours with lighter text on dark, than you can with darker text on light. And the editor is becoming ever more intuitive, with different sections appearing in different colours for easier interactive validation.
Of course, according the the guidelines for readability as issued by the W3C (those that I criticise on Holes in the W3C Colour Readability Guidelines) whether the text is lighter or darker than the background should make no difference. But then the W3C Colour Readability Guidelines are flawed, we don’t take any practical notice of them.
One of the colours that you get more scope with on a dark background is, of course, yellow. But there’s more to it than that. If as I maintain (on Formulas for Calculating Colour Brightness) brighter colours are more finely detectable relatively than darker ones then, well you would get more scope for colour differential from a set of bright colours than a set of dark ones.
So I can see Dreamweaver’s point in making this change, though it’ll take me a bit of time to get used to it. At the moment I’m finding it much harder on the eyes than the old white pages. I’ve changed the background to a slightly lighter shade of dark under Dreamweaver Preferences, which helps a little, so far.

Colour Brightness Adjustments

Colour Brightness Experiment
Colour Brightness Adjustments.
Adjust the brightness of a given colour. With the sliders on the left you set the brightness level and the base colour. The sliders on the right show the adjusted RGB values. Do not move these, they are for information only.
↑↓ 255 255 255   Base Colour Adjusted   255 255 255
   
Base:    Adjusted:
Colour Brightness Values
STW* W3C YIQ CIE XYZ Lightness Average
Base
Adjusted
Page uses cookies to remember settings from one session to the next unless disallowed. Allow cookies?
★ Meaning and Purpose of this Page ★
There are two colour panels, one left, one right, titled Base Colour and Adjusted.
To the left of the colour panels there are four sliders.
The leftmost slider adjusts the BRIGHTNESS of the base colour that is in the left panel and shows the result in the right panel.
The three RGB sliders that are to the left of the colour panels adjust the colour (hue) in the leftmost panel, when you move them they simultaneously set the rightmost colour panel to match the leftmost, which they have to do, if you think about it.
The three sliders to the right of the colour panels are not for sliding by hand, they show the brightness RGB values of the rightmost colour panel. They are there as sliders solely to show the RGB values in a graphic format that is relative to the sliders on the left.
Underneath the colour panels, where it says ‘Colour Brightness Value’ there are five columns, each one showing the brightness value of both the base colour (the leftmost colour panel) and the adjusted colour (the rightmost colour panel).
Each of the Colour Brightness Values is expressed according to a different formula.
STW* is the formula devised by me, and discussed in detail on Readable Text in Colour – STW*.
W3C YIQ is the YIQ formula recommended by the W3C and discussed on Holes in the W3C Colour Readability Guidelines.
The formulas for other three: CIE XYZ, Lightness and Average, can be found on Puzzling Greys.
You can use this page when you want to get a higher or lower brightness for a colour, for it is not always easy to do that by eye when there’s more than one of the RGB triad at greater than zero.

Holes in the W3C Colour Readability Guidelines

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 it’s wrong.
On three easily-shown counts is it wrong. Do researchers never test anything?
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.

Readable Text in Colour – Effect of Brightness

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

Close Colour Readability

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

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.