Colour Contrast Checker
Free colour contrast checker: test if text and background colours meet WCAG 2.2 AA and AAA, see the contrast ratio and get the closest colour that passes.
This is normal text, the size of a paragraph.
Large text
Button| AA | AAA | |
|---|---|---|
| Normal text | ||
| Large text (24 px, or 18.7 px bold) | ||
| Icons and interface borders | — |
What it does
This checker measures the contrast between a text colour and its background with the formula of the WCAG 2.2 accessibility guidelines, used in many accessibility laws. It shows the contrast ratio, from 1:1 (no contrast) to 21:1 (black on white), and whether the pair passes the AA and AAA levels for normal text, large text and interface components such as icons and borders. When a pair fails, it suggests the closest colour, with the same hue, that passes.
How to use it
- Enter or pick the text colour and the background colour.
- Read the contrast ratio and the AA and AAA results, and check the live preview.
- If it fails, press Use on a suggested colour, then copy the link to share the result.
Frequently asked questions
What contrast ratio do I need?
Level AA, the usual legal target, needs 4.5:1 for normal text and 3:1 for large text and for icons and interface borders. Level AAA needs 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Text of at least 24 CSS pixels (18 points), or at least about 18.7 CSS pixels (14 points) when bold. Headings are often large; body text usually is not.
Why does #777777 on white fail?
Its ratio is 4.47:1, just under the 4.5:1 required for normal text. Ratios are not rounded up, so a slightly darker gray such as #767676 (4.54:1) is the lightest gray that passes on white.
W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)
W3C — WCAG 2.2, 1.4.11 Non-text Contrast