The rule in one paragraph
WCAG 2.2 is the accessibility standard most organisations work to, and level AA is the usual target. For colour it comes down to contrast: how different two colours look in brightness. Contrast is written as a ratio from 1:1 (no difference) to 21:1 (black on white). Normal text needs at least 4.5:1 against its background. Large text (about 24px, or 19px bold) and the edges of controls such as inputs and focus rings need at least 3:1.
Three colours to choose
The brand builder asks for three colours and works out the rest:
- Accent: your brand colour, used for buttons, links and highlights.
- Ink: the colour of your text. If it is too light to pass, it is made darker until it does.
- Paper: the page background. Most brands pick a warm or cool off-white rather than pure white.
From those it builds every shade the components use, for light and dark mode: muted text, borders, button states, dark sections and the five offer level colours.
What the builder checks
Every pair of colours that carries text is checked, in light and dark mode. The ones that must pass include:
- body, muted and subtle text on the page and on cards;
- the accent used as link text on the page;
- every button label on its button, including the depth button at its darkest point;
- text on dark sections, warning text, and labels on each offer level colour.
Status colours, the focus ring and the strong border are shown as advisories: worth fixing, but they do not block the brand. The checks in the builder are the same code the kit's build runs, so a brand that passes in the builder will build.
A worked example
This site's own brand starts from a burnt orange accent, a near-black ink and a warm paper. The build measured:
| Pair | Ratio | Needs | Result |
|---|---|---|---|
| Body text on the page | 16.33:1 | 4.5:1 | Pass |
| Muted text on the page | 6.48:1 | 4.5:1 | Pass |
| Subtle text on the page | 4.57:1 | 4.5:1 | Pass, just |
| Orange links on the page | 4.85:1 | 4.5:1 | Pass |
| White label on a solid orange button | 5.46:1 | 4.5:1 | Pass |
| White label on the depth button, top colour | 4.80:1 | 4.5:1 | Pass |
| White label on the depth button, darkest point at 44px | 4.96:1 | 4.5:1 | Pass |
| Strong border on the page (advisory) | 1.85:1 | 3:1 | Below, advisory only |
Two things to notice. The subtle text only just passes, which is normal: it is the lightest text a brand is allowed. And the depth button is measured where its label is hardest to read, because the light glow along the bottom edge makes that part brighter than the top.
When a check fails
- A light accent, such as yellow or sky blue, fails as link text. Pick a deeper shade of the same colour for the accent and keep the bright one for decoration, or ask a developer to set a separate link colour in the brand file.
- The button label fails. A mid-tone accent is the hardest case: too dark for black text, too light for white. Move the accent a step darker or lighter.
- Dark mode fails but light passes. Check the dark preview: an accent that works on cream can be too dark on near-black. The builder lightens it for dark mode, but a very deep accent may still need a change.
- The paper is too dark. Body text needs room. A paper darker than a light grey leaves little range for muted text.
Beyond contrast
Contrast is the part a tool can measure. A few more habits keep colour accessible:
- Never use colour as the only sign of something. A required field gets a word as well as a red border; a price tier gets a name as well as a colour.
- Keep focus rings visible on every background, including dark sections.
- Check the brand at phone size in bright light. Low contrast that looks elegant on a desk monitor disappears outdoors.