Home › Color contrast checker
Color contrast checker: the WCAG ratios and how to pass them
Low color contrast is the single most common accessibility failure on the web, and one of the easiest to fix.
Why it matters: contrast failures are the most-detected issue in automated accessibility scans and a frequent line item in ADA demand letters, because they're objective and easy to prove. The good news: they're usually a handful of CSS color values you can fix once in your design system.
The WCAG contrast ratios
| Content | WCAG AA (minimum) | WCAG AAA (enhanced) |
|---|---|---|
| Normal text (<18pt / <14pt bold) | 4.5:1 | 7:1 |
| Large text (≥18pt / ≥14pt bold) | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | N/A |
The contrast mistakes almost everyone makes
- Light-grey helper text (placeholder text, captions, timestamps): the classic #999-on-white fails at 2.85:1.
- Brand color CTAs: a trendy pastel or neon button with white text often fails; test the button text against the button background.
- Text over images/gradients: hero text on a photo passes in one spot and fails in another. Add a scrim or solid backing.
- Disabled states: disabled controls are exempt from contrast, but "looks disabled but isn't" is a trap.
- Focus indicators & icons: these are UI components and need 3:1 too, not just text.
Fix contrast at the source
Don't patch one element at a time. Fix the CSS variables / design tokens that feed your whole site, then re-scan to confirm nothing else broke. Contrast is part of the broader WCAG checklist; the other big automatable wins are image alt text and form labels.
Scan every page for contrast failures
AdaClear runs an automated WCAG scan across your site and lists every element that fails WCAG contrast, with the exact colors, so you can fix them in one pass, then monitors continuously so a redesign doesn't reintroduce them. Try the free scan below.
See your real accessibility issues — free
Enter your site for an instant ADA/WCAG scan: score + top issues. No overlay, no signup.