Brand colours and accessibility: how to check contrast

Edara Akpan · Sep 17, 2026 · 3 min read

A palette can look beautiful in a presentation and still be hard to read on a phone in daylight. Contrast is the difference in lightness between text and its background, and it decides whether people can read your message at all.

The numbers that matter

The Web Content Accessibility Guidelines (WCAG), published by the W3C, measure contrast as a ratio from 1:1 (no difference) up to 21:1 (black on white). At the standard AA level, the guidelines ask for:

• At least 4.5:1 for normal text
• At least 3:1 for large text, meaning 18 point or larger, or 14 point and bold. On screen that is roughly 24 pixels, or about 18.5 pixels in bold

The stricter AAA level asks for 7:1 for normal text.

One detail surprises designers. Text that is part of a logo or brand name has no minimum contrast requirement. But the W3C is clear that other brand rules, such as the colours you use for headings, buttons and links, are not exempt. Your logo can be subtle, but your website text cannot.

Why this matters beyond ticking a box

• It helps everyone. Glare, small screens, tired eyes and older eyesight all make low-contrast text harder to read
• It helps people with low vision or colour blindness. The ratio is calculated from lightness, so it works regardless of hue
• It protects conversions. A call-to-action button nobody can read does not get clicked

Accessibility expectations for websites are growing in many markets, and some require compliance, so check what applies where you trade.

The most common problems in brand palettes

• Light grey text on a white background
• Yellow, light orange or light green text on white
• White text on pastel buttons
• Text placed straight over a busy photograph
• A brand colour that looks great as a large block but fails when used as small text

How to fix them without losing your brand

1. Keep a dark neutral for body text. A deep charcoal or near-black on a light background is the safest pair you have
2. Use brand colours for large elements. Headers, shapes and illustrations can carry vivid colours, and large text only needs 3:1
3. Create a darker shade of your primary colour for text and links. The brand feel stays, and the readability returns
4. Choose button text to pass. Test both a dark and a white label, and use whichever clears the ratio
5. Add an overlay behind text on photos, or place the text on a solid label
6. Define accessible pairs in your guidelines. Decide once which text colour goes on which background, test it, and write it down

When you are building a palette from scratch, build these pairs in from the start (how to choose a brand colour palette).

How to test

Use any free contrast checker. Enter the text colour and the background colour, then look at the ratio and check it against 4.5:1 for normal text or 3:1 for large text. A pair that lands just below the line fails. Fix the colour rather than hoping nobody notices.

Document your approved pairs like this:

What about print and packaging?

WCAG is written for screens, but the principle carries over. Pale text on a pale label is hard to read in the lighting of a real shop, and small text on a coloured pack needs strong contrast as well. Apply the same discipline to packaging.

Sources

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