Contrast Checker
Check WCAG contrast between foreground and background colors.
Sample heading
Body text preview for contrast checking.
Ratio: 18.88:1
- Pass — AA normal (4.5:1)
- Pass — AA large (3:1)
- Pass — AAA normal (7:1)
- Pass — AAA large (4.5:1)
About this tool
Low-contrast text fails users and audits. This free contrast checker measures foreground/background ratios against common WCAG thresholds. Pick two colors, see pass/fail locally, and fix UI tokens before launch.
How to use
- Select or enter the text (foreground) color.
- Select or enter the background color.
- Review the contrast ratio and WCAG pass/fail hints.
- Adjust colors until normal and large text targets pass.
Frequently asked questions
WCAG AA generally expects at least 4.5:1 for normal text and 3:1 for large text—confirm the level your project targets.