Contrast checker

Two colours in, the WCAG ratio out — with a live preview of the actual text.

Text colourBackground

Normal text, 16px. This is the size most body copy actually is, and the size the 4.5:1 threshold is written for.

Large text, 24px — 3:1 is enough here

4.10to 1

Not for body copy.

Clears 3:1 but not 4.5:1 — fine at 24px, or 18.66px bold, and not at the 16px most body text actually is.

AA — the bar

AA — normal text4.5:1fails
AA — large text3:1passes
Icons, borders, focus rings3:1passes

AAA — stricter than anyone will hold you to

AAA — normal text7:1fails
AAA — large text4.5:1fails

"Large" means a specific size. In WCAG it's 18pt — 24px — or 14pt bold, which is about 18.5px. Not "a heading". A 20px heading is normal text as far as the guideline is concerned and needs the full 4.5:1. This is the most misread part of the criterion and it's why both sizes are previewed above rather than one verdict being given.

AA is the level almost everyone means. It's what the UK public sector is held to under the accessibility regulations, and what most procurement asks for. AAA is a genuinely high bar — 7:1 rules out a lot of grey-on-white that looks perfectly readable — and it isn't expected across a whole site.

Non-text needs 3:1 too. Icons that carry meaning, input borders, focus rings and chart lines all have to clear 3:1 against what's behind them. Faint 1px borders are where this usually fails, and nobody checks them because they're not text.

The ratio is rounded down, not to nearest. 4.499 reports as 4.49 and fails, because a tool that rounds a fail up into a pass is worse than no tool.