How to Make Sure Text Is Readable on Your Brand Colours

Text is readable on a colour when the contrast ratio between them is at least 4.5:1, or 3:1 for large text. Those numbers come from the W3C's accessibility guidelines, and they're a good bar for any branded image. If one of your brand colours fails, you don't need a new brand. Use a darker or lighter shade of it for text, swap which colour sits behind the words, or make the text bigger and bolder.

Brand colours are usually chosen for how they look as a swatch, not for whether a sentence on top of them can be read on a phone in sunlight. That's how lovely brands end up with headlines nobody can read.

What is a contrast ratio?

It's a number that compares how light two colours are. It runs from 1:1 (two identical colours, invisible text) to 21:1 (black on white). The higher the number, the easier the text is to read.

It only measures lightness, not hue. A red and a green can look completely different and still have almost the same lightness, which means text in one on the other can be hard to read, especially for people with colour blindness.

What contrast ratio should you aim for?

WCAG was written for websites and apps, but the reasoning carries straight over to images. Your social posts, banners and link previews get looked at on small screens, at a glance, often outdoors. If anything, they need more contrast than a web page, not less.

One exception worth knowing: WCAG doesn't apply contrast rules to text that's part of a logo. Your logo can be whatever your brand needs. Your headline isn't a logo, though, and has to be readable.

How do you check your brand colours?

You need the colour codes (for example #F5B700) of the text and the background:

• WebAIM's contrast checker is free: paste in two colours and it tells you the ratio and whether it passes.
• Browser developer tools show the contrast ratio when you inspect text on a web page.
• Hoverfly checks for you. Its brand kit includes a contrast check that tells you when text won't be readable on a colour you've chosen.

Check every pairing you actually use, not just your main colour on white. If headlines sit on your accent colour, check that pairing. If small print sits on your main colour, check that one too.

Our own brand is a good example. Hoverfly's accent is an amber, #F3B01D. White text on it scores 1.9:1 and fails. Our near-black text, #0D0D0D, scores 10.2:1 on the same amber. So on every Hoverfly image, text that sits on the amber is dark, never white.

What if your brand colour fails?

It happens all the time, especially with yellows, oranges, light greens and mid-blues. Don't redo your brand. Pick one of these:

1. Use a text shade. Keep your brand colour for backgrounds and shapes, and use a noticeably darker (or lighter) version of it for any text. Many brand systems have a "text" version of each colour for exactly this reason.
2. Swap the roles. If white text on your yellow fails, try your dark neutral on the yellow instead. Dark text on a bright colour often passes where white text doesn't.
3. Make it large text. At 18 pt, or 14 pt bold, the bar drops to 3:1. A short, bold headline can pass on a colour that would fail for a paragraph.
4. Use the colour as an accent, not a background. An underline, a highlight bar or a shape in your brand colour carries the brand without any text needing to sit on it.
5. On photos, add a solid or dark overlay behind the text. Text placed straight onto a busy photo is rarely readable at every point.

What are the most common contrast mistakes on branded images?

• White text on yellow, orange or light green. Nearly always fails.
• Mid-grey text used to look subtle. On a phone it looks faint.
• Thin, light font weights. Contrast ratios assume ordinary strokes. Hairline fonts need even more contrast than the number suggests.
• Text straight on photos. Part of the photo will be close in lightness to the text.
• Checking only on a bright laptop screen. Look at the image on your phone too, ideally somewhere bright.

How does this fit with the rest of your brand?

Contrast is one of the decisions worth making once, at the start. When you set up your colours, decide which ones text is allowed to sit on and write that down next to the colour codes. It's part of the brand sheet described in keeping your brand consistent on every image, and it saves you from finding the problem one image at a time.

Hoverfly is a tool for branding images: pick a ready-made template and it comes out in your colours, fonts and logo, ready to use. Because the contrast check lives in the brand kit, the problem shows up while you're setting up your colours, instead of in every post afterwards.

When is Hoverfly not the right fit for this?

If all you need is to check a couple of colours once, a free checker like WebAIM's is all you need. Hoverfly is worth it when you want every branded image made from those colours to stay readable without checking each one.

Frequently asked questions

What contrast ratio is good enough for social media images? Aim for at least 4.5:1 for normal text and 3:1 for large, bold headlines. Those are the WCAG AA minimums, and small screens make them more important, not less.

Does my logo need to meet contrast rules? No. WCAG exempts text that is part of a logo or brand name. Everything else on the image, including your headline, should still be readable.

Why does white text on my brand colour look fine to me but fail the check? Screens, eyesight and lighting vary. You designed the image on a good screen and you already know what it says. Someone scrolling past on a phone has neither advantage. The ratio is a more reliable judge than your own eye.

Is black text always better than white text? No. It depends on the background. Dark text usually wins on bright and light colours, white text on dark and saturated ones. Check both and use whichever scores higher.

What counts as large text? In WCAG, at least 18 point, or at least 14 point if it's bold.

Sources

• W3C: Understanding Success Criterion 1.4.3, Contrast (Minimum)
• WebAIM: Contrast checker