Brand Colours That Pass Contrast Checks

Why many brand colours fail

Contrast is about luminance, not hue. A saturated orange feels strong, but its brightness sits in the middle of the range, which is exactly where neither white nor black text gets far enough away from it. The same applies to the light greys designers like for secondary text. The check the law and the browser tools apply is mechanical, so the answer has to be mechanical too: measure the pairs, not the feeling.

Building tints and shades

For each brand colour, build a scale of roughly ten steps from near-white to near-black, keeping the hue and adjusting lightness. The original brand colour lands somewhere in the middle. The lightest steps become backgrounds; the darkest become text; the original stays for logos, large headings and accents where contrast is not required.

1. Start from the brand colour and generate steps in a perceptual colour space, so that equal steps look equal; the tools built into Figma and most design-token generators do this.
2. Adjust saturation slightly at the ends of the scale so the very light and very dark steps still feel like the brand rather than grey.
3. Name steps by number, not by adjective: brand-100 to brand-900 ages better than 'light' and 'lighter'.
4. Do the same for a neutral grey scale with a hint of the brand hue, which is what body text and borders will actually use.
5. Add one semantic set for success, warning and error, built the same way, so status colours pass too.

Text, button and background pairs

With the scales in place, the work is picking pairs and measuring them. A handful of combinations covers nearly every interface need.

Dark mode variants

Dark mode is not the same palette inverted. Pure white text on pure black glares, saturated brand colours look neon on dark backgrounds, and shadows stop working. The scales you built already contain the answer: use the darkest neutral steps as backgrounds, the lighter neutrals for text, and move brand usage a few steps lighter so the button that was brand-700 on white becomes brand-400 on neutral-900.

Documenting approved combinations

The measurements are worthless if the next designer or developer picks a new pair from the scale without checking. Write the approved pairs into the design system as named tokens: text-on-brand, brand-on-light, link, focus. Code uses the tokens, not the raw colours, so a passing pair cannot quietly become a failing one. Put the contrast ratio next to each pair in the documentation, and add an automated check in the build that fails when a token pair drops below the target. This is the part of a design system and UI kit that saves the most trouble later, and it belongs with the other durable choices covered in web design that ages well.

When you do not need this: a single landing page with dark text on white and one button can be checked by hand in five minutes; you do not need a token system for it. The scale and the documentation pay off when several people ship interface work over years. If your brand colours were chosen before the website existed and nobody has measured them, book a free 15-minute call and we will run the pairs you use today through the checker together.

Frequently asked questions