Free tool · WCAG 2.2 · ADA
Color contrast checker
Pick a text color and a background color. We tell you whether it is readable under WCAG, and if not, which nearby color passes.
A nearby color that passes
Same hue, only lighter or darker, to reach 4.5:1 (normal text, level AA).
This is what 16 pixel body text looks like on your background.
Large text
- Normal text AA WCAG 1.4.3 · 4.5:1
- Normal text AAA WCAG 1.4.6 · 7:1
- Large text AA WCAG 1.4.3 · 3:1
- Large text AAA WCAG 1.4.6 · 4.5:1
- Buttons, icons and borders AA WCAG 1.4.11 · 3:1
What WCAG requires
- Normal text: 4.5:1 (AA)
- Success criterion 1.4.3 requires at least 4.5:1 between text and its background. Level AAA (1.4.6) raises it to 7:1. Level AA is what the ADA settlements and the European Accessibility Act point to.
- Large text: 3:1 (AA)
- Large means 24 px or more, or 18.66 px or more in bold (18 pt and 14 pt). Because it is easier to read, 3:1 is enough.
- Buttons, icons and borders: 3:1
- Success criterion 1.4.11 requires 3:1 for the parts of the interface people need to see to use it: a field border, an icon, the state of a toggle.
- How it is calculated
- The relative luminance of the two colors is compared: (L1 + 0.05) / (L2 + 0.05). It ranges from 1:1 (the same color) to 21:1 (black on white).
FAQ
Questions about contrast
What people ask us before they try it. Short answers, no small print.
Question not here?
Write to us and we reply within one working day.
What is the minimum contrast ratio for WCAG AA?
4.5:1 for normal text, and 3:1 for large text and for user interface components. Level AAA requires 7:1 and 4.5:1. Level AA is the one used for ADA compliance and in the European Accessibility Act.
What counts as large text?
18 points (about 24 pixels) or larger at normal weight, or 14 points (about 18.66 pixels) or larger in bold.
Does color contrast apply to logos?
No. Logos and text that is part of a brand name are exempt, as are purely decorative text and the text of disabled controls.
What about text on top of an image?
Measure against the lightest (or darkest) part of the image behind the text. If it varies a lot, the safe fix is a solid or semi-opaque color layer behind the text.
Is anything I test stored?
No. The calculation runs in your browser. The colors are only kept in the page address, so you can share it.
One color pair is not your whole site
The free test opens your page in a real browser and checks the contrast of every piece of text, plus images, buttons, forms and the keyboard.