Color contrast checker
Enter a text color and a background color. The checker gives the contrast ratio and checks it against three WCAG criteria: 1.4.3 Contrast (Minimum), 1.4.11 Non-text Contrast and 1.4.6 Contrast (Enhanced). When a pair falls short, it suggests the nearest color that meets the target. It runs in the browser. Nothing is sent or stored.
Hex, rgb() or hsl(). Alpha is allowed.
Hex, rgb() or hsl(), opaque.
Contrast ratio
Enter two colors.
1.4.3 Normal text · AA · 4.5:1
Body text and labels under 24px, or under 18.5px when bold.
1.4.3 Large text · AA · 3:1
Text at least 24px, or at least 18.5px and bold.
1.4.11 Controls and graphics · AA · 3:1
Borders of inputs and buttons, focus indicators, icons and chart parts people need to see.
1.4.6 Normal text · AAA · 7:1
The stricter AAA targets. Level AA doesn’t require them.
1.4.6 Large text · AAA · 4.5:1
The stricter AAA targets. Level AA doesn’t require them.
What the three criteria ask
| Criterion | Level | Target | What it covers |
|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | 4.5:1, or 3:1 for large text | Text and images of text. Text in a logo, text in an inactive control and pure decoration have no requirement. |
| 1.4.11 Non-text Contrast | AA | 3:1 against adjacent colors | What people need to see to identify a control and its state, and the parts of graphics needed to understand them. |
| 1.4.6 Contrast (Enhanced) | AAA | 7:1, or 4.5:1 for large text | The same text as 1.4.3, at a stricter target. |
Large text means at least 18 point, or 14 point bold. In CSS that is about 24px, or 18.5px bold.
How contrast is computed
WCAG compares the relative luminance of two colors: how bright each one is, from 0 for black to 1 for white.
- Divide each sRGB channel by 255, giving R, G and B between 0 and 1.
- Linearize each channel: if the value is 0.04045 or less, divide it by 12.92. Otherwise, compute ((value + 0.055) / 1.055) ^ 2.4.
- Relative luminance: L = 0.2126 × R + 0.7152 × G + 0.0722 × B.
- Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color’s luminance and L2 the darker one’s.
The ratio runs from 1:1 (two identical colors) to 21:1 (black on white). Earlier WCAG text gives 0.03928 in step 2. The W3C notes the difference doesn’t matter for 8-bit colors.
Sources: W3C, WCAG 2.2; W3C, Understanding 1.4.3 Contrast (Minimum); W3C WCAG Working Group, Relative luminance.
What this checker can’t judge
It checks one pair of flat colors. Text over a photo, a gradient or layered transparency has a different background behind each letter, so no single pair describes it. A Variantly review measures that text on the captured screen: it hides the letters, reads the pixels behind them and marks the text when no pixel there gives the target ratio. What it can’t settle goes to a person with the screenshot open. How Variantly checks a product.
Questions people ask
What contrast ratio does WCAG AA need?
4.5:1 for normal text, 3:1 for large text (1.4.3), and 3:1 for controls and meaningful graphics (1.4.11).
Does 4.48:1 count as 4.5:1?
No. Ratios aren’t rounded, so anything below 4.5:1 falls short.
Do placeholder text and disabled buttons need contrast?
Placeholder text is text, so 1.4.3 applies. Text in an inactive control has no requirement.
Does a logo need contrast?
No. Text that is part of a logo or brand name has no contrast requirement.