Contrast, legibility and the problem with blue

Intuition

Legibility is about brightness difference first, hue second. The eye also has quirks, and blue sits right in them.

Contrast is a difference in luminance, and low contrast hurts reading

Colour contrast is the difference in luminance or brightness between two colours in a design, typically foreground and background. The greater the contrast, the easier the content is to distinguish and read. Make text stand out clearly from the background in both colour and brightness. If contrast is too low the text may look blurry or have a glowing effect, making it hard to read and causing eye strain. The lecture links contrast checkers (TPGi, WebAIM) but gives no numeric ratio on its slides.

Blue is the hard colour for the eye

Exam detail

Problems with blue: just 2% of retinal cones detect blue; the eye brings blue into focus in front of, not on, the retina; acuity for blue is poor and decreases with age; symbol identification is poorer with blue than any other colour. So avoid dark or highly saturated blue for text, avoid fine lines on black or other dark backgrounds, and avoid fine-line text or symbols in highly saturated blue on white.

Other legibility facts: acuity is reduced at the violet end; with normal light we see mid-spectrum colours (green, yellow) best; reds appear closer than blues; warm colours appear larger than cool ones; distant colours on the spectrum require refocusing; illumination matters.

Blooming: light colours on dark backgrounds appear larger, so light text on a dark background seems larger than dark text on light.

NASA guidance and Tog turn this into rules

The lecture quotes NASA colour usage guidelines: pure blue should not be used on a dark background for text, thin lines or high-resolution information; blue should not be the foreground colour where fine detail is needed. Blue can be used in most contexts with adequate luminance contrast, for example substituting white or another high-luminance colour for black. More guidance: use no more than six colours to label graphic elements, follow cultural conventions, code consistently across displays and pages, code redundantly with other graphic dimensions, and do not use colour coding on small graphic elements.

Further advice: with a black foreground use cyan, magenta or white; ensure contrast in hue and brightness of foreground and background; allow users to control colour coding; use colour consistently; use redundant cues; avoid saturated blue for small text and thin lines.

Pitfall

Contrast is about luminance difference, so a pair of different hues can still fail if they have similar brightness. “Different colours” is not “enough contrast”.

Recall

Give two reasons the lecture gives for avoiding saturated blue for small text.

Only about 2% of cones detect blue; blue focuses in front of the retina; acuity for blue is poor and falls with age; symbol identification is worst for blue.