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. Results follow the WCAG 2.2 contrast guidelines (opens in a new tab).
Your palette
At a glance
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.