Contrast Checker
Last updated: 2026-06-25
The Contrast Checker computes the luminance contrast ratio between foreground (text) and background colors and tells you whether it passes WCAG 2.1 AA (body 4.5:1) and AAA (7:1).
Contrast ratio = (lighter luminance + 0.05) / (darker luminance + 0.05), ranging from 1:1 to 21:1.
Enter foreground & background colors
Contrast Ratio
0:1
Large text preview (Aa Bb 123)
Body text preview. Check whether text of this size reads well over the background.
| Criterion | Required ratio | Result |
|---|---|---|
| Body text AA | 4.5:1 | |
| Body text AAA | 7:1 | |
| Large text AA | 3:1 | |
| Large text AAA | 4.5:1 | |
| UI components & shapes (non-text) | 3:1 |
The large-text threshold applies to text 18pt (about 24px) or larger, or 14pt (about 18.66px) bold.
How to use
- Enter the foreground color — Enter the text (foreground) color with the color picker or HEX.
- Enter the background color — Enter the background color the text sits on with the color picker or HEX.
- Read the result — Check the contrast ratio (e.g. 4.5:1) and WCAG AA/AAA pass status for body and large text.
WCAG contrast thresholds and how they are calculated
The accessibility guidelines WCAG 2.1 evaluate readability using the luminance contrast ratio between text and background. The ratio is computed from each color's relative luminance using the formula (lighter + 0.05) / (darker + 0.05), with black and white reaching the maximum of 21:1.
| Target | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal body text | 4.5:1 | 7:1 |
| Large text (18pt+ / 14pt bold) | 3:1 | 4.5:1 |
| UI components & graphical objects | 3:1 | — |
Most services treat AA (body 4.5:1) as the minimum target. For government services or audiences with many older or low-vision users, AAA (7:1) is recommended. Even when contrast passes, avoid conveying information by color alone — pair icons and text — and use the colorblind simulator to check distinguishability under color vision deficiency. For more detail, see the Web Color Contrast & Accessibility guide.
Frequently Asked Questions (FAQ)
What are the WCAG color contrast thresholds?
Under WCAG 2.1, normal body text needs at least AA 4.5:1 and AAA 7:1. Large text — 18pt (about 24px) or larger, or 14pt bold — is relaxed to AA 3:1 and AAA 4.5:1.
How is the contrast ratio calculated?
Each color's relative luminance is computed, then the ratio is (lighter luminance + 0.05) / (darker luminance + 0.05). Results range from 1:1 (identical colors) to 21:1 (black and white).
Should I follow AA or AAA?
The practical and legal minimum is usually AA (4.5:1 for body text). For services where accessibility is especially important — government, healthcare, older audiences — aiming for AAA (7:1) lets more users read comfortably.
Is contrast alone enough for accessibility?
Contrast is central to readability but not the whole story. You also need to avoid conveying information by color alone (pair icons and text) and consider colorblind users. Use the colorblind simulator to check distinguishability under color vision deficiency too.
Related tools & guides
Last updated: 2026-06-25