Colour blindness.

Colour blindness is the inability to tell certain colours apart, and it affects a considerable share of the world’s population, men in particular.

For web design the practical consequence of colour blindness gathers into a single rule: colour must never carry information on its own. WCAG criterion 1.4.1 “Use of Color” requires this at level A — a baseline requirement.

The places where the rule is broken are well known. Signalling that a form field is invalid with a red border alone, marking required fields with colour alone, distinguishing series in a chart by colour alone, and showing a state with nothing but a green-red pair.

The solution is not to remove the colour but to add a second signal to it. Text for an error state, an asterisk or a clear label for a required field, different line styles or direct labelling in a chart, an icon in a status indicator. Colour remains as a layer of emphasis on top and carries no information by itself.

1. The red-green distinction is the most commonly affected pair; it is the riskiest combination in success/error indicators.
2. The blue-yellow distinction is affected more rarely, but not never.
3. Total colour blindness is very rare; in most cases colours are seen but certain pairs cannot be told apart.
4. Contrast ratio does not solve colour blindness — two colours can share a luminance and differ in hue; contrast is low and the distinction impossible.

The last item matters because confusing contrast with colour distinction is common. Sufficient contrast makes text readable; the colour blindness rule asks that the information be carried OUTSIDE colour as well. They are separate criteria and neither replaces the other.

The easy way to test is to switch the page to greyscale. Browser developer tools can do it in one click. An interface that is still understandable in greyscale is safe as far as colour blindness goes.

Another frequently broken place is marking links with colour alone. A link inside body text distinguished only by its colour becomes invisible to a user with colour blindness. WCAG recognises a specific rule for this: if an inline link is distinguished by colour alone, it must carry at least 3:1 contrast against the surrounding text and show an additional signal on focus or hover.

In practice the safest solution is the underline. Underlining links within body text removes the colour blindness problem entirely, requires no further measurement — and is the most familiar signal a reader has for recognising a link.