🎨 Color Tools & WCAG Contrast

Pick two colors, see them in every common format, and find out whether the pair passes WCAG accessibility contrast for body text and large text.

Foreground formats

Background formats

WCAG contrast

Contrast ratio
β€”
RequiredStatus
Body text β€” AA 4.5
Body text β€” AAA 7.0
Large text β€” AA 3.0
Large text β€” AAA 4.5
Non-text UI β€” AA 3.0
The quick brown fox jumps over the lazy dog.
Large heading text

"Large text" is 18pt (24px) regular or 14pt (18.66px) bold and above. Non-text UI = icons, focus rings, form borders.

🧰 Related developer tools