Color Contrast Checker
Check the WCAG contrast ratio between two colors, with pass/fail results for AA and AAA at both text sizes.
How this tool works
Enter two colors
A foreground (text) color and a background color, as hex values or via the color pickers.
See the live preview
Sample heading and body text render in the actual color combination.
Read the contrast ratio
The exact ratio is calculated using the W3C relative luminance formula.
Check pass/fail at each level
AA and AAA thresholds for both normal and large text are all shown at once.
Quick facts
- Category
- Validators
- Best for
- Confirming a text/background color pair meets WCAG accessibility requirements before shipping
About this tool
Enter a foreground and background color as hex values and see the exact WCAG contrast ratio calculated between them, along with a live preview showing sample heading and body text rendered in that actual color combination - so the result isn't just a number, it's something you can visually judge for yourself. The ratio is checked against all four WCAG 2.1 thresholds at once: AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), and AAA large text (4.5:1), each shown as a clear pass or fail rather than making you compare the number manually against a table. The underlying math follows the W3C's relative luminance formula exactly, applying gamma correction to each color channel before weighting them by human perceptual sensitivity to red, green, and blue. Pairs naturally with hex-rgb-converter for translating a designer's RGB or HSL spec into the hex values this tool expects, and with color-palette-generator when picking a palette in the first place and wanting to confirm text stays readable against a chosen background. Runs entirely client-side.
Why use this tool
All four thresholds at once
AA/AAA at normal and large text sizes are checked together, not one at a time against an external table.
Real visual preview
Sample text renders in the actual color pair, so you can judge readability, not just trust a number.
Spec-accurate formula
Uses the exact W3C relative luminance calculation with gamma correction, not an approximation.
Pairs with related color tools
Natural next step after hex-rgb-converter or color-palette-generator to confirm a chosen pair is accessible.
Frequently asked questions
AA is the WCAG 2.1 minimum compliance level required by most accessibility regulations and audits, requiring a 4.5:1 ratio for normal text and 3:1 for large text (defined as 18pt+ or 14pt+ bold). AAA is a stricter, "enhanced" level - 7:1 for normal text and 4.5:1 for large text - that many sites aim for but isn't always legally required; it's worth targeting for body text especially, since it's more forgiving for users with low vision.
Larger text is inherently easier to read at lower contrast because its strokes are wider and more distinguishable from the background, so WCAG sets a lower bar (3:1 for AA, 4.5:1 for AAA) for text at 18pt or larger, or 14pt and bold. Anything smaller than that is judged against the stricter normal-text thresholds, since fine details are harder to distinguish at low contrast.
Not directly - the WCAG contrast ratio formula is based on relative luminance (brightness), which is a reasonable proxy for readability across most forms of color vision deficiency since it doesn't depend on distinguishing specific hues. However, it doesn't check for problems specific to color blindness, like two colors that have sufficient luminance contrast but rely on a hue difference (like red versus green) that a colorblind user can't perceive as a distinct signal.
Explore more free tools
Formatters, converters, validators, and generators - all free and running entirely in your browser.
Browse more tools