Colour Contrast

If text cannot be distinguished from its background, it cannot be read. Contrast is not an aesthetic preference — it is a legibility requirement.

How contrast ratio works

Contrast ratio is calculated from the relative luminance of two colours. A ratio of 1:1 means no contrast — identical colours. A ratio of 21:1 is maximum contrast — pure black on pure white. WCAG AA requires a ratio of at least 4.5:1 for normal body text and 3:1 for large text (18pt regular or 14pt bold). WCAG AAA requires 7:1 for normal text. These are minimums — not targets to hit exactly.

What fails most often

Light grey text on white backgrounds is the most common failure. A hex value like #aaaaaa on white produces a contrast ratio of approximately 2.3:1 — far below the AA threshold. Placeholder text in form fields, caption text, and metadata labels are the most common offenders. Disabled state styling is exempt from contrast requirements, but “this looks like a disabled state” is not a valid design intent.

Contrast for non-text elements

WCAG 1.4.11 requires a 3:1 contrast ratio for UI components — borders of inputs, icons that convey information, and graphical elements. A text input with a light grey border on a white background may fail not because of the text inside it, but because the border itself is indistinguishable from the background.

The tools

Use a dedicated contrast checker — the browser devtools, the Figma Colour Contrast plugin, or the APCA calculator for more nuanced analysis. Do not rely on visual judgement. What looks fine on a high-quality display in a dim room will fail for a user on a phone in sunlight.

prefers-contrast

Some users need more contrast than the WCAG minimum — not because of a clinical low-vision diagnosis, but because of display quality, ambient lighting, or personal sensitivity. Users who have enabled “Increase Contrast” (macOS) or “High Contrast” (Windows) signal this via the prefers-contrast CSS media query:

@media (prefers-contrast: more) {
  :root {
    --colour-text: #000000;
    --colour-surface: #ffffff;
    --colour-border: #000000;
  }
  /* Ensure focus indicators are highly visible */
  :focus-visible { outline: 3px solid #000000; }
}

This is a progressive enhancement — it costs very little to implement and removes a significant barrier for users who have explicitly requested it. The default WCAG AA design remains unchanged for everyone else.

The takeaway

Set your text and background colour pairings before finalising any design. Define a contrast-checked palette and apply it systematically rather than checking individual instances at the end. Insufficient contrast is one of the most common WCAG failures — and one of the easiest to prevent at the design stage.

When to break this

Contrast requirements have defined exemptions. Understanding them is not a licence to reduce contrast — it is a map of where the rules legitimately differ.

Contexts where contrast requirements are different:

• Decorative elements — images, illustrations, background patterns, and purely aesthetic typographic treatments that convey no information are exempt from WCAG 1.4.3. A watermark, an ornamental divider, a brand pattern on a card background. The test: if removing the element loses no information, it is likely decorative.
• Disabled UI states — WCAG explicitly exempts inactive interface components. A disabled button at 2:1 is acceptable; a button that merely looks disabled is not exempt.
• Logotypes and brand wordmarks — WCAG 1.4.3 explicitly exempts text that is part of a logo or brand name. A brand mark can use any colour at any size without contrast requirements applying.
• Large text — the 3:1 threshold (not 4.5:1) applies to text at 18pt regular or 14pt bold. If your display headline is large enough, a lighter brand colour may still meet the applicable standard.

If you break below the standard in any other context:

• Treat it as a documented exception with a stated reason — not an oversight
• Add compensation: if a low-contrast caption is unavoidable, increase weight, decrease line length, or increase size to mitigate legibility loss
• Test under real conditions: sunlight, a low-quality screen, a user who has enabled increased contrast mode. What passes on a calibrated studio monitor often fails in the field.

When brand colour and accessibility contrast pull in opposite directions — which they frequently do — the Conflict Matrix has a resolution for that specific case.