Fixing low-contrast text and buttons without changing your brand

Someone runs an accessibility check on your site and reports that your buttons and headings fail contrast rules. Your marketing head hears "change the colours" and immediately says no, because the palette is on the packaging, the shopfront board and every invoice. The good news is that you rarely have to touch the brand at all. This article shows practical ways to fix low contrast text and controls while your brand colours stay exactly where people recognise them.

Separate brand colours from text colours

The mistake behind most contrast failures is treating one palette as if it had one job. A brand colour chosen for a logo was picked to look distinctive at large size on a printed board. That is a different problem from being legible at 15 pixels on a phone held in sunlight.

Split your palette into roles instead:

• Identity colours: the logo, large graphics, illustrations and photography styling. These are untouched.
• Interface colours: body text, links, button fills, borders and form fields. These must meet contrast requirements.
• Accent colours: underlines, dividers, badges, icons, hover states. Contrast rules still apply where they carry meaning, but there is more freedom.

Once the roles are written down, the conversation changes from "we are changing the brand" to "we are adding a darker shade for text", which is a much easier sentence to get approved.

Build a shade ladder from your existing colour

You can usually keep the same hue and simply take a darker or lighter version of it. Most brand guidelines already tolerate tints and shades, since print, signage and merchandise need them anyway.

A workable approach:

1. Take the brand hex code and generate a ladder of five to nine steps from very light to very dark, keeping the hue and adjusting lightness.
2. Test each step against white and against your page background with a contrast checker.
3. Mark the lightest step that reaches 4.5:1 as your text colour, and the lightest that reaches 3:1 as your border and icon colour.
4. Keep the original brand colour in the ladder, labelled for large graphics and logo use only.
5. Record the whole ladder with names such as brand-500 and brand-700 so developers stop inventing shades.

Saturated yellows, oranges and light greens often need a substantial darkening before they can carry white text. If the result no longer looks like the brand, use the opposite approach: dark text on the bright colour rather than white text.

Use the brand colour as an accent, not as the text

Some colours simply cannot carry small text at any acceptable version of themselves. In those cases, move the colour to where it still shows without being read.

Ideas that preserve brand feel:

• Keep the brand colour as a background block and set dark, near-black text on it
• Use it as a thick underline or left border beside a dark heading
• Apply it to large section backgrounds and decorative shapes rather than to words
• Make it the button fill, with the button label in whichever of black or white scores higher
• Use it for icons that sit next to a proper text label, not instead of one

Visitors read the page as brand-coloured either way. They just stop struggling with the parts that carry information.

Buttons and their states

Do not forget hover, focus, disabled and pressed states. A button that passes when idle often fails on hover because the colour lightens. Disabled controls are exempt from the contrast rules, but a disabled button nobody can read is still a bad experience, so keep it visible enough to be understood.

Links inside body text deserve attention too. Where a link colour and the surrounding text are close in lightness, an underline or a bold weight ensures the link is identifiable without relying on colour alone.

Text over photographs and gradients

Hero banners are the hardest case, because the background changes from pixel to pixel. Text that reads fine over a dark corner becomes invisible where the sky shows through, and the crop changes on mobile, so you cannot rely on the composition holding.

Reliable fixes, from least to most intrusive:

• Place a solid or semi-transparent panel behind the text block, with the brand colour as the panel
• Apply a gradient overlay across the whole image, darker where the text sits
• Choose or commission photographs with an intentionally plain area for the message
• Move the text out of the image entirely and put it in a coloured band above or below

Avoid text shadows as the only measure. They can help, but the result varies with the image beneath and is hard to verify.

Checking your fixes properly

Use a contrast checker for individual pairs: the WebAIM contrast checker, the colour picker in Chrome DevTools, or the contrast readout in your design tool. For whole pages, run the Lighthouse accessibility audit or a browser extension such as axe DevTools, which lists each failing element.

Automated tools cannot judge text over images, so check those by eye at several screen widths. And do one real-world test: look at your home page on a mid-range phone, outdoors, at about half brightness. Anything that disappears needs more work regardless of what the checker said.

Turning this into a small, approvable change

Write a one-page addition to your brand guide: the shade ladder, which step is for text, which for borders, and the rule that brand colours over photos always sit on a panel. Change the CSS variables once so every button and heading picks up the new values, then re-run the audit to confirm.

Presented that way, it is a refinement rather than a rebrand, which is usually what the person protecting the brand actually cares about. If you would like the ladder and the CSS handled for you, our team does this as part of design work on a business website, or you can ask a specific question through ask an expert.

Frequently asked questions

Do I have to change my logo if it fails contrast?

No. Logotypes are exempt from the WCAG text contrast requirement. The rules apply to text that visitors read as content and to controls they need to operate.

What if my brand colour is a pale pastel?

Keep it for backgrounds and large shapes, and set dark text on top. Pastels work well as surfaces and poorly as ink, and that distinction usually satisfies everyone.

Should white or black text go on a coloured button?

Test both against the fill and pick the higher ratio. Mid-tone brand colours often score better with dark text, even though white is the instinctive choice.

Will a dark mode version solve the problem instead?

Not by itself. Dark mode is a second colour scheme that needs its own contrast checks, and pale brand colours on dark backgrounds can fail just as easily as dark ones on white.