Contrast Checker
Check a text and background pairing against the WCAG AA and AAA contrast thresholds.
Large heading, 24px bold
Body copy at the default size. This is the sentence that actually has to be readable — if it is uncomfortable here, it will be worse on a laptop screen in daylight.
Small print at 12px, where a marginal ratio stops being acceptable.
6.11:1
contrast ratio
Fine for body text at AA. Large text also passes AAA.
- Normal text — AAThe legal baseline in most places.needs 4.5:1
- Normal text — AAAEnhanced. Worth aiming for on body copy.needs 7:1
- Large text — AA18.66px bold, or 24px regular and above.needs 3:1
- Large text — AAAEnhanced, for headings.needs 4.5:1
- UI components — AABorders, icons, focus rings — anything you must see to operate.needs 3:1
How it works
- 1Set a text colour and a background. The preview shows real text at three sizes, because a ratio on its own tells you less than looking at it.
- 2The ratio is computed from relative luminance exactly as WCAG 2.2 defines it.
- 3Each conformance level is listed separately — normal text, large text and UI components all have different thresholds.
- 4When a pairing fails, a fix is suggested: the same hue with its lightness adjusted in OKLCH until it passes.
Common questions
- What ratio do I actually need?
- 4.5:1 for normal body text at AA, which is the level most accessibility regulations reference. 3:1 is enough for large text — 18.66px bold or 24px regular — and for UI components like borders and focus rings. AAA asks for 7:1 and is worth aiming at for long-form reading.
- Why does grey-on-white fail so often?
- Because light grey has far more luminance than designers expect. #999999 on white is only 2.8:1 and fails at every level. #767676 is the lightest grey that clears 4.5:1 on white — a useful number to remember.
- Does contrast matter for icons and borders?
- Yes. WCAG 1.4.11 requires 3:1 for any non-text element you need to see to operate — input borders, focus indicators, icon buttons. It is the most commonly missed requirement.
- Is a high ratio always better?
- Not necessarily. Pure black on pure white is 21:1 and some readers, particularly those with dyslexia or light sensitivity, find it harsh. A very dark grey on off-white often reads more comfortably while still passing comfortably.
- Does this account for colour blindness?
- No, and that is a real limitation. Contrast ratio is about luminance, not hue. A red and green of similar luminance can pass here and still be indistinguishable to someone with deuteranopia. Never rely on hue alone to carry meaning.
- What about WCAG 3 and APCA?
- APCA is the newer algorithm and models perception better, especially for dark backgrounds. It is not yet a ratified standard, so this tool uses WCAG 2.2 — which is what you will be audited against today.
Building the whole palette?
The Colour Converter generates perceptually even tints and shades from one colour, so every step in your scale is a predictable distance from the last.
Open the Colour Converter