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.