Check any two colours against WCAG 2.2 AA and AAA, and get the closest shade that passes.
Large heading
Body text at a normal size. The quick brown fox jumps over the lazy dog.
Small print, like captions and form hints.
Contrast ratio
5.28:1
- AA · normal text · 4.5:1 Pass
- AA · large text (24px, or 18.5px bold) · 3:1 Pass
- AAA · normal text · 7:1 Fail
- AAA · large text · 4.5:1 Pass
- Icons, borders and controls · 3:1 Pass
Check whether your text and background colours are easy enough to read, measured against the WCAG 2.2 accessibility standard. If a pair fails, you get the closest colour that passes, so your brand palette stays recognisable.
01
Contrast ratio
The exact ratio between your two colours, from 1:1 (identical) to 21:1 (black on white).
02
AA and AAA levels
Pass or fail for normal text, large text, and icons and controls, at both WCAG levels.
03
A colour that passes
When a pair fails, the nearest darker or lighter version of your text colour that reaches AA.
04
Private by design
Everything is worked out in your browser. Nothing is uploaded or stored.
- 1
Pick your colours
Type a hex code or use the colour picker for the text and the background.
- 2
Read the ratio
Check the levels you need: AA for normal text is the usual legal and practical bar.
- 3
Fix what fails
Use the suggested colour, or swap text and background to test buttons and dark sections.
4.5:1 or more
Passes AA for body text. Most people, including many with low vision, can read it comfortably.
3:1 to 4.49:1
Fine for large headings, icons and borders, but too faint for normal-sized text.
Under 3:1
Hard to read for many people and fails every WCAG level. Change one of the colours.
Pale grey text and brand colours on white look elegant in a design file and disappear on a phone in sunlight. Around one in twelve men has some colour vision deficiency, and everyone's eyesight changes with age. Readable contrast is part of accessibility law in the UK and EU, and it simply helps more people read what you wrote.
About the colour contrast checker.
WCAG 2.2 AA asks for 4.5:1 for normal text and 3:1 for large text (24px, or about 18.5px bold) and for icons, borders and form controls. AAA, the stricter level, asks for 7:1 and 4.5:1.