Analyze / Contrast Checker
Contrast between two colors.
WCAG 2.2, WCAG 3 / APCA, and the four pass/fail thresholds. Swap foreground and background instantly — every sample re-renders live.
Ratio4.47:1
WCAG 2.2AA Large · large only
APCA Lc+71 · Body
Hue delta239° → 0°
UpdatedJust now
Foreground
Headline sample · 24px bold
Subhead · 18px bold
Body paragraph at 14 pixels regular tests the lower bound of legibility and the crux of most WCAG failures.
Background
Headline sample · 24px bold
Subhead · 18px bold
Body paragraph at 14 pixels regular tests the lower bound of legibility and the crux of most WCAG failures.
4.47:1
Contrast ratio
Large · AA
Pass
Large · AAA
Fail
Small · AA
Fail
Small · AAA
Fail
UI elements · 3:1
4.47
Passes · 1.47 headroom
Large text · 3:1
4.47
Passes AA only
Small text · 4.5:1
4.47
Fails AA
Small · AAA · 7:1
4.47
Fails by 2.53
03
Copy CSS snippet
/* passes WCAG AA Large · 4.47:1 */
.button-primary {
background: #FFFFFF;
color: #6366F1;
border: 1px solid #6366F1;
}