Contrast Checker

Manually check any two colors against WCAG and APCA contrast thresholds.

Colors

Pick or type foreground/background colors to compare.

Foreground

Background

WCAG ratio21.00:1

APCA Lc106.0

WCAG 2.x

Normal text — AAneeds 4.5:1

Normal text — AAAneeds 7:1

Large text (18pt+/14pt bold) — AAneeds 3:1

Large text (18pt+/14pt bold) — AAAneeds 4.5:1

UI components / graphics — AAneeds 3:1

APCA (reference, not a fixed spec yet)

Body text (~16px normal)needs Lc 75

Large/bold text (~24px, or 18px bold)needs Lc 60

Headlines (~36px+)needs Lc 45

UI components / non-textneeds Lc 30

Large heading textThe quick brown fox jumps over the lazy dog — normal body text.

Protanopia (red-blind)

Deuteranopia (green-blind)

Tritanopia (blue-blind)

Achromatopsia (no color)