Colour Text Readability

Colour Text Legibility

You have Javascript switched off in the browser, so you are hamstrung as this page isn’t going to work for you. This site uses Javascript that is 100% safe.

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		Make readable		(Colour difference: 765)

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

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 actually, 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.

There are essentially three things wrong with the W3C guideline:

1. 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.

Read about the calculaton of readability depending on type size on my font size colour difference page.

2. 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.

3. ‘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. The ‘poor diff is’ figure above shows the range.

For more detail please see my readability colour brightness page.

These researchers! Tut, tut.

While I maintain that brightness difference is the key measurement, there could be some dispute over whether the YIQ brightness values as specified by the W3C (and taken from widely-accepted norms) are actually pitched right. See my Red on Green Readability page.

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

Use the sliders or the colour picker to see the legibility of a text colour over a background colour. For the sliders, thanks to Erik Arvidsson

The Erik Arvidsson open-source sliders are very good and overcome the sometimes lack of responsiveness on my previous (home-grown) sliders, that was particularly noticeable on Microsoft Windows, but they feel rather squidgy when you lock the sliders (ie you check the L or LB boxes), and on a slow machine the sliders don’t lock absolutely accurately whereas my old ones did this job firmly. Ho, hum. We’ll get there one day.

Alternative text-over-background in colour experiments can be found at: typetester

This page uses a formula to decide whether text in a given colour is readable over a background of a different colour. The formula is different from that given in the W3C Accessibility Guidelines (see foot of the page). The W3C guideline is in fact not correct, and this page and its accompanying description pages explain why this is so, and instead provide a workable formula.

The formula is based on the YIQ brightness values (see panel at right of text description on the lower part of this page), readability is judged by subtracting the background brightness value from the text brightness value and seeing whether the result is outside a range. The bounds of the range vary with type size, as explained on the accompanying pages.