WCAG Color Contrast Checker
Pick two colors, get the WCAG contrast ratio with pass/fail for every criterion. Live preview, color picker, hex/rgb input. Accessibility shouldn't be a guess.
Small text · 14px · WCAG normal
Large text · 18px bold or 24px regular
Heading sample
Frequently asked questions
What's the difference between AA and AAA?
WCAG AA is the legal baseline for most accessibility regulations (ADA, EAA, AODA). AAA is a higher target preferred by accessibility-first products. AA requires 4.5:1 for normal text, 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
What counts as 'large text'?
18pt regular (24px in browser default sizing) or 14pt bold (about 18.6px bold). Below those, you're in 'normal' territory and need the stricter ratio.
Why is my brand color failing contrast?
Marketing brand colors are often chosen for vibe, not legibility. Bright yellow on white, light gray on white, mid-gray on light gray — all common failures. Use the lighter color as background and the darker color as text, or add an outline / shadow for components like buttons.
How does the contrast ratio actually work?
It's a ratio between the relative luminance of the two colors, where luminance is a perceptual brightness derived from sRGB channels. Pure black on pure white is the maximum (21:1). Same color on same color is 1:1. The formula is in WCAG 2.2 §1.4.3.