Color Contrast Checker
Check text/background contrast against WCAG AA and AAA standards with live preview.
Loading tool…
About this tool
Low-contrast text is one of the most common accessibility failures on the web. This checker computes the WCAG contrast ratio between your foreground and background colors and shows pass/fail badges for AA and AAA at both normal and large text sizes.
The live preview renders sample text in your actual colors, so you can judge readability with your eyes as well as the numbers.
How to use
- Set the text (foreground) color.
- Set the background color.
- Read the ratio and the AA/AAA badges.
Frequently asked questions
4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA requires 7:1 for normal text and 4.5:1 for large text.
Per WCAG, at least 18pt (24px) regular or 14pt (18.66px) bold. Large text gets the lower 3:1 AA threshold.
It covers the color-contrast criterion, which is a big one — but full accessibility also needs semantic HTML, keyboard support, and more.
Related tools
Color Palette Generator
Enter a base color to generate complementary, analogous, triadic, and more palettes.