← Go Back

Accessible Colour Contrast

What is accessible colour contrast?

Accessible colour contrast is the measurable difference between foreground (e.g. text, icons) and background colours so that content is readable and WCAG requirements are met. Contrast is expressed as a ratio (e.g. 4.5:1). Higher ratio = more distinguishable. WCAG Level AA is the common target: 4.5:1 for normal text, 3:1 for large text and UI components.

Use it when: you’re defining or auditing any text or UI component. Check contrast before release and when changing colour palette or typography.

Copy/paste checklist (WCAG AA)

  • [ ] Normal text – Contrast ratio ≥ 4.5:1 against the background (or 3:1 for large text: 18px+ or 14px+ bold).
  • [ ] Large text – ≥ 3:1 (AA). Optional AAA: 4.5:1 for large text.
  • [ ] UI components and graphics – ≥ 3:1 against adjacent colours (WCAG 2.1).
  • [ ] Focus indicators – Visible and ≥ 3:1 against background (or use a 2px outline that meets the requirement).
  • [ ] Don’t rely on colour alone – Pair colour with text, icon, or pattern for meaning (e.g. errors, required fields). See accessibility.

Use a contrast checker (e.g. WebAIM, axe, or browser DevTools) to verify.

Why accessible colour contrast matters

  • Many users have low vision, colour vision deficiency, or use devices in bright light; sufficient contrast makes content readable.
  • WCAG 1.4.3 (Contrast Minimum) and 1.4.11 (Non-text Contrast) require it for conformance.
  • Readable text supports usability for everyone.
  • Contrast is part of design systems and design standards so teams ship accessible UI by default.

What good contrast practice includes

Checklist

  • [ ] Text/background checked – Every text style (body, small, headings, links) checked against its background; all pass AA (or documented exception).
  • [ ] UI components checked – Buttons, inputs, borders, and focus indicators meet 3:1 where required.
  • [ ] Tools used – Contrast checker or DevTools; not eyeballed.
  • [ ] Documented – Design system or tokens specify which colour pairs are approved for text and UI.
  • [ ] Rechecked on change – When you change colour palette or typography, re-run checks.

Common formats

  • WCAG AA: 4.5:1 normal text, 3:1 large text and UI. Target for most products.
  • WCAG AAA: 7:1 normal, 4.5:1 large. Use when you want stronger contrast (e.g. long-form reading).
  • Design tokens: Define text-primary, text-secondary, background etc. with approved pairs so contrast is built in.

Examples

Example (the realistic one)

Body text: #333 on #fff → 12.6:1 (passes AA). Secondary text: #666 on #fff → 5.7:1 (passes). Link: #0066cc on #fff → 5.1:1 (passes). Button: White text on #0066cc → 4.5:1 (passes). Error text: #b31d1d on #fff → 5.2:1; error state also has an icon so it’s not colour-only. You run a contrast checker on these and add them to your design system as approved pairs. New components use only these pairs for text and key UI.

Common pitfalls

  • Grey on grey: Low contrast for “subtle” text. → Do this instead: Use a darker grey (or smaller size only for non-critical text) so ratio is at least 4.5:1 for body.
  • Placeholder as label: Placeholder has low contrast and disappears; users lose context. → Do this instead: Use a visible label with sufficient contrast; placeholder is optional hint.
  • Colour only for meaning: “Red = error” with no text or icon. → Do this instead: Add icon or text so it’s accessible and still clear if colour isn’t perceived.
  • No focus contrast: Focus ring removed or too faint. → Do this instead: Keep focus visible; ensure indicator has ≥ 3:1 against background. See keyboard navigation.
  • Assuming “it looks fine”: Not measuring. → Do this instead: Use a contrast checker on every text and UI colour pair.
  • Colour contrast vs contrast (general): Contrast in design can be size, weight, or colour; accessible colour contrast is the specific WCAG requirement for colour ratios.
  • Colour contrast vs colour palette: Colour palette defines your colours; accessible contrast defines which pairs are valid for text and UI.
  • Colour contrast vs typography: Typography choices (size, weight) affect whether you need 4.5:1 or 3:1; both work together for readability.
  • WCAG – 1.4.3 Contrast (Minimum), 1.4.11 Non-text Contrast.
  • Contrast – general design contrast; colour contrast is the measurable part.
  • Accessibility – colour contrast is a core requirement.
  • Typography – text size and weight affect which ratio applies.
  • Design systems – document approved contrast pairs in tokens.
  • Color palette – define palette so approved pairs meet contrast.
  • Keyboard navigation – focus indicator needs sufficient contrast.

Next step

Run a contrast checker on one key screen (e.g. sign-in or dashboard). Fix any text or UI that fails WCAG AA. Add approved text/background pairs to your design system or design standards. Read Contrast for the broader design view.

Related Terms