Colour contrast in practice

01What contrast is and why it matters

Colour contrast is the difference in luminance between foreground and background colours. WCAG expresses it as a ratio from 1:1 (no difference) to 21:1 (black on white).

Low contrast hurts many people: users with low vision, people with colour vision deficiency, and anyone reading a phone in bright sunlight. Good contrast is one of the cheapest accessibility wins in a design.

02The ratios to remember

• 4.5:1

  Minimum for normal text (WCAG 1.4.3, level AA).

• 3:1

  Minimum for large text (WCAG 1.4.3, level AA).

• 7:1

  Enhanced contrast for normal text (WCAG 1.4.6, level AAA).

• 3:1 non-text

  Minimum for UI components and meaningful graphics (WCAG 1.4.11, level AA).

WCAG defines large text as at least 18 pt (about 24 CSS px) or 14 pt bold (about 18.5 CSS px). Anything smaller needs the full 4.5:1.

Non-text contrast covers input borders, icons that carry meaning, focus indicators and the parts of a chart needed to understand it.

03Common failures

• Light grey text on white for captions, timestamps and secondary labels.
• Text on images or gradients, where contrast changes from one area to another. Add a solid overlay or a text panel.
• Placeholder text that is lighter than the field border. It is still text and must meet 4.5:1.
• Pale input borders that make a field look like part of the page background.

Brand colours are often the problem. Keep a darker tint of the brand colour for text and a lighter one for decoration.

04How to test

1. Pick the text and background colours and enter them in a contrast checker. Many design tools and browser developer tools include one.
2. Check every state: default, hover, focus, selected and error.
3. Test both light and dark themes. A colour pair that passes in one theme can fail in the other.
4. For text over images, measure the lightest and darkest areas behind the text.

Some things are exempt: inactive (disabled) controls, pure decoration, and logos or brand names. Do not use the exemption for text that users still need to read.

Contrast is cheapest to fix at the palette stage. Check every text and background pair once when the colour styles are created, and record which pairs are approved for body text, large text and UI components.

• Name colour tokens by role, such as text-primary and text-muted, so nobody picks a light grey by eye.
• Define the muted text colour so that it still reaches 4.5:1 on every surface it appears on.
• Re-check contrast whenever a surface colour, such as a card background, changes.

A passing ratio is a minimum, not a goal. Larger and heavier text is easier to read even when the ratio already passes.

05Sources

• W3C. Understanding SC 1.4.3 Contrast (Minimum). https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• W3C. Understanding SC 1.4.11 Non-text Contrast. https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html