← Go Back

Contrast

What is contrast?

Contrast is the difference between elements so users can tell them apart and see what matters. It can be of colour (e.g. text vs background), size, weight, or position. In UI, colour contrast is critical for readability and accessibility (e.g. WCAG).

Use it when: you’re designing text, hierarchy, or interactive elements. Sufficient contrast makes content readable and supports accessible colour contrast.

Copy/paste checklist

  • [ ] Text vs background – Meet WCAG AA: 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold). See accessible colour contrast.
  • [ ] Interactive elements – Buttons and links distinguishable from body text (colour, underline, or weight).
  • [ ] Focus – Keyboard focus indicator has enough contrast (e.g. 3:1 against background).
  • [ ] Hierarchy – Primary vs secondary content differentiated (e.g. darker vs lighter text, or size/weight).
  • [ ] Don’t rely on colour alone – Use colour plus text, icon, or pattern so accessibility is maintained.

Why contrast matters

  • Readable text depends on enough contrast between text and background.
  • Accessibility and WCAG require minimum colour contrast for text and UI components.
  • Hierarchy and emphasis rely on contrast (size, weight, colour).
  • Interactive elements need to be visually distinct so users know what to click.

What good contrast includes

Checklist

  • [ ] Text contrast – All body and small text meets WCAG AA (4.5:1 or 3:1 for large). Use a contrast checker.
  • [ ] UI components – Buttons, inputs, and focus indicators have sufficient contrast (3:1 against adjacent colours where required).
  • [ ] Not colour-only – Important information isn’t conveyed by colour alone (e.g. errors: colour + icon or text).
  • [ ] Consistent – Same type of content (e.g. links, headings) uses the same contrast treatment across the product.
  • [ ] Focus visible – Focus ring or indicator has enough contrast. See keyboard navigation.

Common formats

  • Colour contrast: Luminance ratio between foreground and background. Measure with tools; target WCAG AA.
  • Size/weight contrast: Larger or bolder = more emphasis. Use with typography and hierarchy.
  • Spatial contrast: White space and position to separate and emphasise.

Examples

Example (the realistic one)

Body text: Dark grey (#333) on white; ratio 12.6:1 (passes AA). Secondary text: Mid grey (#666) on white; 5.7:1 (passes AA). Links: Same as body plus underline; focus ring 3:1 against background. Buttons: Primary button dark on light background; focus ring visible. You run a contrast checker on every text/background pair and fix any that fail WCAG AA. You avoid “required field” or “error” indicated by colour only; you add an icon or label.

Common pitfalls

  • Low text contrast: Grey text on light grey. → Do this instead: Meet 4.5:1 for normal text; check with a contrast checker.
  • Colour only for meaning: “Red = error” with no text or icon. → Do this instead: Use colour plus text, icon, or pattern so it’s accessible.
  • Removing focus outline: Focus ring removed for aesthetics. → Do this instead: Keep focus visible with sufficient contrast (e.g. 3:1); style it to match the design.
  • 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.
  • Contrast vs accessible colour contrast: Accessible colour contrast is the measurable requirement (e.g. WCAG ratios); contrast is the general principle.
  • Contrast vs hierarchy: Hierarchy is the order of importance; contrast (size, weight, colour) is one way to create it.
  • Contrast vs typography: Typography (size, weight) creates contrast; colour contrast is about text/background and UI.

Next step

Audit one screen or flow: check every text/background pair with a contrast checker and fix any that fail WCAG AA. Ensure focus indicators and buttons have sufficient contrast. Read Accessible colour contrast for the full checklist.

Related Terms