Color Contrast Checker
Enter two colors to check WCAG AA and AAA contrast ratios · Instant accessibility results
Sample Heading Text
This is how your body text looks on this background color.
| Level | Text Size | Required | Result |
|---|---|---|---|
| AA | Normal Text | 4.5:1 | ✓ Pass |
| AA | Large Text (18px+) | 3:1 | ✓ Pass |
| AAA | Normal Text | 7:1 | ✓ Pass |
| AAA | Large Text (18px+) | 4.5:1 | ✓ Pass |
Ratio
18.88:1
Excellent — AAA compliant
#111111
#ffffff
AA Normal — 4.5:1 minimum for body text
AA Large — 3:1 for 18px+ or bold 14px+
AAA Normal — 7:1 enhanced compliance
AAA Large — 4.5:1 enhanced large text
What is WCAG Color Contrast?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors to ensure content is readable for people with visual impairments. Following these guidelines is required for legal accessibility compliance in many countries.
Frequently Asked Questions
What is a good contrast ratio for websites?
For WCAG AA compliance — the standard required by most accessibility laws — normal text needs a ratio of at least 4.5:1 and large text needs 3:1. AAA compliance requires 7:1 for normal text.
What counts as large text in WCAG?
Large text is 18pt (24px) or larger for regular weight, or 14pt (18.67px) or larger for bold text.
What is the difference between WCAG AA and AAA?
AA is the standard compliance level required by most accessibility laws like ADA and EN 301 549. AAA is the enhanced level with stricter requirements, recommended for critical content like government or healthcare websites.
Is this contrast checker free?
Yes, completely free. No signup required. Enter your colors and get instant WCAG AA and AAA results. All calculations happen in your browser.
How do I fix a failing contrast ratio?
Darken your text color or lighten your background (or vice versa) until the ratio meets the required minimum. Even small adjustments to lightness can make a big difference to the contrast ratio.