Colour Contrast and Accessibility in Design
Colour contrast — the difference in luminance between text (or interface elements) and their background — is one of the most critical accessibility considerations in digital product design. Insufficient contrast makes content unreadable for users with low vision or colour blindness.
WCAG Contrast Requirements
- Normal text (under 18pt/14pt bold): Minimum 4.5:1 contrast ratio for Level AA; 7:1 for Level AAA
- Large text (18pt+ or 14pt+ bold): Minimum 3:1 for Level AA
- UI components and graphical objects: Minimum 3:1 against adjacent colour(s)
- Decorative content: No requirement — contrast rules apply only to content that conveys information
Checking Contrast
Tools we use:
- WebAIM Contrast Checker (online)
- Figma plugins: Stark, Able, or Contrast
- Browser DevTools accessibility panel (shows contrast ratio for any selected element)
Common Mistakes
- Using light grey text on white backgrounds ("elegant" but often fails AA)
- Relying on brand colours without checking contrast (brand colours are often designed for print, not digital accessibility)
- Forgetting to check disabled states and placeholder text (these often have lower contrast by default)
- Not checking contrast in dark mode (both themes need to pass)