Build a brand colour palette that passes contrast
A palette is not five colours you like; it is a system of ramps where text is readable on every surface. The WCAG numbers, how to build ramps that stay even, where brand colours fail and how to fix them, and the builder that checks every pairing.
Intermediate4 min readUpdated 27 September 2026Studio · Brand guideline builder, Colour tab
The numbers
| Pairing | Minimum ratio | Grade |
|---|---|---|
| Body text on a surface | 4.5:1 | AA. 7:1 is AAA. |
| Large text (about 24 px regular, 19 px bold) on a surface | 3:1 | AA large. |
| Icons, borders that carry meaning, the brand colour used as a graphic | 3:1 | WCAG minimum for graphics. |
| Button label on the accent | 4.5:1 | The pairing that most often fails. |
| Logo edge on its background | 3:1 | Otherwise use the reversed or dark mono logo. |
Contrast is measured between the text colour and the colour directly behind it, not between two brand colours in the abstract. A palette passes when every pairing you will actually use passes, which is why the output of this work is a list of pairings, not a row of swatches.
Why ramps, and why OKLCH
A single brand colour cannot do every job: the bright blue that looks right as a button background is unreadable as text on white, and too dark to put black text on. A ramp of ten steps from a near-white tint (50) to a near-black shade (900) gives you a version for each job that still reads as the same colour. Build the ramp in OKLCH rather than HSL: in OKLCH equal steps look equally different, so step 500 of a yellow and step 500 of a blue are equally light, and tints stay clean instead of going grey or neon. Then the same rule works across the palette: text on step 50 uses step 700 or darker; text on step 700 uses step 50.
Where brand colours fail
- Brand colour as body text on white. Most mid-saturation brands sit at 3:1 to 4:1. Use step 700 of the ramp for text and keep the true brand colour for surfaces, buttons and large headings.
- White text on the accent. Yellows, oranges and light greens cannot carry white text. Use dark text on them, or darken the accent one step.
- Two accents. If both are bright and both are rare, neither is the accent. One.
- Neutrals that fight the brand. Pure greys next to a warm brand colour look dirty. Add a little of the brand hue to the neutral family (neutral warmth) so surfaces and text belong to the same palette.
- Print. The brightest step of a ramp is the one the press cannot reach. Choose a printable step for print surfaces; see Why a print looks different from the screen.
How to do it in Voidcanvas
- Open Studio and choose Brand guideline builder. On the Identity tab enter the name and drop in the logo; if the logo has a clear colour it becomes the brand colour.
- On the Colour tab, set the Brand colour (hex or picker) and a Harmony: Analogous, Complementary, Triadic or Split complement. The Secondary and Accent are built from it and darkened or lightened until white or dark text reads on them. Set either by hand to lock it.
- Set Neutral warmth to decide how much of the brand hue shows in the greys.
- Read the ramps: every colour gets ten steps from 50 to 900, built in OKLCH, plus success, warning and error colours.
- Open the Contrast list: each recommended pairing (body text on the light surface, button labels on the accent, secondary text and so on) with its ratio and grade, AAA, AA, AA large or Fail. The button at the top right reads All N checks pass or N issues; it also checks that body text is at least 16 px and that the accent reads as distinct from the brand colour.
- Fix a failure by locking a different step or colour, or press New take to regenerate everything you have not locked.
- On the Export tab, export the guideline (PDF, HTML), the tokens (CSS, Tailwind, JSON), the .ase swatches, and press Save as a client brand in Studio so every job and the Editor's brand kit use the same values.
How many colours should a brand have?
One brand colour, one secondary, one accent and a neutral family, each with a ramp of tints and shades. That is four families and forty-odd usable steps, which is plenty. More than that and nobody can keep them consistent.
What contrast ratio do brand colours need?
4.5:1 for body text on a surface, 3:1 for large text and for the brand colour used as a graphic or an icon, and 3:1 between the logo's edge and whatever it sits on. Measure the pairings you will use, not the swatches in the abstract.
My brand colour fails as text. Do I have to change the brand?
No. Keep the brand colour for surfaces, buttons and large headings, and use a darker step of the same ramp for text. It still reads as the brand and it passes.