Getting the palette right

Colour has to work for everyone. Not just people with perfect eyesight and expensive monitors.

In this article

Colour is one of the most powerful tools in a designer’s kit. It creates personality, builds recognition and gives brands their character. But what looks fantastic on a designer’s beautifully calibrated 27-inch monitor doesn’t necessarily work for everyone else.

That’s where accessibility comes in.

When we’re developing brand identities, websites or digital experiences, we need to make sure the colours we choose don’t just look the part, but actually do their job. That means enough contrast to keep things legible, combinations that work for people with different types of colour vision, and a palette that doesn’t fall apart the moment someone tries to use it.

Simple enough in theory. In practice, it can be a bit of a headache.

Making accessibility accessible

Developing a colour palette involves a lot of experimentation. You try different shades, mix and match combinations, tweak a few tones, change your mind, change it back, and eventually arrive at something that feels right.

Then you check the accessibility and discover that half your lovely new palette is as legible as a doctor’s prescription.

Most contrast checkers do a perfectly decent job, but they’re generally built to test one pair of colours at a time. Which is fine if you’ve got two colours. Less fine if you’ve got twelve and want to know how they all work together.

So you test a combination, make an adjustment, test another, go back to the first, realise you’ve broken something else, and repeat until you’ve either got a working palette or lost the will to live.

We thought there had to be a better way. What if we could see how an entire palette performed at once? Every possible combination, tested and ranked, updating as we experimented.

Something that would let us play with colour without having to stop every five minutes to check whether we’d accidentally made something unreadable.

We looked around. Couldn’t find quite what we wanted. So gave in and built it.

Meet Palette Lab

A colour tool we developed to make colour accessibility part of the creative process, rather than the awkward conversation at the end when someone points out that nobody can read the buttons.

The principle is pretty straightforward. Put your colours in, and Palette Lab works out which combinations play nicely together and which ones need a stern talking to.

Palette Lab

That reframing changes how a project feels. Instead of designing freely and then bracing for the accessibility audit, you design inside the standard from the very first colour. And you find there's far more room in there than you'd think.

It rates every core colour as text on light and dark surfaces. Optionally, it can provide a supporting palette - hue-tinted neutrals, soft pastels and deep shades - tuned to give you the most usable, high-scoring combinations. It stress-tests every pairing against WCAG 2 and APCA, then sorts them into clear tiers: AAA, AA and large-text-only (18+). So you can see at a glance which pairings carry body copy, and which are built for headlines.

Gradient Combinations

It also generates supporting shades, from lighter pastels and neutrals to deeper tones, helping us build palettes with a bit more flexibility. Because sometimes the perfect brand colour is brilliant for a big, bold headline but absolutely hopeless for a paragraph of small text.

And accessibility isn’t just about contrast. Palette Lab includes colour-vision simulations, allowing us to see how combinations might appear to people with different types of colour blindness. Two colours that look completely different to one person can be virtually indistinguishable to another. Which is worth knowing before you’ve built an entire visual identity around them.

Once we’re happy with a palette, we can export it as Adobe swatches, an SVG colour grid or even an AI prompt, ready to use across the rest of the project.

All very clever. And considerably less fiddly than the old way.

Swatch Downloads

Putting it to work

One of the first projects to benefit from Palette Lab was our work with Bletchley & Fenny Stratford Town Council.

We were refreshing the Council’s visual identity, working with its familiar green and yellow while developing a broader, more flexible palette.

Now, green and yellow can be a lovely combination. Refreshing Lemon & Lime anyone? They can also be a bit of a nightmare when it comes to contrast. Particularly when you’re designing for a diverse community and need everything from printed leaflets to digital communications to be clear and accessible.

Rather than playing endless rounds of colour roulette, we used Palette Lab to explore different shades, test combinations and build a supporting palette that worked across a wide range of applications.

It gave us the freedom to push the colours further, safe in the knowledge that we weren’t sacrificing legibility for the sake of looking pretty.

And while Bletchley & Fenny Stratford was an early beneficiary, Palette Lab is now something we can use across all sorts of projects, from brand identities and websites to digital campaigns and interfaces.

A brighter way of working

There’s a misconception that accessibility means playing it safe. That making things accessible somehow takes the fun out of design, leaving you with a choice of black, white and fifty shades of sensible. We don’t buy that.

Good design has always been about solving problems creatively. Accessibility is simply another part of that challenge, and one that’s far too important to leave until the end.

Palette Lab doesn’t make the creative decisions for us. It just gives us better information to make them with.

And if that means we can spend less time wrestling with contrast checkers and more time actually designing things, everyone’s a winner.