How to make a one-page brand guidelines sheet, with the colour pairs that pass

Most brand sheets answer the question a client asks, “what are our colours?”, and skip the one a developer asks next: “which of these can I put text on?” A one-page sheet can answer both, and the second answer is the part that stops the brand being misused.

What a minimal sheet needs

Four things, and each one is there because someone downstream will act on it:

• The logo, as a file. The sheet points at it; it does not redesign it.
• The palette, each colour named by its role and given as a hex value, so nobody has to sample it from a PDF.
• One type pairing: a heading face and a body face. Listing three options guarantees that none of them is followed.
• An approved-combinations matrix, which is the section most templates leave out.

An approved-combinations matrix is a grid showing every brand colour set as text over every other, with the measured contrast and a pass or fail for each cell. It turns a palette into guidance, because five hex codes tell a developer nothing about which may carry text on which. Published guidelines from UCLA, GOV.UK, IBM’s Carbon system and Scope all contain one, with the failures marked; UCLA labels them DNP, for “does not pass”.

What a one-page sheet can leave out is generated brand-voice copy and a mission statement written by a tool. An empty field for those is more honest than filler.

Make the sheet with the tool

1. Open the Brand sheet generator and choose a start. I have a logo reads up to four distinct colours straight out of the image (PNG, JPEG, WebP or SVG). Start from scratch opens with a four-colour palette you can overwrite.
2. Type the name into Brand name.
3. In Palette, set each colour with its swatch or its hex field, and rename it. Add takes the palette up to six colours and Remove down to two. If you started from a logo, check the names: the colours are labelled Primary, Ink, Surface and Accent in the order they were found, not by the job they do.
4. In Typography, pick one pairing. The filters across the top (All, Modern, Editorial, Technical, Warm, Classic, Expressive) narrow the list, and Explore all 16 pairings shows the rest. Every face is on Google Fonts under the OFL.
5. Read Approved combinations. The line under the heading counts the failing pairings. The table has four columns: Text on background, WCAG, APCA and Use instead. Under the table, any pair of colours that collapses under simulated colour blindness is named.
6. Export from the bar at the bottom: PDF for an A4 document to send, PNG for the sheet as one image to drop into a deck, and Tokens for the colours as W3C DTCG JSON. Save here keeps the sheet on this device.

Include the colours you suspect will fail. A matrix with the awkward colours left out is not a guideline.

A four-colour matrix, worked through

The tool’s starting palette is a useful test case because it looks safe: Primary #2563EB, Ink #0F172A, Surface #FFFFFF and Accent #F59E0B.

Each cell is a WCAG contrast ratio: (lighter luminance + 0.05) ÷ (darker luminance + 0.05). The relative luminances of the four colours are 0.1532, 0.0088, 1 and 0.4389. Four colours give 4 × 3 = 12 cells, because “Ink on Surface” and “Surface on Ink” are separate rows. The ratio is the same both ways round, so here are the six distinct pairs:

Pair	Arithmetic	Ratio	Verdict
Ink and Surface	1.05 ÷ 0.0588	17.85:1	AA
Ink and Accent	0.4889 ÷ 0.0588	8.31:1	AA
Primary and Surface	1.05 ÷ 0.2032	5.16:1	AA
Primary and Ink	0.2032 ÷ 0.0588	3.45:1	Large text only
Primary and Accent	0.4889 ÷ 0.2032	2.40:1	Does not pass
Surface and Accent	1.05 ÷ 0.4889	2.14:1	Does not pass

So the line above the table reads “6 of 12 pairings fail AA for body text”. Half the palette’s combinations cannot carry body text, and the one that surprises people is the accent: amber on the white page background measures 2.14:1, nowhere near the 4.5:1 that body text needs. It is a fine fill for a badge or a button with dark text on it. It is not a text colour on white.

The ratios are truncated rather than rounded. 1.05 ÷ 0.2032 is 5.167, shown as 5.16:1, so a pair at 4.499 can never display as 4.50 and appear to pass.

The substitute column

Marking a pair as failing is half a guideline. The other half is what to use instead, and “pick another colour” is not an answer when the colour is the brand.

Each failing row carries a substitute, where one can be found, by holding the text colour’s hue and searching its lightness for the nearest value that clears 4.5:1. The cell means “this colour on that one”, so it is always the text colour that gets replaced, never the background. The substitute still reads as the brand colour, because hue is what makes a colour recognisable and lightness is what drives the measurement. That separation is covered in depth in how to fix colour contrast without changing your brand colour.

The PDF carries the same table with three verdicts, AA, Large only and DNP, and the substitute hex wherever there is one. The APCA column stays on screen.

Where a passing matrix stops

A matrix full of passes is a palette that will not fail on contrast. It is not an accessible brand, and three limits are worth printing on the sheet itself:

• “Large text” has a definition. WCAG counts text as large at 24px and above, or 18.66px and above in bold. “Large text only” pairs belong on headings, not on captions.
• The APCA figure is computed for 16px at regular weight. It is the better predictor of whether body text is readable, which is why it sits beside the WCAG ratio rather than replacing it.
• Contrast is one criterion. WCAG 1.4.1 separately requires that colour is never the only way information is shown, which no palette audit can check. The colour-blindness line under the table is a prompt for that, and how to build a colour-blind safe palette goes further.

Other ways to do it

There is no built-in operating-system method for making a brand sheet or its matrix. By hand, it is a spreadsheet: one row and one column per colour, the diagonal left empty, and each remaining cell measured in a contrast checker such as the Contrast checker. The cell count grows quickly. Four colours make 4 × 3 = 12 measurements; six make 6 × 5 = 30. Finding a substitute for each failure by hand means nudging lightness and re-measuring until it passes.

Checking nothing was uploaded

A logo you add is read into a canvas in the tab, and the PDF and PNG are built there too. The code that writes each export is downloaded the first time you press the button, which appears in the developer tools Network panel as a script request coming in. Watch the same panel while you add your logo and export: nothing goes out carrying the image or the palette.

Next

Open the Brand sheet generator with the palette exactly as it was handed to you, and read the failing rows first. They are where the document earns its place.