Accessibility guide
How to check colour contrast for accessibility
Colour contrast checks compare foreground and background colours to make sure text, buttons, links, and interface elements are readable. For most websites, target WCAG AA as the minimum and use AAA for important content where the design allows it.
Fast answer
Use a contrast checker, enter the text colour and background colour, then confirm the ratio meets at least 4.5:1 for normal text or 3:1 for large text and interface controls.
Open Hue contrast checker →WCAG contrast targets
| Element | AA | AAA |
|---|---|---|
| Normal body text | 4.5:1 | 7:1 |
| Large text, 18pt+ or bold 14pt+ | 3:1 | 4.5:1 |
| UI components and icons | 3:1 | Aim higher when possible |
How to test a colour pair
- Pick the exact foreground colour used for text, icons, or button labels.
- Pick the exact background colour behind it, including hover or disabled states.
- Run both colours through a contrast checker.
- If the pair fails, darken the text, lighten the background, increase font size/weight, or choose a different accent colour.
- Repeat for mobile, because smaller text often fails first.
Common contrast mistakes
- Light grey text on white backgrounds.
- Brand-colour buttons with white text that look good but fail AA.
- Text placed over photos without a dark overlay.
- Disabled states that become unreadable.
- Relying on colour alone to show errors, success, or selected states.
Fix it with Hue
Hue’s contrast checker gives instant AA/AAA results and preview states so you can fix accessibility issues before they reach production.