WCAG Color Contrast Checker
Ensure your color combinations meet WCAG 2.1 accessibility standards. Check contrast ratios instantly and create inclusive designs that everyone can use.
Loading Color Contrast Checker...
Why Color Contrast Matters
Accessible design isn't optional—it's essential
People Have Visual Impairments
Over 2.2 billion people worldwide have vision impairment or blindness. Poor color contrast makes content inaccessible to millions of potential users.
Market Opportunity
People with disabilities represent a $6.9 billion market. Accessible design isn't just ethical—it's good business.
Compliance Required
ADA, Section 508, and international laws require digital accessibility. Non-compliance can result in lawsuits and damaged reputation.
Understanding WCAG Standards
What do AA and AAA actually mean?
WCAG Level AA
The Industry Standard
Level AA is the legal requirement for most organizations and covers the majority of accessibility needs. It balances design flexibility with accessibility.
WCAG Level AAA
Enhanced Accessibility
Level AAA provides enhanced contrast for users with more significant vision loss. While not always required, it's recommended for critical content.
How Color Contrast Works
The science behind accessible color combinations
1. Relative Luminance
First, we calculate the relative luminance of each color—a measure of how much light a color emits. This uses the RGB values with gamma correction to match human perception.
L = 0.2126 × R + 0.7152 × G + 0.0722 × B2. Contrast Ratio Calculation
The contrast ratio is calculated by comparing the relative luminance of the lighter color to the darker color. The result is a number between 1:1 and 21:1.
(L1 + 0.05) / (L2 + 0.05)3. WCAG Compliance Check
Finally, we compare the ratio against WCAG thresholds. The higher the ratio, the better the contrast. Pure black on white gives the maximum ratio of 21:1.
Best Practices for Accessible Color Contrast
Tips from accessibility experts
Test Early and Often
Check contrast ratios during the design phase, not after development. It's easier to adjust colors early than to refactor later.
Don't Rely on Color Alone
Use icons, patterns, or text labels in addition to color to convey information. This helps colorblind users and improves overall usability.
Mind Your States
Check contrast for hover, focus, active, and disabled states. Interactive elements must maintain sufficient contrast in all states.
Test with Real Content
Use actual text sizes and weights from your design. Lorem ipsum at 16pt might pass, but your 12pt UI text might fail.
Build a Compliant Palette
Create a color system with pre-tested combinations. Document which colors work together to ensure consistency across your product.
Consider Context
Low-contrast text might work for decorative elements, but critical information should always exceed minimum requirements.
Common Contrast Mistakes to Avoid
Learn from others' accessibility failures
Gray Text on Gray Backgrounds
The minimalist trend of subtle grays often fails contrast requirements. #666 on #F5F5F5 only gives 3.4:1—not enough for normal text.
Colored Text on Photos
Text overlays on images are notoriously difficult. Use overlays, shadows, or guaranteed dark/light areas to ensure contrast.
Thin Fonts at Small Sizes
Light or thin font weights reduce effective contrast. If using weights below 400, increase your contrast ratio or text size.
Disabled State Invisibility
Disabled buttons still need to be visible. While they can have lower contrast, they should still be distinguishable and readable.
Need Help With Accessible Design?
Our team specializes in creating beautiful, WCAG-compliant design systems. Let us audit your product and ensure full accessibility compliance.
Get an Accessibility Audit