WCAG contrast ratio checker
Enter two colours and the size you set your text at, and get the contrast ratio with the WCAG thresholds that apply to it. Translucent colours are composited over whatever sits behind them before measuring, so the ratio is the one the browser paints.
Try:
Contrast ratio
7.31
Passes at 16px
A quick brown fox jumps over the lazy dog
At 16px regular, WCAG counts this as body text — the stricter of the two bars, and most of a page.
- AA — passesWhat accessibility requirements are usually written against7.31needs 4.5:1
- AAA — passesStricter. Asked for in public sector and regulated work7.31needs 7:1
- Borders, icons and focus rings — passesGraphical objects and UI components — non-text contrast, at any size7.31needs 3:1
Runs entirely in your browser. Nothing you type is sent anywhere.
What the numbers mean
- 4.5:1 — body text at AA
- Anything under 24px, or under 18.66px bold, which is most of a page. The threshold nearly all accessibility requirements are written against. Set the size above and the checker applies the right one for you.
- 3:1 — large text, and every interface boundary
- Text at 24px, or 18.66px bold, is held to a lower bar because size does some of the work. 3:1 is also the minimum for borders, form outlines, focus rings and icons — what WCAG calls graphical objects and user interface components. It is the rule most often missed, because people check their text and stop.
- 7:1 — AAA
- Rarely required outright, frequently asked for in public sector and regulated work. Worth knowing whether you clear it before someone asks.
- Passing here is not passing everywhere
- This measures a pair of colours. It cannot see text over a photograph, a disabled state, or a hover you never checked. Use it on your foundations, then test the screens.
This is one file out of ten
TokenStyles builds a full design token set in your browser — colour, type, spacing, shape — and every export ships this measurement as a dated report covering every default pairing, in both light and dark. $19 once.