Color & contrast

Colour is one of the easiest things to get wrong and one of the cheapest to fix. Text that looks fine on the designer’s bright screen turns to mush on a phone in sunlight; an error that is only ever shown in red is silent to anyone who can’t tell red from grey; a button whose border barely separates it from the page disappears for a low-vision user. None of these are exotic edge cases — they affect a large share of every audience, every day. This category covers the four contrast and colour rules that catch the overwhelming majority of real-world failures, with copy-ready fixes for each.

Who this affects

• People with low vision rely on adequate luminance contrast to make out letterforms, control edges, and icons; thin, pale text and faint borders simply vanish.
• People who are colour-blind — roughly 1 in 12 men and 1 in 200 women — can miss any cue carried by hue alone, such as “errors are red” or “the green items are done”.
• Older users, whose lenses yellow and whose contrast sensitivity declines with age, struggle with the same low-contrast text and subtle colour differences.
• Anyone on a poor screen or in bright sunlight — a cheap monitor, a dimmed laptop, or a phone outdoors — experiences a situational version of low vision, so good contrast helps every user, not only those with a permanent disability.

Standards covered

The lessons in this category map to the colour and contrast success criteria of WCAG, and through them to the laws and harmonised standards that adopt WCAG by reference. The same fixes satisfy all of them at once.

Lessons

• Colour & contrast

  The flagship lesson: text contrast that meets the AA ratios, never using colour as the only cue, lifting non-text and UI contrast to 3:1, and making links distinguishable without colour — the four defects behind most colour and contrast failures, each with bad and good examples, copyable code, and a fix.

  1.4.3 1.4.11 1.4.1

• Building an accessible colour palette

  Choose text, state and placeholder colours that meet contrast and never rely on hue.

• Non-text contrast: UI, icons & charts

  Give control borders, icons, chart colours and focus rings at least 3:1 contrast.

More colour and contrast lessons are coming — images of text, focus visibility, and themable high-contrast modes among them.