Brand colour palette and contrast checker
Drop in a logo to pull out its colours, then see whether text is readable on each of them, by the web’s own accessibility standard. When a pair fails, it finds the nearest shade that passes. Free, no sign-up, nothing uploaded.
Showing Wiro’s own colours as an example. Drop your logo, or type your brand’s hex codes.
Check a pair
Body text at the size people read, 16 pixels, the kind a caption or a button carries.
- Body text (AA, 4.5:1)
Passes.
- Large text and icons (AA, 3:1)
Passes for text 24 px, or 19 px bold, and up.
- Body text (AAA, 7:1)
Passes the strictest level.
- #10100Frgb(16, 16, 15)hsl(60, 3%, 6%)
- #EFACD4rgb(239, 172, 212)hsl(324, 68%, 81%)
- #F6D94Ergb(246, 217, 78)hsl(50, 90%, 64%)
- #A9C5E9rgb(169, 197, 233)hsl(214, 59%, 79%)
- #9CAF63rgb(156, 175, 99)hsl(75, 32%, 54%)
- #FFFAF1rgb(255, 250, 241)hsl(39, 100%, 97%)
Every pairing
Rows are backgrounds, columns are text. The label is the best level each pair reaches.| #10100f | #efacd4 | #f6d94e | #a9c5e9 | #9caf63 | #fffaf1 | #ffffff | #000000 | |
|---|---|---|---|---|---|---|---|---|
| #10100f | ||||||||
| #efacd4 | ||||||||
| #f6d94e | ||||||||
| #a9c5e9 | ||||||||
| #9caf63 | ||||||||
| #fffaf1 | ||||||||
| #ffffff | ||||||||
| #000000 |
What the contrast levels mean
The ratios come from WCAG 2.2, the W3C’s Web Content Accessibility Guidelines. The ratio compares how light the two colours are, from 1:1 (the same colour) to 21:1 (black on white).
| Level | Body text | Large text, icons, buttons |
|---|---|---|
| AA (the usual target) | 4.5:1 | 3:1 |
| AAA (stricter) | 7:1 | 4.5:1 |
Where the numbers come from
Each colour’s relative luminance is worked out from its red, green and blue values as WCAG defines it, and the ratio is the lighter one plus 0.05 over the darker one plus 0.05. Ratios are not rounded up: 4.49 fails. See the W3C’s Understanding Contrast (Minimum).
A palette that works everywhere
- Name a text colour. Pick one dark and one light colour from the palette that pass on your main backgrounds, and put them in the brand book.
- Pale colours are backgrounds. Pastels rarely reach 4.5:1 with white text; give them dark type instead.
- Check the stories and the ads, not only the website: a caption sticker on a brand colour needs the same contrast.
- Keep the hex codes in one place, so every designer and every freelancer uses the same ones.
Wiro’s Playbook keeps each client’s logos, colours and fonts in one brand book, shared by link.
More free tools
No sign-up on any of them. Check a creator before the brief goes out, not after the invoice comes in.
Best time to post in the Gulf
Posting windows for six Gulf countries and four platforms, for normal weeks and Ramadan.
Try it freeGCC marketing calendar
Ramadan, Eid, every Gulf national day, White Friday and the year's big seasons, with planning tips and a calendar file.
Try it freeCaption and hashtag checker
Character and hashtag limits for seven platforms, and where your caption gets cut off.
Try it freeInstagram carousel maker
Design carousel slides in your colours, or split one picture into a seamless swipe. PNGs or a LinkedIn PDF.
Try it freeInstagram grid maker
One picture cut into a 3, 6, 9 or 12 post grid at the grid's 3:4 shape, numbered in the order to post it.
Try it freeSocial media image resizer
One picture cropped for every platform at once, with safe zones and the full size guide. Nothing is uploaded.
Try it freeCommon questions
What contrast ratio does text need?
WCAG, the web's accessibility standard, asks for at least 4.5:1 between body text and its background (level AA), and 3:1 for large text, icons and the edges of buttons. The stricter AAA level asks for 7:1 for body text. White on black is 21:1, the most there is.
What counts as large text?
At least 18 point (24 pixels) regular, or 14 point (about 19 pixels) bold. Big headlines can use a pair that only reaches 3:1; captions, body copy and buttons need 4.5:1.
How are the colours taken from my logo?
Your browser draws the logo small, skips transparent pixels, groups the rest into the colours a person would name, and merges shades too close to tell apart. The most common colour comes first. Nothing is uploaded, and you can edit any hex code it finds.
My brand colour fails. What now?
Keep it for what it is good at: backgrounds, large type, shapes and accents. For body text, use the nearest shade that passes (the checker works it out), or white or black on it. Most brand books name a darker text version of the main colour for exactly this.
Is anything uploaded?
No. The logo is read by your browser and the colours stay on your device.