Contrast Checker: WCAG Compliance for Accessible Text
Light gray text on a white background may look elegant, but it fails accessibility — and Google penalizes inaccessible designs in mobile rankings. This tool measures the contrast ratio between two colors against WCAG standards.
WCAG (Web Content Accessibility Guidelines) sets contrast standards: AA requires 4.5:1 for normal text, 3:1 for large text. AAA (stricter) requires 7:1 normal, 4.5:1 large. The ratio is calculated from the relative luminance of the two colors.
WCAG contrast requirements
| Level | Normal text | Large text (18pt+ or 14pt bold) |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
| UI components / icons (AA) | — | 3:1 |
Common contrast failures
- •Light gray (#999) on white — only 2.85:1, fails AA
- •Light blue (#88AADD) on white — fails AA
- •Dark gray (#666) on black — fails AA
- •Yellow on white — almost always fails
- •Brand color buttons with the brand color as text — frequently fails
Extended FAQ
Does Google rank for contrast?
Indirectly — Lighthouse's accessibility score affects mobile rankings, and contrast is a major component. Sites that fail WCAG AA tend to score worse.
Are my colors stored?
No — runs entirely in your browser.