Free tool
Colour palette contrast
Your logo has four colours, your designer suggested two more: which ones can you actually put together? Enter the whole palette and see every combination at once, with the ones that pass.
Separated by commas or line breaks: hex (#13243a), rgb(), hsl() or a CSS name (navy).
Everything is calculated in your browser.
Every pair
Row: text colour. Column: background colour. Tap a cell to see the pair in use.
AAA 7 and up AA 4.5 and up Large 3 and up: headings only Fail under 3
Selected pair
Combinations you can use
How to read the grid
Contrast does not depend on which colour is the text and which is the background: the ratio is the same both ways. The grid shows both so you can read it in the direction you design.
4.5 : 1
Body text
Paragraphs, menus, links, form labels, fine print. The minimum required by WCAG 2 (level AA).
Aim for 7:1 on long reading.
3 : 1
Headings and large text
Text of 24 px and more (or 18.66 px bold), and non-text elements: button outlines, fields, icons, charts.
Not enough for a paragraph.
Buttons
Two contrasts
The button text against its background (4.5:1), and the button against the page (3:1), so it can be seen at all.
The suggestions check both.
When the palette falls short
Brand colours are often chosen for the logo, where they are large and decorative. For text, you usually need a darker version of the main colour and a very light one for backgrounds. Our two-colour contrast checker suggests the closest shade that passes, keeping the same hue.
An orange or a light green rarely works for white text on a button: use the dark text colour of your palette on it instead, or darken the button.
Frequently asked questions
Which colours in my palette can I put together?
Enter the whole palette: the tool shows every colour combination at once, with the ones that pass and the ones that fail. The calculation runs in your browser.
Does the grid have to be read in a particular direction?
No. The ratio is the same whichever colour is the text. The grid shows both directions so you can read it the way you design.
What if my palette falls short?
For text you usually need a darker version of the main colour and a very light one for backgrounds. On an orange or light green button, use the palette's dark text colour instead of white.
