How to create an accessible colour palette

An accessible palette is not a duller palette. It is one where you know which combinations can carry text and which cannot, and you use each accordingly. Most inaccessible designs are not too colourful — they are colourful in the wrong places.

The thresholds

• 4.5:1 — normal text, AA. The bar most work is held to.
• 3:1 — large text, AA. Large means 18pt or 14pt bold, roughly 24px or 18.5px bold.
• 3:1 — also the bar for meaningful non-text: icons, form borders, focus rings, chart keys.
• 7:1 — normal text, AAA. Worth aiming for on long-form reading.

The ratio is computed from relative luminance and runs from 1:1 to 21:1. It is arithmetic, not opinion, which is why a checker can give you a definite answer.

Build it in the right order

1. Start with the text colour and the background, and get that pair well clear of 4.5:1. Everything else is decoration; this pair is the product.
2. Add surfaces — cards, headers, sidebars — and check your text colour against each of them, not just against the page background.
3. Add accents last, and decide for each one whether it will ever carry text. Many should not.
4. For every accent that will, produce a darker variant for text use and keep the original for fills.

Most brand accents are fine as a fill and unusable as text. Ship both versions rather than compromising one.

Do not rely on colour alone

Around one in twelve men has some form of colour vision deficiency. Red and green at similar lightness can be indistinguishable to them, and a contrast ratio will not warn you, because luminance is not the problem.

So never let colour be the only carrier of meaning. Errors get an icon and a sentence, not just a red border. Chart series get labels or patterns, not just a key. Required fields get a word. The rule of thumb: if you printed the interface in greyscale, could you still use it?

Things people forget to check

• Placeholder text, which is usually far too light.
• Disabled states — genuinely exempt from the ratio, but still need to be perceivable.
• Focus indicators, which need 3:1 against what is next to them.
• Text over images, where the contrast changes with the photograph. Use a scrim.
• Dark mode, which needs checking independently — it is a different palette.

Then look at it

Passing is a floor. A pair can clear 4.5:1 and still be tiring to read — vibrating complementaries, a pure saturated hue behind long text, thin type on a busy ground. Check the number, then check your eyes.