How do I make a colour palette for a website?
Start from one colour: your brand’s primary, or the background you want. Every other colour follows from it: a background or a primary to go with it, text dark or light enough to read, containers a step away from the page, and text for each container. This tool works them out and checks each pair’s contrast.
Given a primary, the tool makes a near-white background for the light palette and a near-black one for the dark, both with a trace of the primary’s hue. Given a background, it makes a primary in the background’s own hue, or a near-black one for plain white or grey.
Switch between Light and Dark to get both palettes from the same colour. In the dark one, a primary too dark to show on the dark page is lightened until it stands out at 3:1. Only the lightness of each colour changes, so the palette stays one family.
What each colour is for
| Text | Headings and body text. Aims for 7:1 even at AA, so long text is easy to read |
|---|---|
| Muted text | Captions, dates and hints. Exactly as light as the level allows |
| Text on primary | Button labels and icons: near white or near black, whichever reads better |
| Link | Links and icons, on the page and in every container: one colour, your primary when it passes on all of them, else the nearest shade that does |
| Container | Cards, panels, menus and dialogs |
| Link in container | Only when no one link colour reads everywhere, which happens on mid-tone backgrounds: a link for each container, fitted to it |
| Primary container | Callouts, selected rows, badges: a pale (or deep) version of the primary |
| Border | Edges of inputs and other controls, at 3:1 as WCAG asks |
| Divider | Lines that only separate, which need no contrast |
Contrast levels
WCAG 2's contrast ratio runs from 1:1 (the same colour) to 21:1 (black on white). Level AA asks for 4.5:1 for normal text, and 3:1 for large text and for whatever identifies a control. On a button that is its label or icon, measured against the button’s own colour, so the button needs no 3:1 against the page. Controls with nothing inside, such as inputs, checkboxes and switches, need their outline at 3:1: that is the Border colour. Level AAA asks for 7:1. Most laws and guidelines, such as the European Accessibility Act, point to AA.
Beside each ratio is APCA's Lc, the method proposed for WCAG 3. It is negative for light text on dark. Lc 75 or more suits body text, 60 large text, 45 headings.
Questions
WCAG 2 level AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and the edges of controls. Level AAA asks for 7:1 for normal text.
Enter the background here and choose Background: the tool finds a text colour in the same tint, as dark or as light as it needs to be to reach 4.5:1 (AA) or 7:1 (AAA), and shows the ratio.
Mid-tone colours such as bright green, orange or light blue are too light for white text and too dark for black text to reach 4.5:1. The tool suggests the nearest shade of your colour that works with white or dark text.
APCA is the contrast method proposed for WCAG 3. Its Lc value takes into account that light text on dark reads differently from dark text on light. Lc 75 or more suits body text, 60 large text.