One in twelve men cannot see the difference you just used

Who you are actually designing for

Roughly 8 per cent of men and 0.5 per cent of women of northern European descent have some form of colour vision deficiency, with lower but non-trivial rates in other populations. The commonest form is deuteranomaly, a shifted green sensitivity, which makes reds, greens, browns and oranges collapse towards one another.

A much larger group has something else going on: presbyopia after forty, cataracts, a cheap screen, a projector with a dying lamp, bright sunlight on a phone, or a moving train. In aggregate, the share of your audience not seeing your design under ideal conditions approaches all of them.

This is not a special case to handle at the end. It is the ordinary case.

Contrast ratios, and what the number means

The contrast ratio compares the relative luminance of two colours: a weighted measure of how much light they emit or reflect, weighted because the eye is far more sensitive to green than to blue. The scale runs from 1:1 (identical) to 21:1 (pure black on pure white).

The widely used thresholds:

• 4.5:1 for body text.
• 3:1 for large text, meaning about 18pt, or 14pt bold.
• 3:1 for interface components and meaningful graphics: the edge of a form field, an icon that carries information.
• 7:1 is the enhanced level, for text that has to work in poor conditions.

The practical consequence that catches people: luminance is not lightness as you perceive it. A mid-yellow looks bright but has high luminance, so yellow on white fails badly while the same-looking blue passes easily. You cannot eyeball this; you have to measure it, and the measurement is free.

The three checks that take two minutes

1. Greyscale. Turn the display to greyscale, or desaturate a screenshot. Anything that becomes indistinguishable was carrying information in hue alone.
2. Contrast. Run every text-and-background pair through a checker: WebAIM’s web page, the Colour Contrast Analyser desktop app, or the contrast readout built into Chrome and Firefox developer tools.
3. Sunlight. Take the phone outside. Light grey text on white, thin weights and low-contrast placeholders fail here first and most.

Motion, and the people it makes ill

Autoplaying parallax, large sliding transitions and looping background video cause genuine symptoms (nausea, dizziness, disorientation) for people with vestibular disorders. This is not a preference.

Operating systems expose a reduce motion setting, and the web exposes it to CSS:

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Six lines, honoured by every modern browser. For video, the equivalent courtesy is not autoplaying anything with rapid flashing, and a rate above three flashes per second is the threshold associated with photosensitive seizures.

Text that can be resized, and other small mercies

• Do not disable pinch zoom. user-scalable=no in a viewport tag is a line of code that removes a disabled person’s ability to read your page.
• Set sizes in relative units so a reader’s own larger default is respected.
• Give a form field a real label, not a placeholder that vanishes the moment somebody starts typing and takes the question with it.
• Give every informative image alt text, and every decorative one empty alt text.
• Make a focus outline visible. Removing it because it looked untidy leaves keyboard users navigating a page with no cursor.

The contrast standard itself is contested

Here is the unsettled part, and it is worth knowing because you will meet designers on both sides.

The current contrast formula is known to model some cases badly. It handles dark mode poorly (it can pass a pairing that is hard to read on a dark background and fail one that is comfortable) and it ignores font weight and size almost entirely, when a hairline weight at 4.5:1 is plainly harder than a bold at the same ratio. A proposed replacement, APCA, models perceived lightness difference and does take weight into account. It has been in draft for years and is not the adopted standard.

So the position to hold: the 4.5:1 threshold is the accepted baseline and the one you will be measured against, and it is a floor rather than a guarantee. Meet it, then look at the thing on a real screen in real light, because a pairing that passes and still looks faint to you is faint.

Why this is not charity

The strongest argument is not moral. Every one of these decisions improves the design for people with no impairment at all: in sunlight, on a bad screen, tired, in a hurry, on a train. Captions serve the hearing majority. High contrast serves everybody outdoors. A visible focus outline serves anybody who prefers a keyboard. Designing for the edge of the range is how you get a design that works in the middle of it.