Blog · Accessibility

Your brand colour fails contrast. Now what?

The awkward moment when the colour on the logo cannot legally hold text. Five ways out that do not involve rebranding.

It happens on most projects eventually. The brand colour is a bright, confident mid-tone — a sunny yellow, a lime green, a sky blue — and it looks superb on the logo. Then someone puts white text on a button in it, runs a contrast check, and gets 2.1:1 against a required 4.5:1.

The design team wants to darken it. The brand team says the colour is not negotiable. Both are right, and there are better options than the argument.

First, work out what actually fails

"The brand colour fails accessibility" is almost never true as stated. What fails is a specific pair in a specific role. Run these through the contrast checker separately, because the answers differ:

White text on the brand colour (button labels) — needs 4.5:1;
Black or near-black text on the brand colour — often passes where white fails;
The brand colour as text on white (links, headings) — needs 4.5:1, or 3:1 at large sizes;
The brand colour as a border, icon or chart element — only needs 3:1;
The brand colour as a decorative background with no text on it — no requirement at all.

A mid-tone colour typically passes as a large-text colour and as a non-text element, and fails only for small text and white labels. That narrows the problem enormously.

Option 1: flip the text colour

The cheapest fix. If white on your brand colour gives 2.1:1, near-black on the same colour will often give 8:1 or better. Yellow, lime and cyan brands almost always want dark labels. It can look unfamiliar for a day and then looks obviously correct.

Option 2: keep the brand colour, add a UI variant

This is what most mature design systems do, and it is worth being explicit about it: the brand colour and the action colour do not have to be the same colour.

Keep the exact brand hex for the logo, marketing surfaces, illustration and large blocks. Derive a darker sibling — same hue, same or slightly higher saturation, lightness reduced until white text clears 4.5:1 — and use that for buttons, links and anything carrying text. Because the hue is unchanged, the two read as the same colour to everyone except a contrast checker.

--brand:        #F2C230;  /* logo, large fills, illustration */
--brand-action: #8A6A00;  /* buttons, links, small UI  */

Document it as a rule, or the original will creep back into buttons within a month. There is more on structuring this in the design system guide.

Option 3: use it as a background, not a foreground

A colour that cannot hold small text can still do a great deal of work: full-bleed section backgrounds with large headings on them, cards with dark text, a coloured band behind an image, chart fills, iconography. Large text only needs 3:1, which many mid-tones clear comfortably. Let the brand colour own the big surfaces and give the small, text-carrying components to a darker relative.

Option 4: adjust lightness, not hue

If the brand will accept a nudge, change the right dial. Reducing lightness by 10–15 percentage points usually moves a failing pair into a passing one while leaving the colour recognisably itself. Changing the hue is what people notice; changing the lightness is what fixes the ratio.

The fastest way to find that step: put the brand colour into Base colour in the generator, then open the Tonal scale panel. Each of the ten steps is labelled with whether it carries black text, white text, either or neither at AA — so the darkest step still labelled "White text" is usually the UI variant you want, and you can read it off rather than guessing.

Option 5: pair it with a scrim

For text over a photograph or gradient that includes the brand colour, a translucent dark layer between image and text is a standard, well-accepted solution. Around 40–60% black gets most images over the line. It is not a licence to skip the check — measure the text against the darkest and lightest parts of the composite, not against your intention.

What not to do. Do not use a thin white outline or a text shadow to rescue low-contrast text; both look poor at small sizes and neither is measured by contrast tools, so you get the appearance of a fix without the substance. And do not treat "our brand colour is exempt" as a position — WCAG applies to the rendered result, and in many jurisdictions so does the law.

Why it is worth the argument

Around 1 in 12 men and 1 in 200 women have a colour-vision deficiency, a far larger number have some degree of low vision, and everyone reads badly on a phone in sunlight. Contrast is one of the few design decisions that improves the experience for literally every user, including the ones with perfect vision on a good monitor. It is also, increasingly, a procurement requirement — public sector bodies in the UK are covered by accessibility regulations, and large clients now routinely ask.

The full detail on thresholds, colour blindness and testing is in our guide to accessible colour.

Check your pairs →