Pick any foreground and background colour, see the WCAG 2.1? contrast ratio and AA/AAA pass/fail for normal text, large text, and UI components — instantly in your browser.
If you’ve ever squinted at pale grey text on a white slide, this is the fix. Pick the text colour and background colour you’re planning to use — in a slide deck, a poster, a website, an email signature — and see instantly whether people will be able to read it comfortably, including people with weaker eyesight.
There are also official pass marks that many organisations are required to meet; the table at the bottom shows whether your colour combination clears them.
| Criterion | Required | Result |
|---|---|---|
| Normal text AA | ≥ 4.5 : 1 | — |
| Normal text AAA | ≥ 7.0 : 1 | — |
| Large text AA | ≥ 3.0 : 1 | — |
| Large text AAA | ≥ 4.5 : 1 | — |
| UI components AA? | ≥ 3.0 : 1 | — |