WCAG 2.2 · AA & AAA
Colour Contrast Checker
Enter your five brand colours to see exactly which pairings are readable for headings, body copy and icons, and which ones need a rethink.
Your palette
At a glance
Contrast matrix
Rows are backgrounds, columns are text colours. Each cell shows the best level that pairing reaches for normal-size body text, or for large text where noted.
Every combination
How we grade
| Element | AA needs | AAA needs | Applies to |
|---|---|---|---|
| Headings | 3 : 1 | 4.5 : 1 | Large text: 24px and up, or 18.66px and up in bold |
| Body copy | 4.5 : 1 | 7 : 1 | Regular-size text, captions, buttons and links |
| Icons & UI | 3 : 1 | No AAA level | Icons that carry meaning, form borders, focus rings, chart elements |
Ratios are calculated with the WCAG relative luminance formula and rounded down to two decimal places, so a 4.49 never sneaks through as a 4.5. Purely decorative elements and logos are exempt from contrast requirements.