Color & CSS
Color Contrast Checker
Large text, 24 px bold
Normal text at 16 px. The quick brown fox jumps over the lazy dog.
Small print at 12 px for comparison.
- AA, normal textneeds 4.5:1Pass
- AA, large textneeds 3:1Pass
- AAA, normal textneeds 7:1Pass
- AAA, large textneeds 4.5:1Pass
- Interface parts and graphicsneeds 3:1Pass
See whether your text is readable on its background. The ratio is checked against every WCAG level, and if it falls short you get the nearest color that passes.
How to use this tool
Enter the Text color and the Background color in any CSS format, or use the pickers. Swap colors exchanges the two.
The preview shows the text on its background, with the contrast ratio and the WCAG 2.x AA and AAA results for normal text, large text and interface parts.
If a level fails, the tool suggests the nearest color that passes. Adjust either color until the level you need passes, then Copy result for your notes.
How to use this tool
Enter the Text color and the Background color in any CSS format, or use the pickers. Swap colors exchanges the two.
The preview shows the text on its background, with the contrast ratio and the WCAG 2.x AA and AAA results for normal text, large text and interface parts.
If a level fails, the tool suggests the nearest color that passes. Adjust either color until the level you need passes, then Copy result for your notes.
Was this tool helpful?
Suggest an improvementHelp keep ConduitTools free
Every tool here is free, private and built by a solo developer. If this one saved you time, a small tip keeps the site running and new tools coming.
Check a color pair against WCAG and get the nearest one that passes.
Low contrast is one of the most common accessibility failures. WCAG sets minimum ratios so text stays readable for people with low vision or in bright light.
- Every WCAG level
- AA and AAA for normal and large text, plus the 3:1 minimum for interface parts and graphics, each with a clear pass or fail.
- See it, do not just measure it
- A live preview shows large, normal, and small text on your colors, so you can judge legibility as well as the number.
- A fix, not just a verdict
- If the ratio is too low, the tool finds the nearest text color that passes, keeping your hue and adjusting only the lightness.
Frequently asked questions
What contrast ratio do I need?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text (18 pt, or 14 pt bold) and interface components. AAA needs 7:1 for normal text and 4.5:1 for large text.
How is the ratio calculated?
It compares the relative luminance of the two colors, a measure of how bright each appears, using the formula in WCAG 2.x: (lighter + 0.05) divided by (darker + 0.05).
Why does a pair pass AA but fail AAA?
AAA is a stricter, optional target. Most sites aim for AA everywhere and use AAA where they can, such as long-form reading text.
Does it handle transparent colors?
Yes. A translucent text color is blended over the background, and a translucent background is blended over white, so the ratio reflects what people actually see.