How it works
Enter a text color and a background color to get their contrast ratio, a live preview and a pass or fail for each WCAG level. If the pair fails, the checker suggests the closest text color with the same hue that reaches 4.5:1, and one tap applies it.
Contrast ratio = (lighter luminance + 0.05) ÷ (darker luminance + 0.05)
WCAG requirements
- Normal text: at least 4.5:1 for AA and 7:1 for AAA.
- Large text (24 px, or 18.66 px bold): at least 3:1 for AA and 4.5:1 for AAA.
- Buttons, icons and form borders: at least 3:1 against their surroundings.
Tips
- Gray text on white often fails — check placeholders and captions too.
- Good contrast helps everyone, including people reading outdoors on phones.
- Use the swap button to check light text on a dark background.
Standards and sources
- Contrast formula and thresholds follow WCAG 2.2 success criteria 1.4.3, 1.4.6 and 1.4.11 (W3C)
Last reviewed October 7, 2026
Frequently asked questions
What contrast ratio do I need?
Normal text needs 4.5:1 for WCAG AA and 7:1 for AAA. Large text needs 3:1 for AA and 4.5:1 for AAA.
What counts as large text?
Text of at least 24 px, or at least 18.66 px when bold.
What do I do if my colors fail?
Use the suggested color. It keeps your hue and saturation and only changes lightness until the pair reaches 4.5:1.
Does contrast matter for buttons and icons?
Yes. WCAG asks for at least 3:1 between interface parts such as buttons, icons and input borders and what surrounds them.
Does transparency affect the result?
The checker uses solid colors. For semi-transparent text, check the color you actually see on top of the background.