Skip to content
Dev Utilities

Contrast checker

Check colour pairs against WCAG contrast thresholds

Contrast ratio

4.54:1

Range is 1:1 (identical) to 21:1 (black on white). Both colours are opaque.

Ratio against the 21:1 maximum4.54:1

WCAG 2.2 thresholds

AA, normal text 4.5:1 · SC 1.4.3

Body text below 18.66px bold or 24px regular

Pass

AA, large text 3:1 · SC 1.4.3

24px regular or 18.66px bold and up

Pass

AAA, normal text 7:1 · SC 1.4.6

The enhanced level for body text

Fail

AAA, large text 4.5:1 · SC 1.4.6

The enhanced level for large text

Pass

Non-text 3:1 · SC 1.4.11

Icons, focus rings, input borders — anything you must see to use

Pass

Preview

The quick brown fox jumps over the lazy dog — 0123456789

14px regular — normal text

The quick brown fox jumps over the lazy dog — 0123456789

16px regular — normal text

The quick brown fox jumps over the lazy dog — 0123456789

18.66px bold — counts as large

The quick brown fox jumps over the lazy dog — 0123456789

24px regular — counts as large

A marginal pass is not a promise of legibility

WCAG 2.x contrast is a ratio of relative luminance, and luminance is known to model human perception imperfectly. It systematically overrates thin light text on dark backgrounds and underrates some mid-tone pairs, and it takes no account of font weight, size beyond one coarse boundary, or the surrounding page. APCA (the Accessible Perceptual Contrast Algorithm) is the likely successor and is drafted for WCAG 3; it reaches different verdicts on some pairs, particularly for dark mode. So treat 4.51:1 as "measured, not settled": look at the preview above, and if a pair is only just over the line, take the change that puts it comfortably over instead.

Deliberately not implemented: APCA itself. Its lookup constants are still being revised, and shipping a snapshot of them beside a stable WCAG number would invite the two being read as equally settled.