Color Contrast and Accessibility

Low-contrast text looks elegant in a design mock-up and becomes unreadable on a sunny day, on a cheap screen, or for the millions of people with reduced vision. Colour contrast is the most common accessibility failure on the web, and also one of the easiest to measure and fix.

Why contrast matters

Contrast is the difference in brightness between text and its background. Too little, and the text strains the eye or disappears. This is not a niche concern: around one in twelve men has some colour vision deficiency, vision declines with age for everyone, and all of us struggle with pale grey text in bright sunlight. Good contrast helps every visitor, not just those with a diagnosed impairment.

The WCAG ratios

The Web Content Accessibility Guidelines put a number on it: a contrast ratio between text and background, from 1:1 (identical, invisible) to 21:1 (black on white). The thresholds to remember:

• 4.5:1 — the minimum for normal body text (WCAG AA).
• 3:1 — the minimum for large text (roughly 18pt, or 14pt bold) and for meaningful graphics and UI components like icons and input borders.
• 7:1 — the stricter AAA level for body text, worth aiming at for long-form reading.

If your body text hits 4.5:1 and your large headings and interface elements hit 3:1, you have cleared the bar that most accessibility audits and a growing list of legal requirements check against.

Colour alone is never enough

A second rule catches a subtler failure: never use colour as the only way to convey information. A red "error" and a green "success" message look identical to someone with red-green colour blindness. A link shown only by being a different colour vanishes for them.

The fix is to add a second signal:

• Pair the red error with an icon and the word "Error".
• Underline links, do not just recolour them.
• On a chart, add labels or patterns, not just colour-coded lines.

Colour can reinforce meaning; it must not be the sole carrier of it.

Common places it breaks

• Placeholder text in form fields, often a pale grey well under 4.5:1.
• Text over images, where contrast varies across the photo — add a dark overlay or a solid panel behind the text.
• Disabled buttons so faint they look broken.
• Brand colours used for text — a light brand colour that works as a background fails as body text.
• Dark mode, where a palette that passed in light mode can fail once inverted, so both themes need checking.

Designing within the constraints

Contrast requirements do not mean ugly design. They mean choosing palettes deliberately: a brand colour for large headings and buttons (3:1) where it works, and a darker, higher-contrast shade for body copy (4.5:1). Often the fix is simply using a deeper tint of a colour you already have, not abandoning your palette.

Check it, do not eyeball it

Contrast is impossible to judge reliably by eye — a pairing that looks fine on your calibrated monitor can fail on a phone in daylight. The only trustworthy method is to measure the ratio.

Checking the contrast ratio between any two colours against the WCAG thresholds, simulating how a palette looks to someone with different types of colour blindness, generating accessible shades and tints of a brand colour, and converting colours between formats all run from your browser. Test every text-and-background pairing before you ship, confirm your interface still makes sense when colour is removed, and you turn accessibility from a vague worry into a box you can objectively tick.