Free Contrast Ratio Recommender
Check color contrast ratios against WCAG AA and AAA guidelines. Enter foreground and background colors and get instant compliance results.
Sample Heading Text
This is normal body text at 16px.
This is smaller text at 14px.
This is tiny text at 12px.
How to Use Contrast Ratio Recommender?
Pick Colors
Set your text and background colors using the color pickers.
Check Contrast
Click Check Contrast to see your ratio and WCAG pass/fail results.
Review & Adjust
Follow the suggestions to improve contrast if needed.
Check Color Contrast Against WCAG AA and AAA Standards
Contrast Ratio Recommender calculates the contrast ratio between your text and background colors and checks compliance against WCAG 2.1 guidelines — AA Normal (4.5:1), AA Large (3:1), AAA Normal (7:1), and AAA Large (4.5:1). See live preview and get actionable suggestions.
Instant WCAG Compliance with Live Preview
Pick your colors and the tool checks them against four WCAG levels — AA Normal, AA Large, AAA Normal, and AAA Large. See PASS or FAIL instantly with specific suggestions to improve contrast.
The live preview shows your colors with sample text at different sizes. Use Swap Colors to quickly test inverted combinations and find accessible pairings that match your brand.
