Accessible Colour Palette Generator

How the Accessible Colour Palette Generator works

Most palettes are chosen for how they look side by side, and contrast is checked afterwards. That order causes trouble. A bright yellow or a light teal looks great as a swatch but fails as text on white, and fixing it late means changing a colour the brand team already signed off. Building the contrast target into the palette from the start avoids that loop. You get colours that keep their hue and character but are already safe to use for links, labels, icons and chart text.

How to use the accessible colour palette generator

1. Pick your brand colour. It becomes the first colour in the palette.
2. Pick the background the colours will sit on. White and near-black are the usual choices, but any colour works, such as an off-white page or a dark card.
3. Choose the contrast target: 4.5:1 for normal text at level AA, 7:1 for level AAA, or 3:1 for large text, icons and other interface parts.
4. Choose how many colours you need.
5. Copy the custom properties. Each line carries its ratio as a comment, so reviewers can see at a glance that it passes.

What the WCAG levels mean

The Web Content Accessibility Guidelines set minimum contrast between text and its background. Level AA, the usual legal and contractual standard, asks for 4.5:1 for normal text and 3:1 for large text, which is at least 24px regular or 18.66px bold. Level AAA asks for 7:1 and 4.5:1. Since WCAG 2.1, icons, input borders, focus rings and chart elements that carry meaning also need 3:1 against the colours next to them. These rules are unchanged in WCAG 2.2, and many laws, including the European Accessibility Act and the US Section 508 rules, point to them.

How the colours are adjusted

The tool converts the brand colour to HSL and keeps its lightness as the starting point for every hue. The other hues are spaced evenly, so six colours sit 60 degrees apart. For each one it measures the contrast ratio using the WCAG relative luminance formula. If the ratio is too low, it moves lightness half a percent at a time away from the background, darker on a light page and lighter on a dark one, and stops at the first value that passes. Stopping as early as possible keeps each colour as close to its natural brightness as the target allows.

Hue and saturation are not changed, so a palette built from a saturated brand colour stays saturated. Very pale brand colours get their saturation raised to at least 35% for the other hues so that the set does not collapse into greys.

Tips and pitfalls

Some targets are impossible on mid-tone backgrounds. A grey or saturated background sits in the middle of the luminance range, and the highest ratio any colour can reach against it may be below 7:1. The tool marks those hues as unreachable instead of hiding the problem. Use a lighter or darker background, or a lower target for that use.

Yellows and cyans move the most. These hues are naturally bright, so on white they must be darkened a long way to reach 4.5:1 and can turn olive or teal. That is the honest cost of contrast. Keep a brighter version for decorative fills that carry no text.

Contrast is one direction only. The ratios here are each colour against your background. If you put white text on a filled button of one of these colours, check that pair separately.

WCAG 2 is not the last word. The newer APCA model judges contrast differently, especially for dark mode and thin text. If you work on dark themes, compare results with an APCA checker.

Colour should not carry meaning alone. Even a fully compliant palette can be hard to tell apart for people with colour vision deficiency. Pair colours with labels, icons or patterns, and preview the set in a colour blindness simulator.

Reading the result

Each swatch shows a solid chip, sample text in the colour on your background, and the hex value with its contrast ratio. A swatch that says it cannot reach the target means no lightness of that hue passes against your background. The code box holds a :root block with your background as --bg and each passing colour as a named custom property, with its ratio in a comment.

Related tools