Color contrast checker
Enter a text color and a background color to see their contrast ratio and whether they meet WCAG 2.2.
Contrast ratio: 7.68:1
| Use | Result |
|---|---|
| AA, normal text (4.5:1) | Pass |
| AA, large text (3:1) | Pass |
| AAA, normal text (7:1) | Pass |
| AAA, large text (4.5:1) | Pass |
| Icons, borders and controls, 1.4.11 (3:1) | Pass |
What the numbers mean
WCAG 1.4.3 asks for at least 4.5:1 between text and its background, or 3:1 for large text: 24 px, or about 18.7 px when bold. 1.4.11 asks for 3:1 for icons, input borders and focus indicators. The AAA level (1.4.6) asks for 7:1 and 4.5:1.
What this checker can’t see
It compares two flat colors. Text over images or gradients, transparency and text shadows need a check of the real page. The free checker measures contrast in a browser, as people see it.
Questions
- Why does 4.49:1 fail?
- WCAG sets a minimum and doesn’t round. We show two decimals but judge the exact ratio, so a pair just under 4.5:1 fails.
- Is large text measured in px or pt?
- WCAG defines large text as 18 point or 14 point bold. On the web that is 24 px, or about 18.7 px bold, in CSS pixels.
Check a whole page
These tools check one thing. The free checker tests a live page against all automated WCAG 2.2 A and AA rules in a real browser, with screenshots and fixes.