Colour accessibility check

See which colour pairs from your palette are readable and safe to use for text and UI.

Enter your brand palette and click Check. We’ll show all the usable colour pairings (including white if it’s not in your palette), plus practical suggestions for headlines, links, and buttons.

The first colour you enter is your primary brand colour. Suggestions will prioritise combinations that work with it.

Brand colour palette

Tip: click a swatch to copy the HEX value.

Your palette

Add your colours using HEX or RGB — whichever you have. Start with your primary brand colour, then add supporting colours.

If you use near-black or off-white in your UI, include them here too.

Colour combinations

Here are all two-colour combinations from your palette. Each card shows how well the pair works for readable text. White is included automatically if it’s not part of your palette.

Body text means text around 16px.
Large text means headlines or labels of 19px bold or larger.

Ratings follow WCAG contrast guidelines. Contrast values are shown for reference.

Suggestions

Optional additions you can use alongside your palette: small fixes on white, a dark support colour for reliable text, and light support colours for softer backgrounds.

Fixes on white

Some colours are almost readable on white. When the gap is very small, we’ll suggest a subtle adjustment that keeps the look as close as possible. This only applies to small improvements on white.

Add dark support colour

Dark support colours are useful for dependable text and UI labels. These suggestions are always shown as optional additions.

Add light support colour

A light support colour can be useful as a soft background option, so you can place your brand colours on it (in addition to white). We’ll suggest a light tint for each palette colour, unless your palette already includes a light colour.

Examples

These examples show how your palette can work in common UI patterns. Always validate in your real layout and typography.

Headlines

Headline options that stay readable at larger sizes.

Links

Link colours that remain readable within body text on white.

Buttons

Button colour pairs that keep the label readable. These sizes match the body text and large text definitions above.

Standard buttons (16px bold)

Large-label buttons

Updated palette

If you applied a fix or added a support colour, your updated palette is shown here.