Work

Designing Colour Palettes for Accessibility

5 August 2026

A colourful dashboard can become unreadable surprisingly quickly.

The Accessible Palette Generator began as a way to create three to sixteen visually distinct swatches without checking every colour manually.

Distinct is not the same as accessible

The generator distributes colours across a configurable hue range, then varies saturation and lightness to avoid a mechanically uniform result. That creates separation, but it does not guarantee that text or chart marks will be visible against the chosen background.

Each swatch is therefore measured against a light or dark background using relative luminance. The interface reports its contrast ratio and whether it reaches AA, AAA or large-text AA thresholds.

The feedback is immediate. I can keep the lively parts of a palette and see exactly which swatches still need work.

Make compliance an active option

AA and AAA modes do more than display a warning. They adjust the lightness of each generated colour until the target ratio is met where possible.

This is useful when the constraint is known in advance. Instead of designing a palette and repairing it afterwards, the threshold becomes part of generation.

The tool also accepts an existing comma-separated list of hex codes. That allows somebody to audit a brand or report palette without starting again. Valid values are normalised, duplicates are removed and malformed entries are surfaced rather than silently ignored.

Keep the design feedback tangible

Every colour is rendered as a large swatch with its hex value, ratio and compliance badges. Clicking a swatch copies the value. Changing the number of colours, hue spread, background or target refreshes the set immediately.

Those small interactions matter because accessibility work is easiest to sustain when it sits inside the normal design loop. A separate audit at the end is easier to postpone and harder to act on.

This portfolio now uses the same idea in its Work and Play system. Bold colour is welcome, but meaning is also carried by text, shape and state. Contrast is treated as a design input rather than a final check.

Open the generator or view the source.