Free tools/Social content
Brand colour palette and contrast checker
Drop in a logo to extract its colours, then see whether text is readable on each one by the web's accessibility standard. Where a pairing fails, it suggests the closest shade that passes. Nothing is uploaded.
Free, no sign-up, and it runs in your browser
Showing ALXO’s 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.
- #000000rgb(0, 0, 0)hsl(0, 0%, 0%)
- #E3E3E3rgb(227, 227, 227)hsl(0, 0%, 89%)
- #FFFFFFrgb(255, 255, 255)hsl(0, 0%, 100%)
- #34468Argb(52, 70, 138)hsl(227, 45%, 37%)
- #ECEBD9rgb(236, 235, 217)hsl(57, 33%, 89%)
- #7A7A7Argb(122, 122, 122)hsl(0, 0%, 48%)
Every pairing
Rows are backgrounds, columns are text. The label is the best level each pair reaches.| #000000 | #e3e3e3 | #ffffff | #34468a | #ecebd9 | #7a7a7a | |
|---|---|---|---|---|---|---|
| #000000 | ||||||
| #e3e3e3 | ||||||
| #ffffff | ||||||
| #34468a | ||||||
| #ecebd9 | ||||||
| #7a7a7a |
What it does
A brand colour can look superb in a logo and still be unreadable behind a line of text. This tool reads your logo in the browser, skips transparent pixels, groups the rest into the colours a person would name, and merges shades too close to tell apart, with the most common colour first. Every hex code it finds can be edited.
Every pairing is then measured against WCAG 2.2, the accessibility guidelines published by the W3C. The usual target, level AA, is 4.5:1 for body text and 3:1 for large text, icons and the edges of buttons; the stricter level AAA wants 7:1 and 4.5:1. Relative luminance comes from each colour's red, green and blue values using WCAG's own definition, and the ratio divides the lighter value plus 0.05 by the darker value plus 0.05. Nothing is rounded up, so 4.49 is a fail. For any pair that misses, the checker calculates the closest shade that would pass.
How to use it
- Drop in your logo.
- Correct any hex code that is not quite right.
- See which text colours pass on each background, at AA or AAA.
- Name one dark and one light text colour that pass on your main backgrounds, and put them in your brand guidelines.
Questions, answered
What contrast ratio does text need?
Under WCAG, the web's accessibility standard, body text needs at least 4.5:1 against its background to meet level AA, while large text, icons and button outlines need 3:1. Level AAA raises body text to 7:1. The maximum possible is 21:1, white on black.
What counts as large text?
Text of 18 point (24 pixels) or more at regular weight, or 14 point (around 19 pixels) or more in bold. Headlines at that size can get away with 3:1; body copy, captions and buttons still need 4.5:1.
How does it find the colours in my logo?
The browser draws a small copy of your logo, ignores anything transparent, sorts the remaining pixels into colours a person would name and combines shades too similar to tell apart. The list starts with the most common colour, and every hex code is editable.
My brand colour fails. What now?
Keep it for the jobs it does well, such as backgrounds, big type, shapes and accents. For body text, switch to the nearest passing shade the checker suggests, or put white or black on top of it. That is why most brand guidelines include a darker text version of the main colour.
Why does white text fail on my pastel colour?
Pale colours rarely reach 4.5:1 with white text. Treat them as backgrounds and give them dark type. The same applies beyond the website: a caption sticker on a brand colour in a story or an ad needs the same contrast.
Is my logo uploaded?
No. Your browser reads the logo, and the colours it finds never leave your device.
More free tools
See all the toolsBest time to post
When to post on Instagram, TikTok, YouTube and LinkedIn in each GCC country, in ordinary weeks and in Ramadan.
Open the toolGCC marketing calendar
Every Gulf date worth planning around, from Ramadan and national days to White Friday, with notes and a calendar download.
Open the toolCaption checker
Test a caption against seven platforms' character and hashtag limits and see what shows before the cut.
Open the toolCarousel maker
Make branded carousel slides or split one wide image into a seamless swipe, as PNGs or a LinkedIn PDF.
Open the toolNeed more than a tool?
We plan and run campaigns, build websites and apps, and automate the busywork for businesses across the UAE.