Checking Colour Contrast on a Brand Palette Before It Reaches a Website

A brand palette that looks good in a guidelines document can fail the moment it is used for text on a website. We check colour contrast early, before design and build commit to the colours, because fixing it later usually means changing the brand.

The reference point is WCAG 2.2 level AA. Normal body text needs a contrast ratio of at least 4.5 to 1 against its background. Large text, and the boundaries of interface components such as buttons and form fields, need at least 3 to 1. These are not suggestions for an accessibility edition of the site. They decide whether people with low vision, or anyone reading on a phone in sunlight, can use it at all.

Our process is simple. We take every foreground and background pairing the design is likely to need and test them as a grid: body text on white, body text on the brand's darkest colour, link colour on both, button label on button fill, and the disabled state. Where a pairing fails, we adjust the shade rather than abandon the colour. A slightly darker version of a brand green is usually still recognisably the same green.

We also check the awkward cases. Text over photography needs a gradient or a solid panel behind it. Placeholder text in forms is often too pale. Focus outlines need contrast against everything they might sit on. Colour should never be the only way to show an error or a selected state.

The payoff is speed. If the contrast pairs are agreed before page design begins, designers stop picking colours by eye and developers stop being asked to make grey text a little lighter. The rules live in the design tokens, and every component inherits them.

If a client's existing palette fails, we say so early and offer an accessible variant, with the original kept for print. Our web builds are shown on our demos page.