♿ Color Contrast Checker

Check WCAG AA / AAA accessibility compliance for foreground and background color pairs.

Foreground (Text)

Background

QUICK PRESETS

—

Contrast Ratio

Heading Text Aa

Normal body text. The quick brown fox jumps over the lazy dog.

Small text (12px). Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Button Label

What do the levels mean?

WCAG AA (4.5:1) — Minimum for normal text. Required for most accessibility standards.

WCAG AA Large (3:1) — For large text (18pt / 14pt bold) and UI components.

WCAG AAA (7:1) — Enhanced contrast. Best for body text on high-accessibility sites.

WCAG AAA Large (4.5:1) — Enhanced for large text.