Color Contrast Checker
Evaluate foreground and background color combinations against WCAG 2.1 and 2.2 accessibility guidelines. Check Level AA and AAA compliance with real-time UI previews and smart one-click auto-fix adjustments.
Body copy & standard font sizes under 18pt (24px).
Headlines ≥ 18pt (24px) or bold text ≥ 14pt (18.5px).
Strict accessibility standard for highest readability.
Input borders, focus rings, buttons & active icons.
Live Preview Sandbox
Simulating live rendering on your chosen backgroundDesign For Every Human Eye
How to Check & Fix Color Contrast
Pick or Enter Colors
Input hex codes or pick colors visually with the swatch and eyedropper. Use the swap button to instantly flip foreground and background.
Review & Auto-Fix Compliance
Examine the ratio score against AA and AAA thresholds. If your color fails, click Auto-Fix to automatically darken or lighten the text to pass WCAG AA.
WCAG 2.1 & 2.2 Contrast Ratio Requirements
| Element Type | Level AA (Minimum) | Level AAA (Enhanced) | Font Size Definition |
|---|---|---|---|
| Normal Body Text | 4.5 : 1 | 7.0 : 1 | Below 18pt (24px) or bold below 14pt (18.5px) |
| Large Headlines | 3.0 : 1 | 4.5 : 1 | At least 18pt (24px) or bold 14pt (18.5px) |
| UI Components & Icons | 3.0 : 1 | N/A | Form borders, active buttons, focus indicators |
| Incidental & Disabled Elements | No Requirement | No Requirement | Inactive buttons, logos, or decorative illustrations |
How Contrast Ratios Are Calculated
The W3C calculates contrast using relative luminance (the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white). The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker color. The resulting ratio ranges from 1:1 (zero contrast) to 21:1 (pure black on pure white).
Why Accessibility (a11y) Matters
Over 2 billion people worldwide live with some form of vision impairment or situational disability (such as glare from bright outdoor sunlight, low screen brightness, or aging eyes). Designing with high-contrast color pairs ensures your content is legible, boosts SEO rankings, reduces bounce rates, and complies with legal accessibility standards like Section 508 and the European Accessibility Act (EAA).
Frequently Asked Questions
What is the difference between WCAG AA and AAA?▼
Level AA is the legally accepted standard for most websites and public organizations, requiring a 4.5:1 ratio for regular text and 3:1 for large text. Level AAA is the highest tier of accessibility, requiring a 7:1 ratio for normal text. AAA is ideal for long-form reading, government portals, and medical platforms.
Do disabled buttons have to meet contrast requirements?▼
Under WCAG 2.1 Success Criterion 1.4.3 and 1.4.11, disabled elements and purely decorative graphics are exempt from minimum contrast requirements. However, ensuring secondary text and disabled states remain distinguishable improves usability for everyone.
How does the Auto-Fix feature work?▼
Our smart contrast fixer analyzes your background luminance and fine-tunes the foreground color's lightness in small steps while preserving its original hue and saturation. This allows you to maintain brand color identity while guaranteeing a passing WCAG AA (4.5:1) score with one click.
Can I test contrast on dark mode interfaces?▼
Yes! The contrast formula works equally well in dark mode. Simply set your dark slate or black background in the Background field and your light text in the Foreground field, or click the Swap button to quickly toggle between light and dark modes.