Color contrast is the single most common WCAG failure. Roughly 40% of issues we find on first scan are contrast-related. Here's how to get it right without making your site look like a hospital signage system.
The ratios
- Normal text: 4.5:1 against the background (WCAG AA).
- Large text (≥18pt regular or ≥14pt bold): 3:1.
- UI components (button borders, input outlines, focus rings): 3:1 against adjacent colors.
- AAA bumps to 7:1 / 4.5:1 — required in some public-sector contracts.
Common traps
- Light grey on white for placeholder text. Almost always fails.
- Brand color buttons with white text — many brand greens and oranges fail at 4.5:1 unless darkened.
- Disabled states are exempt from contrast rules, but only if the state is unambiguously communicated through other means.
- Text on imagery: the contrast must be measured against the actual underlying pixels at the worst spot, not just the average.
Tools
- WebAIM Contrast Checker — fastest single-pair check.
- Stark (Figma plugin) — runs across an entire frame.
- axe-core — analyzes computed styles + image fallbacks at scan time.
Design without sacrificing aesthetics
- Build a contrast-aware palette: each accent has at least one paired text color that hits 4.5:1.
- Use semitransparent overlays on hero images (e.g.
rgba(0,0,0,.4)) before placing text. - For SaaS dashboards: keep secondary text at 4.5:1 minimum, not the trendy 3:1 grey.
- Test against your dark mode if you have one — most contrast bugs hide there.
AccessProof flags every contrast violation with the exact node, the computed ratio, and the WCAG level it fails. Fix it and re-scan to confirm.