Color Contrast Checker
Check WCAG 2.1 contrast ratios for accessibility compliance. Test any color combination instantly.
WCAG 2.1 Results
AA — Normal Text
4.5:1 required
PassAA — Large Text
3:1 required
PassAAA — Normal Text
7:1 required
PassAAA — Large Text
4.5:1 required
Pass14.63:1
Excellent
Normal text (16px) — This is how regular body text looks with your chosen colors.
Large text (20px bold) — Headings and large UI elements.
Small text (12px) — Fine print, captions, and labels.
Excellent
Track your full site quality over time
AI visibility monitoring checks 25+ quality signals weekly — accessibility, security headers, structured data, and more.
Why this matters
Legal requirement
ADA and EAA require websites to meet WCAG accessibility standards. Color contrast is one of the most common violations — and one of the easiest to fix.
Better user experience
High contrast text is easier to read for everyone, especially on mobile. Better readability means lower bounce rates and more engagement.
Affects site quality signals
Google evaluates accessibility as part of page quality. Poor contrast can lower your Lighthouse accessibility score, indirectly affecting search rankings.
How it works
Enter or pick a foreground (text) color and background color
See the contrast ratio and WCAG AA/AAA pass/fail status instantly
Adjust colors until you meet the required accessibility level
Frequently Asked Questions
What is a color contrast ratio?
The contrast ratio measures the difference in luminance between two colors, expressed as a ratio like 4.5:1. Higher ratios mean more contrast. WCAG guidelines define minimum ratios for text readability — 4.5:1 for normal text (AA) and 7:1 for enhanced contrast (AAA).
What WCAG contrast ratios do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. AA is the legal minimum; AAA is the gold standard.
Does accessibility affect AI visibility?
Yes. Google considers accessibility as part of page quality. Poor accessibility can lower your Core Web Vitals and user experience scores, which indirectly affect how Google and AI assistants evaluate your site quality.
How do I fix low contrast?
Either darken the text color or lighten the background (or vice versa). Our tool shows the exact ratio and WCAG pass/fail status so you can adjust colors until you meet the required contrast level.
What about color contrast for buttons and icons?
Non-text elements like buttons, icons, and form inputs need at least 3:1 contrast against adjacent colors (WCAG 2.1 Level AA). This applies to both the element itself and its boundary or border.
Is color contrast a legal requirement?
In many jurisdictions, yes. The ADA (US), EAA (EU), and other laws require websites to meet accessibility standards. WCAG 2.1 AA is the most commonly referenced standard. Failing accessibility can result in lawsuits.
Related Free Tools
Want the complete picture?
Run a full AI visibility audit — 25+ signals, fix roadmap, and AI-generated files.