Color contrast checker
See whether your text and background pass accessibility standards before you ship. Enter two colors and get the exact WCAG ratio with a plain pass or fail for AA and AAA, at both normal and large sizes.
How to check contrast
Enter two colors
Set the text color and the background — type a hex code or pick with the swatch. The preview updates as you go so you can see the pairing in context.
Read the ratio
The big number is the WCAG contrast ratio, from 1:1 (identical) up to 21:1 (black on white). Higher means easier to read.
Check the badges
Green means the pair passes; red means it fails. Each level is shown for normal and large text so you know exactly where you stand.
What the WCAG levels mean
The Web Content Accessibility Guidelines set minimum contrast ratios so people with low vision or color deficiencies can read your content. The ratio compares the relative luminance of your two colors, and the thresholds depend on the text size and the conformance level you are targeting.
The thresholds
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 |
Large text means at least 24px, or 18.66px if bold. Because larger letters are easier to read, they are allowed a lower ratio. AA is the level most laws and standards require; AAA is the stricter target for critical content.
How the ratio is calculated
Each color is converted to a relative luminance value using the sRGB formula, which weights green most heavily because the eye is most sensitive to it. The ratio is then (lighter + 0.05) / (darker + 0.05). Pure black against pure white gives the maximum of 21:1.
Contrast is not the whole story
Meeting a ratio is necessary but not sufficient. Avoid relying on color alone to convey meaning, keep body text a comfortable size, and test with real content — a passing ratio on a tiny gray timestamp can still be hard to use.
Questions people ask
What contrast ratio do I need?
For normal body text, aim for at least 4.5:1 to meet WCAG AA. Large or bold text can pass at 3:1. For the stricter AAA level, use 7:1 for normal text and 4.5:1 for large.
What counts as large text?
Text that is 24px or larger, or 18.66px (14pt) and bold. Large text is given a lower threshold because size itself improves readability.
How is the ratio worked out?
Both colors are turned into relative luminance values, then compared with the formula (lighter + 0.05) divided by (darker + 0.05). The result ranges from 1:1 to 21:1.
Does this handle transparency?
The checker compares two solid colors. If your text or background is semi-transparent, first work out the effective color once it is composited over what sits behind it, then test that.
Which pairs make a good starting point?
Dark text on a light background almost always scores well. When you want colored text, deepen it or lighten the background until the ratio clears 4.5:1.
Is my data private?
Yes. All calculations run in your browser with no network calls, so your colors are never uploaded and the tool works offline.