Color Contrast Checker
Free color contrast checker: test if text and background colors meet WCAG 2.2 AA and AAA, see the contrast ratio and get the closest color 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 color 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 color, with the same hue, that passes.
How to use it
- Enter or pick the text color and the background color.
- Read the contrast ratio and the AA and AAA results, and check the live preview.
- If it fails, press Use on a suggested color, 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