Color Contrast Checker

Check WCAG contrast ratios between text and background. Pick any pair of colors, preview live sample text, see pass/fail against AA/AAA, simulate color-blindness, and get auto-suggested accessible alternatives.

Contrast ratio
—
Standard
Required
Result
WCAG AA · Normal text
4.5 : 1
WCAG AA · Large text
3 : 1
WCAG AAA · Normal text
7 : 1
WCAG AAA · Large text
4.5 : 1
Non-text (UI components)
3 : 1
APCA Lc —
Large 24px Bold — the quick brown fox
Normal 16px — The quick brown fox jumps over the lazy dog. Accessibility matters; contrast is the first thing screen-users rely on.
Small 13px — even the fine print should stay legible for users with low-vision or older displays.
WCAG defines "large text" as ≥ 18pt regular or ≥ 14pt bold (≈ 24px/18.5px in CSS).
Color-blindness simulation
Approximately 4.5% of people have some form of color-vision deficiency. Simulations use standard Brettel/Machado matrices.