There is a particular kind of disappointment that arrives after an afternoon spent building a palette you love, when you run it through a contrast checker and watch three of your five colours fail. The instinct is to mute everything, shift towards safe greys and end up with a site that reads like a tax form.

It does not have to go that way. Accessibility and impact only pull against each other when colour is treated as decoration. Treated as a system — with contrast ratios, a lightness ladder and a few honest tests — a palette can stay loud and still be readable by the widest possible audience.

Put contrast before mood

WCAG, the standard most teams work to, sets the numbers. Body text needs a contrast ratio of at least 4.5:1 against its background. Large text — around 24px, or 18.66px when bold — needs 3:1. So do interface components: icons, input borders, chart lines and focus rings. Those ratios are not suggestions; they are the difference between a design that works for someone with low vision and one that does not.

The important detail is that contrast is calculated from relative luminance, which is about brightness, not hue or saturation. Two colours can feel worlds apart — hot magenta, deep teal — and still sit at the same luminance, giving identical contrast against white. This is why you cannot judge a palette by eye, and why a checker is the first tool you reach for, not the last.

The practical move is to build a matrix before you fall in love with any combination. Put your backgrounds in rows: paper, ink, brand surface, muted surface. Put candidate text colours in columns. Fill in each ratio. Tools that make this quick include WebAIM's contrast checker, TPGi's Colour Contrast Analyser, and the colour picker built into browser developer tools, which shows the ratio as you drag. If you design in Figma, a plugin such as Stark or Able keeps the check inside the file.

Remember that contrast is rarely a two-colour problem. Card against page, text against card, border against card, button label against button fill: each pair needs its own check.

Know which UK guidance actually applies

For public sector websites and apps, the Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018 set expectations at WCAG level AA, together with a published accessibility statement. Most teams now build to WCAG 2.2 AA, the version current government guidance tracks. Outside the public sector, the Equality Act 2010 places duties on service providers and employers, and accessible design standards are usually how organisations show they have taken those duties seriously.

That is general guidance rather than legal advice. If your organisation has statutory obligations, read the current published guidance or speak to someone qualified — the specifics change, and getting them wrong is more expensive than getting them right.

For a colour palette, the useful takeaway is simple: AA is the floor, not the ambition. A palette that clears AA comfortably has room to be pushed further, and the extra headroom is what lets you keep a strong brand hue in play without gambling on readability.

Build a lightness ladder, not a rainbow

Most failing palettes fail for the same reason: the colours were chosen by hue alone. Three cheerful blues, four warm neutrals, and no agreement about which one sits on top of which.

Instead, treat every brand colour as a ramp. A typical scale runs from a very pale tint through the core brand value to a deep shade, in even steps — 50 through 900 is a common convention, but the numbers matter far less than the consistent jump between them. Name the steps for what they do: mist, cloud, slate, ink. Once the ramp exists, choosing a text colour becomes a decision about position on the ladder rather than a guess.

Then run the greyscale test. Convert the whole palette to greys and look at it. If everything collapses into three similar mid-tones, your hierarchy is coming entirely from hue — which means it disappears for anyone with colour vision deficiency, for anyone reading on a washed-out screen in bright sun, and for anyone printing the page.

Simulate colour vision deficiency properly

Roughly one in twelve men and a smaller proportion of women have some form of colour vision deficiency, most commonly red-green. Deuteranopia and protanopia are the usual cases; tritanopia, which affects blue and yellow, is rarer; achromatopsia, the absence of colour perception, is rarer still. Simulation tools such as Coblis or Sim Daltonism let you see your work through those filters, and several design apps include similar previews.

The recurring casualties are status colours and charts. A red error state and a green success state often converge into the same muddy olive. A five-series line chart becomes a guessing game. The fix is never to abandon colour — it is to give every colour a second job:

• Pair status colours with an icon or a short word: a tick, a cross, "Paid", "Overdue".
• Label chart series directly at the end of each line or above each bar, instead of relying on a legend keyed only by colour.
• Use pattern or texture in charts and maps — dots, diagonals, varying stroke weights.
• Give form errors a written message, not just a red outline.
• Underline links in body copy so they are distinguishable without colour at all.

Check the states most palettes forget

A palette is not finished when the default state looks good. Focus rings need 3:1 contrast against both the element and the surface behind it, and they should be visible, not a faint dotted line that vanishes on a busy image. Hover and active states need to be distinguishable from default. Disabled controls should still be legible — dimming to 20% opacity is a common mistake that makes text unreadable rather than merely inactive. Placeholder text is not a label and should never be the only description of a field.

Dark mode deserves its own pass. Inverting a light palette produces accents that glow unpleasantly against near-black, and pure black backgrounds can cause halation for readers with astigmatism. Take your brand hue down a step in saturation, use a very dark neutral rather than black, and recheck every ratio rather than assuming they carry over.

Keep the impact

Contrast is not the enemy of a bold palette. It is what makes a bold palette legible.

Everything above can be done without dulling a single colour, as long as you spend your saturation deliberately. Pick one loud colour and let it own the page; make everything else quiet. Put the vivid hue into large blocks, bands and illustrations, where contrast is easier to satisfy, and reserve a darker step of the same hue for text. Use a near-black ink and a warm off-white rather than soft greys — stronger, and friendlier to contrast checks. Scale type up, give it room, and let size and weight carry hierarchy that colour used to carry alone. Test on a cheap phone outdoors and at 200% browser zoom; if the design still reads clearly, the palette is doing its job.

Before you ship

Run through this once for every project, and it takes fifteen minutes:

1. Check every text and background pair at 4.5:1, or 3:1 for large text and interface elements.
2. View the whole page in greyscale and confirm the hierarchy survives.
3. Run one colour vision simulation and fix anything that merges.
4. Inspect focus, hover, active, disabled and error states.
5. Test on a real device in daylight, at 200% zoom, with a keyboard.

A palette that works everywhere is not a watered-down version of the one you wanted. It is the better version — the one that keeps its punch and holds up for everyone reading it.

Photo: mozlase__ / Pixabay