Choose colours that work on screen and in print
Build palettes with roles, make even ramps in OKLCH, pass WCAG 2.2 contrast, and know what happens when RGB colour goes to a printer.
Intermediate5 min readUpdated 25 September 2026Studio · Colour
On this page
A good palette is not a set of nice colours. It is a small system: each colour has a job, each has lighter and darker steps, and the pairs you actually use can be read by everyone. This article covers how to build one and check it, and what changes when the work is printed.
Start with roles, not swatches
Give every colour a job before you worry about the exact hue.
| Role | Job | Typical share |
|---|---|---|
| Brand | Logo, key surfaces, the colour people remember | Large |
| Neutral | Backgrounds, body text, borders, most of the page | Largest |
| Secondary | Supporting blocks, illustration, charts | Medium |
| Accent | Calls to action and highlights. One per view. | Small |
| Semantic | Success, warning, error. Only for meaning. | Rare |
The old 60/30/10 rule is a fair starting point: most of the area in one dominant colour, a third in a supporting one, a tenth in the accent. The accent works because it is rare. Use it everywhere and it stops pointing at anything.
Why HSL misleads you
HSL says pure yellow and pure blue both have 50 per cent lightness. Your eye disagrees: yellow looks almost white and blue looks almost black. Build a palette in HSL and the steps look uneven, text contrast jumps around between hues, and a "500" yellow and a "500" blue are nothing alike.
OKLCH fixes this. It describes a colour by three numbers:
- L, lightness, from 0 (black) to 1 or 100 per cent (white), scaled to how light the colour looks, not how the screen makes it.
- C, chroma, how colourful it is. 0 is grey; strong screen colours reach about 0.3 to 0.37.
- H, hue, an angle in degrees around the colour wheel.
In OKLCH, pure yellow sits at about L 0.97 and pure blue at about L 0.45, which matches what you see. Hold L constant and change H, and you get colours that feel equally light. That is exactly what you want for a set of tints.
Build ramps
A ramp is one hue in several steps, usually numbered 50 (palest) to 900 (darkest). You use light steps for tinted backgrounds, middle steps for fills and dark steps for text on those tints. Build every ramp with the same lightness per step, ease chroma off at the very light and very dark ends so tints stay clean and shades do not go muddy, and keep the hue fixed.
Some OKLCH colours cannot be shown on a normal sRGB screen, especially very saturated light colours. When that happens, lower the chroma and keep the lightness and hue. Lowering lightness instead would break the ramp.
Contrast and WCAG 2.2
WCAG measures contrast as a ratio between the relative luminance of two colours: (lighter + 0.05) ÷ (darker + 0.05). It runs from 1:1 (identical) to 21:1 (black on white). WCAG 2.2 keeps the same contrast rules as 2.1.
| What | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text: 24 px regular, or about 18.7 px bold (18 pt and 14 pt) | 3:1 | 4.5:1 |
| Icons, input borders, chart lines, focus rings (non-text contrast) | 3:1 | No extra level |
- Logos and brand names in a logo are exempt, as are purely decorative graphics and disabled controls. Everything a reader needs is not.
- #767676 is the lightest grey that passes 4.5:1 on white. #777777 fails, at 4.48:1.
- Never use colour alone to carry meaning. Pair red with an icon or a word, because about 1 in 12 men has some form of colour vision deficiency.
- Contrast on a photo changes across the image. Check the lightest part behind the text, or add a scrim.
Screen colour and print colour
Screens mix red, green and blue light (RGB). Presses lay down cyan, magenta, yellow and black ink (CMYK) on paper. The range of colours each can produce, the gamut, is different. Bright RGB colours such as electric blue, acid green, hot pink and vivid orange have no CMYK equivalent and come out duller in print. Uncoated paper dulls and darkens colour further because the ink soaks in.
- Convert with the printer's profile. They know their press and paper; a generic formula does not.
- If a colour must match exactly across jobs (a logo on packaging, say), specify a spot colour from a physical swatch book with your printer. Voidcanvas does not manage spot colours.
- Ask for a printed proof of any colour-critical job and judge it in daylight.
Do it in Voidcanvas
- Open Studio and choose Brand guideline builder, then the Colour tab.
- Enter your Brand colour as a hex value or pick it. Its ramp appears underneath, with a dot on the step your colour sits closest to. Adding a logo on the Identity tab can set this colour for you.
- Pick a Harmony: Analogous, Complementary, Triadic or Split complement. The Secondary and Accent colours are built from it, and generated ones are darkened or lightened until a label on them is readable.
- Set Neutral warmth to decide how much of the brand hue shows in the greys. A little warmth makes greys feel like part of the brand.
- Read the Contrast list. Each row shows a real pairing (body text, button label, accent links, tinted panels), its ratio and a grade: AAA, AA, AA large or Fail. Brand as text or icon is checked against 3:1; the rest against 4.5:1.
- Click the checks button in the header (it reads "All N checks pass" or "N issues") for the full list with the ratio each failing pair needs.
- Editing a colour locks it. New take only changes what is unlocked.
In the Editor, the colour picker has HEX, RGB and HSL fields. When a design has a brief, the Brief panel shows Selected text contrast for the selected text layer against its board or page colour, graded AAA, AA, large text only or too low. See Colour and swatches for the picker and swatches.
Common problems
- The accent looks weak next to the brand colour. They are too close in hue and lightness. Try Complementary or Split complement, or lock a darker accent.
- White text on the brand colour fails. The brand colour sits around step 400 or 500. Use a darker step (700) for surfaces with text, and keep the pure brand colour for large shapes.
- The print came back dull. The colour was outside the CMYK gamut. Ask the printer for a proof and choose a nearby colour that survives conversion.