Colour Text Legibility
Experiment with readability of coloured text over a coloured background. Move the sliders to see the effect of colour changes. The ‘seems good’ tick should tell you that the text is legible.
Results explained in the notes at the foot of the page.
44pt 255 255 255 255 255 255
10pt
 Text Colour Background
More Pay
 Set colours 
L LB L means lock sliders. LB means lock to maintain brightness levels. LB L
Brightness Text: Background: diff: poor diff is 110 to -140 Colour picker
good (Colour difference: 765)
or †    Set  text:
Web Accessibility Guidelines from the W3C (and inadequate)
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.

Notes:

W3C Guidelines for colour readability:

The brightness difference and colour difference shown above are based upon the suggested algorithm 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.

Brightness differences less than 125 and colour differences less than 500 are supposed to be not good, 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 FOUR counts is it wrong. Do these researchers never test anything?

1. Brightness of text from the YIQ calculation as given in the guidelines is highly unreliable. Take a look at my experiment page Text Over Background on Brightness Difference and you can quickly see, especially with a text colour that is lighter than its background, that the YIQ formula is flawed in this respect.
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 Readable Text in Colour.
3. The ‘colour difference’ requirement means that backgound 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.
4. ‘Brightness difference’ requires a different readability break point for light text on a dark background than it does for dark text on a light background. This is fairly fundamental stuff, that light on dark has different readability requirements from dark on light. 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. The ‘poor diff is’ figure above takes account of the different ranges for light on dark from dark on light.
For more detail please see my readability colour brightness page.
These researchers! Never believe a guideline, test, test, test!

Points versus pixels:

I use type measurements in points (1/72nd of an inch). Some prefer pixels and some prefer relative measurements. The problem with pixels is that type will be a different size depending on the resolution of your monitor, whereas with points the type size should stay consistent from monitor to monitor – I expect that it doesn’t always, in fact, but it’s about the best that we can do.

Font selection:

† The fonts in the dropdown list are the Microsoft fonts that many machines have. Currently this page is not set up to know what fonts actually are on your machine, but it will try setting a font that you type the name of (in the box that follows ‘or †’ and after you click ‘Set’). If you click ‘Set’ when the box is blank, the Microsoft font from the dropdown list will be used. If a font you select or type isn’t present, probably the font will be changed to your machine’s default font – that’s what seems to happen.

Thanks for your attention. Please keep tuning in to the site as it gets honed and developed periodically. Welcome.

Contact Me

ý
Colour picker.
Click and let go on the 2D spectrum and then move the mouse to find a colour. Click again to select the colour.
Text     Background