Tool · Contrast checker
Will this pair pass?
Pick a foreground and a background. Read the contrast ratio, the WCAG verdict, and a live preview at the sizes that actually ship.
Foreground
Text or symbol colour
Background
Surface behind the foreground
Quick presets:
Large display · 32px
The quick brown fox jumps over the lazy dog.
Body · 17px
Body copy at the size your reader actually meets. If this paragraph is uncomfortable to read here, it will be unreadable for someone with low vision, in glare, or on a budget screen.
Caption · 14px
Small print. Use this size only when the AA threshold is comfortably exceeded — 4.5:1 is a floor, not a target.
Contrast ratio
16.14:1
Exceeds AAA for body text.
- Pass
AA normal text
Body copy, default UI
- Pass
AA large text
18pt+ or 14pt+ bold
- Pass
AAA normal text
Load-bearing copy
- Pass
AAA large text
Long-form display
- Pass
UI components
Non-text contrast
The thresholds, briefly.
AA — body text (≥ 4.5:1). The default. If a pair passes nothing else, it should pass this. Below 4.5:1 your body copy is illegible for a non-trivial fraction of readers.
AA — large text (≥ 3:1). Large text is 18pt regular or 14pt bold and above (roughly 24px regular / 18.66px bold). Pulled at this size because larger letterforms are inherently more legible.
AAA — body text (≥ 7:1). The gold standard. Aim for AAA on anything load-bearing — primary CTAs, error states, anything where misread = data loss.
AAA — large text (≥ 4.5:1). The AAA equivalent of the large-text relaxation. Used for long-form display type.