Colour Text Readability Experiment Test Page

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

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

W3C YIQ Brightness	Text:	Background:	diff:	poor diff : -125 to 125(inaccurate)
(Colour difference: 765)

CIE XYZ Luminosity

Text:

Background:

diff:

STW* Brightness	Text:	Background:	diff:	poor diff : -80 to 80
good		Make readable	Colour picker

‘Make Readable’ tries to adjust the brightness into range while maintaining hue.

Arial Comic Sans Georgia Times New Roman Verdana Calibri Cambria Candara Consolas Constantia Corbel

or †

Set

text: More Pay

Notes:

W3C YIQ Brightness:

The W3C guidelines for colour readability, but as I point out on my page Holes in the W3C Colour Readability Guidelines those guidelines are rather seriously flawed.

CIE XYZ Luminosity:

This gives a better result than the W3C YIQ formula, but still not accurate enough for reasons that I explain on my Readable Text in Colour page.

STW* Brightness:

STW* means SEEM TO WORK Hoorah!. The formula used here is shown on my Readable Text in Colour page.

Points versus pixels:

I use type measurements in points (1/72nd of an inch). Some prefer pixels and some prefer relative measurements. With pixels the type could 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.

X

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