How to use the Color Contrast Checker (WCAG)
- Pick text and background colours.
- Read the ratio and pass/fail grid.
- Adjust until AA passes at minimum.
About this tool
About one in twelve men has some form of colour-vision deficiency, and low-contrast text is hard for everyone to read on a phone in sunlight. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios, and many organisations are legally required to meet AA.
| Level | Normal text | Large text (18pt / 14pt bold) |
|---|---|---|
| AA | 4.5 : 1 | 3 : 1 |
| AAA | 7 : 1 | 4.5 : 1 |
The ratio is computed from relative luminance exactly as specified in WCAG 2.x.
Frequently asked questions
Does contrast apply to icons?
Yes — WCAG 1.4.11 requires 3:1 for meaningful graphics and UI components.
Is 4.5:1 enough?
It's the legal baseline in many places; aim higher for body text.