Color contrast checker
Pick a text color and a background. See the contrast ratio, whether it passes WCAG 2.2 for text and for icons and borders, and the closest color that would pass. Free, no sign-up.
Hex, for example #1f4bff.
Hex, for example #1f4bff.
2.72:1 contrast ratio
| Use | Needs | Result |
|---|---|---|
| Normal text, level AA (WCAG 1.4.3) | 4.5:1 | Fail |
| Large text, level AA (WCAG 1.4.3) | 3:1 | Fail |
| Icons, borders and focus rings (WCAG 1.4.11) | 3:1 | Fail |
| Normal text, level AAA (WCAG 1.4.6) | 7:1 | Fail |
| Large text, level AAA (WCAG 1.4.6) | 4.5:1 | Fail |
The closest text color that passes normal text AA on this background is #6e717b.
What the numbers mean
- 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold) is level AA, WCAG 1.4.3.
- 3:1 for icons, input borders and focus indicators against what is next to them is WCAG 1.4.11.
- 7:1 and 4.5:1 are the stricter level AAA, WCAG 1.4.6.
- A ratio is not rounded up: 4.49:1 fails 4.5:1.
Text on images and gradients has no single background color, so it needs a person to check it. Check a whole page for free to find every low-contrast element at once.