Color contrast is one of the most common accessibility failures. The fix is simple once you know the thresholds.
The Thresholds
| Use Case | Level AA | Level AAA |
|---|---|---|
| Normal body text | 4.5:1 | 7:1 |
| Large text (18px+ or 14px+ bold) | 3:1 | 4.5:1 |
| UI components (borders, icons) | 3:1 | — |
| Decorative elements | Exempt | Exempt |
Level AA is legally required in most jurisdictions (ADA, EN 301 549, Equality Act). AAA is best practice.
Common Failures
- Light grey
#999 on white #fff → 2.85:1 → Fails (very common mistake) - Fix: darken to
#767676 for 4.54:1 (AA pass) - White on medium blue
#4285f4 → 3.07:1 → Fails for body text - Fix: use darker blue
#1558d6 → 5.37:1
Testing Tools
- Figma: Select text layer → right panel shows contrast ratio
- Chrome DevTools: Accessibility panel → contrast indicator
- Browser tools: axe DevTools, WAVE extensions
For checking any specific hex or RGB pair against WCAG standards, a free contrast checker gives the exact ratio and AA/AAA pass/fail verdict instantly.
Key Rule
Always test dark mode separately — a colour combination that passes in light mode can fail in dark mode. Design to AA as a baseline, aim for AAA on body text.
Originally published at https://snappytools.app/color-contrast-checker/
