🔍 Free Color Contrast Checker
Check if your text meets WCAG AA/AAA accessibility standards. Enter any two colors — get instant contrast ratio and pass/fail results. Free, no signup, no ads.
Why Use Our Free Contrast Checker?
📏 Instant Ratio
Enter foreground and background colors and get the exact WCAG contrast ratio instantly. The ratio is calculated using the official WCAG 2.1 relative luminance formula — same math browsers use.
✅ Pass/Fail Results
See at a glance whether your color pair passes WCAG AA and AAA for both normal text and large text. Green = pass, red = fail. No guessing.
👁️ Live Preview
See exactly what your text looks like against the background — sample text at multiple sizes with bold variants. What you see is what your users will see.
🎨 Color Swatches
Quick-access preset swatches for common colors. Click white, black, grays, brand blues, and error reds — no need to look up hex codes.
📊 RGB Detail
Each result shows the hex code and RGB breakdown of both colors. Useful when you need to adjust individual channels to fix a failing contrast ratio.
🆓 100% Free
No signup, no ads, no tracking, no limits. Check as many color combinations as you need. All contrast calculation happens server-side or in your browser — your colors are never stored.
How It Works
Enter foreground (text) and background hex codes, or use the color pickers and preset swatches
Click "Check Contrast" to calculate the ratio using the WCAG 2.1 formula
See your contrast ratio, WCAG pass/fail for AA and AAA on normal and large text, and a visual preview
📋 WCAG Contrast Requirements at a Glance
| Level | Normal Text | Large Text* |
|---|---|---|
| AA | ≥ 4.5:1 | ≥ 3:1 |
| AAA | ≥ 7:1 | ≥ 4.5:1 |
*Large text = 18px+ regular weight, or 14px+ bold
🎯 Quick Reference: Common Color Pairs
| #333 on white | 12.63:1 | ✅ AAA |
| #666 on white | 5.73:1 | ✅ AA |
| #999 on white | 2.85:1 | ❌ Fail |
| #c5221f on white | 4.87:1 | ✅ AA |
| white on #2563eb | 4.63:1 | ✅ AA |
🔧 When to Use a Contrast Checker
- 🎨 Picking Brand Colors — Before finalizing your palette, check every text/background combination. Catch accessibility issues before they're baked into your design system.
- 📱 UI Component Design — Check button text against button backgrounds, form labels against input fields, card text against surface colors. Every component has color pairs that need testing.
- 🌓 Dark Mode — Light text on dark backgrounds often feels higher-contrast than it is. Always verify dark mode color pairs — what works in light mode may fail in dark.
- ⚖️ Legal Compliance — Section 508 (US), EN 301 549 (EU), and ADA Title III all require WCAG 2.1 AA compliance. Our checker tells you instantly if you pass.
- 📊 Accessibility Audits — Running an audit? Use our checker alongside our Email Deliverability and Bulk Domain Checker tools to cover the full compliance spectrum.
❓ Frequently Asked Questions
What does a contrast checker do?
A contrast checker calculates the contrast ratio between two colors — typically text and its background — using the WCAG 2.1 relative luminance formula. It tells you whether your color pair passes accessibility standards at AA or AAA levels. This is essential for making web content readable for people with low vision, older adults, and anyone viewing your site in challenging conditions.
What's the difference between WCAG AA and AAA?
AA (minimum): Normal text needs ≥4.5:1 ratio, large text needs ≥3:1. This is the legal minimum in most jurisdictions. AAA (enhanced): Normal text needs ≥7:1, large text needs ≥4.5:1. This is the gold standard but may not be achievable for all content — especially with brand colors. Our tool checks both levels simultaneously.
Is this contrast checker really free?
Yes, completely free. No signup, no credit card, no limits. Check as many color pairs as you want. We also offer a free Color Picker with palette generation, and 44+ free developer tools for DNS, email, SSL, SEO, and more.
How accurate is the contrast calculation?
Our tool uses the exact WCAG 2.1 relative luminance algorithm: sRGB values are linearized using gamma correction, then relative luminance is calculated as L = 0.2126 × R + 0.7152 × G + 0.0722 × B. The ratio is (L1 + 0.05) / (L2 + 0.05). This is the same formula used by W3C's official validator — the results are identical.
🛠️ More Free Developer Tools
📊 Professional Email Health Report
Get a detailed PDF audit with step-by-step fixes for your domain's email setup. Includes MX, SPF, DKIM, DMARC scores and recommendations.
Get Fix Report — €9 →