Color Contrast Checker
Check WCAG 2.1 AA/AAA compliance for any color combination. Live text preview and accessibility grade report.
🎨 Color Selection
Foreground (Text)
Background
👁️ Live Preview
Heading Text Sample
This is body text at normal size. It should be easy to read against the background color.
Smaller text is harder to read with low contrast. WCAG requires a minimum 4.5:1 ratio for normal text.
Display
Heading
Body
Contrast Ratio
4.86:1
AA
📋 WCAG Compliance
Results
Foreground: #FFFFFF
Background: #6c5ce7
Contrast Ratio: 4.86:1
WCAG Grade: AA
✅ AA Normal Text (4.5:1) — PASS
✅ AA Large Text (3:1) — PASS
❌ AAA Normal Text (7:1) — FAIL
✅ AAA Large Text (4.5:1) — PASS
✅ WCAG 2.1 UI Components (3:1) — PASSNeed an accessible, ADA-compliant website?
Get a Free ConsultationFrequently Asked Questions
What is WCAG and why does color contrast matter?
WCAG (Web Content Accessibility Guidelines) is the global standard for web accessibility. Color contrast matters because ~8% of males and ~0.5% of females have color vision deficiency. Low contrast text is also harder to read in bright sunlight, on older monitors, and for anyone over 40.
What contrast ratios do I need for WCAG compliance?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.