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.
