Colour Text Readability Experiment

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 Colour picker
or †    Set  text:

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

1 comments:

Rachel Perlmutter said...

Cool tool!

Post a Comment