Color contrast is one of the most overlooked aspects of web accessibility — and one of the easiest to fix. Whether you're a designer choosing brand colors or a developer building a UI component, this free tool tells you instantly if your color combination meets WCAG 2.1 standards.
🔍 Check Your Colors Now
Enter any two hex colors and get instant contrast ratio + pass/fail results for AA and AAA.
Open Contrast Checker →What Is Color Contrast and Why Does It Matter?
Color contrast is the difference in luminance between text and its background. Low contrast makes text hard to read — especially for people with visual impairments, color blindness, or anyone viewing your site in bright sunlight.
WCAG (Web Content Accessibility Guidelines) 2.1 defines minimum contrast thresholds:
| Level | Normal Text | Large Text | Requirement |
|---|---|---|---|
| AA | ≥ 4.5:1 | ≥ 3:1 | Minimum for accessibility compliance |
| AAA | ≥ 7:1 | ≥ 4.5:1 | Enhanced accessibility |
Large text = 18px+ regular weight or 14px+ bold.
How the Contrast Checker Works
Our tool uses the official WCAG 2.1 relative luminance formula:
- Extract RGB values from your hex colors (e.g., #2563eb → R:37, G:99, B:235)
- Linearize each channel using the sRGB gamma correction: if R/255 ≤ 0.04045, use R/12.92; otherwise ((R/255 + 0.055) / 1.055)^2.4
- Calculate luminance: L = 0.2126 × R + 0.7152 × G + 0.0722 × B
- Compute ratio: (Lighter + 0.05) / (Darker + 0.05)
- Check against thresholds for AA and AAA at both normal and large text sizes
Common Color Contrast Mistakes
❌ Light Gray on White
❌ Dark Gray on Black
❌ Blue Links on Dark
✅ Dark on Light
Quick Fixes for Low Contrast
- Darken text or lighten background — the simplest fix. Move both colors further apart on the luminance scale.
- Swap foreground/background — for dark mode designs, light-on-dark usually has better contrast than dark-on-dark.
- Use our contrast checker iteratively — tweak one color, check again. The tool updates instantly.
- Avoid pure red text — #FF0000 on white is only 4.0:1 (fails AA normal, passes AA large). Use a darker red like #c5221f.
- Don't rely on hue alone — red/green colorblindness affects ~8% of males. Contrast ratio is what ensures readability for everyone.
FAQ
Is this contrast checker really free?
Yes. No limits, no ads, no signup, no credit card. Check as many color combinations as you want. Part of the MailCheck free developer tools suite.
Which WCAG version does this follow?
WCAG 2.1, which extends 2.0 with additional mobile and low-vision criteria. The contrast ratio formula is identical across 2.0 and 2.1. WCAG 2.2 (Oct 2023) also uses the same contrast thresholds.
What counts as "large text"?
Large text = at least 18 point (24px) regular weight, or at least 14 point (18.67px) bold. These sizes use lower contrast thresholds because larger text is inherently more readable.
Can I check colors from an image?
Use any color picker browser extension or screenshot tool to grab hex values, then paste them into our checker. We plan to add an image upload feature in the future.
Do gradients count?
For text over gradients, check the worst-case point — where contrast is lowest. Our tool checks flat colors only. For gradients, test the lightest background point against your text color.