Instantly test contrast ratios for WCAG AA & AAA compliance. Real-time results, live text preview, and accessible color suggestions — all free.
Pick your foreground/text color using the color picker, or type your HEX code directly (e.g., #333333).
Select your background color or enter its HEX code. Use the lightness slider to fine-tune either color.
The contrast ratio updates instantly. View the live text preview to see exactly how your colors look together.
If colors fail WCAG, apply our suggested accessible alternatives. Copy results to share with your team.
The WCAG contrast checker standards define specific contrast ratios for different text sizes and use cases. This reference table helps you understand which requirements apply to your design. The color contrast checker automatically tests all four criteria simultaneously.
| Element Type | WCAG Level | Min Ratio | Legal Standard | Who Requires This |
|---|---|---|---|---|
| Normal Text (<18pt / <14pt bold) | AA | 4.5:1 | Required | ADA, Section 508, EU Act |
| Large Text (18pt+ or 14pt+ bold) | AA | 3:1 | Required | ADA, Section 508, EU Act |
| Normal Text (<18pt / <14pt bold) | AAA | 7:1 | Enhanced | Maximum Accessibility |
| Large Text (18pt+ or 14pt+ bold) | AAA | 4.5:1 | Enhanced | Maximum Accessibility |
| UI Components (buttons, inputs, icons) | AA | 3:1 | Required | WCAG 2.1 SC 1.4.11 |
| Focus Indicators | AA | 3:1 | Required | WCAG 2.2 SC 2.4.11 |
| Decorative text (no meaning) | — | No req. | Exempt | No legal requirement |
| Logo / Brand text | — | No req. | Exempt | No legal requirement |
The color contrast checker updates instantly as you pick colors. No submit button needed — see pass/fail status in milliseconds.
Tests all four WCAG criteria simultaneously: AA Normal, AA Large, AAA Normal, and AAA Large text contrast requirements.
See exactly how your text appears on the background in real-time. Visualize both normal and large text before committing to a color combination.
When a color combination fails WCAG, the tool automatically suggests accessible alternative colors that pass the contrast ratio checker standard.
Preview how your color combination appears to users with deuteranopia, protanopia, and tritanopia — the most common types of color vision deficiency.
Instantly swap foreground and background colors or use the lightness slider to adjust brightness without changing the hue, for fine-tuned WCAG compliance.
Copy your color combination and contrast ratio result in one click to share with teammates, add to design specs, or include in accessibility audit reports.
The color accessibility checker works perfectly on all mobile devices, tablets, and desktops. No app download or installation required.
All contrast ratio calculations happen locally in your browser. We never store your colors. Completely free with no signup, no limits, no hidden costs.
Verify color accessibility of typography, buttons, cards, and backgrounds in Figma, Adobe XD, or Sketch before handing off to developers. Use the color contrast checker to ensure WCAG AA compliance across all design components.
Test CSS color combinations for accessibility compliance before deploying. Quickly check CSS hex values from stylesheets without switching tools. Essential for passing Google Lighthouse accessibility audits.
Quickly verify contrast ratios during WCAG 2.1 accessibility audits and reports. The contrast ratio checker provides exact numbers needed for compliance documentation and remediation recommendations.
Ensure email templates have sufficient color contrast for all subscribers, including those with visual impairments. Test CTA button colors, body text, and header text against various background colors.
Check iOS and Android app color schemes against WCAG accessibility guidelines. Verify that app interfaces meet accessibility requirements for both light and dark mode color palettes.
Integrate color contrast checking into your design system validation process. Use this free WCAG contrast checker to audit entire design tokens and ensure consistent accessibility across your product.
This reference table shows common color pairs tested with our WCAG contrast checker. Bookmark this page to quickly verify whether popular design color combinations meet the color accessibility checker standard before using them in your projects.
| Text Color | Background | Contrast Ratio | AA Normal | AAA Normal | Use Case |
|---|---|---|---|---|---|
| #000000 (Black) | #FFFFFF (White) | 21.00:1 | PASS ✅ | PASS ✅ | Body text, headings |
| #1e3a8a (Dark Blue) | #FFFFFF (White) | 12.63:1 | PASS ✅ | PASS ✅ | Headers, links |
| #3b82f6 (Blue) | #FFFFFF (White) | 3.94:1 | FAIL ❌ | FAIL ❌ | Use larger text only |
| #FFFFFF (White) | #1e3a8a (Dark Blue) | 12.63:1 | PASS ✅ | PASS ✅ | Button text, headers |
| #666666 (Gray) | #FFFFFF (White) | 5.74:1 | PASS ✅ | FAIL ❌ | Body text, captions |
| #999999 (Light Gray) | #FFFFFF (White) | 2.85:1 | FAIL ❌ | FAIL ❌ | Avoid for body text |
| #f59e0b (Gold) | #1e3a8a (Dark Blue) | 6.52:1 | PASS ✅ | FAIL ❌ | CTA buttons, badges |
| #FFFF00 (Yellow) | #FFFFFF (White) | 1.07:1 | FAIL ❌ | FAIL ❌ | Never use — invisible |
Bookmark this free WCAG contrast checker to always have it handy during your design and development workflow. Share it with your team to ensure consistent accessibility across all your projects.
🎨 Check Another Color Pair