How to Create a One-Page Brand Color Usage Guide

Your one page should answer four working questions

A row of swatches answers “what are our colors?” It does not answer “what color is the caption?” or “can white text go on this accent?” Those unanswered decisions are often where a consistent-looking palette becomes difficult to use.

1. What is each color for? Name reading surfaces, text, action appearances and decoration.
2. Which pairs are allowed? Record the actual foreground and background, with the context checked.
3. What does a finished example look like? Show a heading, paragraph, supporting line, link and action label.
4. What remains to be reviewed? Include a version, implementation checks and a person or team responsible for changes.

“One page” is a constraint on the brief, not a claim that it replaces a complete design system. Start with the touchpoint you use most, such as a service page, newsletter or product card. A complex dashboard, packaging range or multilingual service may need supporting specifications.

The example here is for fictional Northline Studio. Its colors and role assignments are original demonstration choices, not a documented rebrand or a promise that a particular hue changes sales.

Assign roles before choosing a percentage rule

Use names that make a decision. “Main surface” tells someone where copy sits; “supporting text” tells them how a caption differs from body copy. A poetic color name can remain in the palette, but it should not replace the role.

There is no requirement to use every color equally, nor does a 60/30/10 allocation establish usability. Let the actual layout determine area. A long article needs a large reading surface; an action label needs a legible pair. Decorative accent use can stay small without a precise percentage quota.

Keep an error or selected-state meaning separate from a decorative brand role. If an accent also indicates status, specify the accompanying visible label or shape and check that presentation separately.

Edit the example and export your usage record

Enter a project name, status note and six-digit hex values. The preview and four text-pair results update together. Export the record when the fields are valid; an export can include below-threshold pairs, so review the result labels before adopting it.

The checks use solid, opaque sRGB colors and the WCAG relative-luminance formula. They do not account for text over photographs, gradients, transparency, dark mode or every interface state.

Status: Draft 1 — implementation checks pending

4 of 4 ordinary-text pairs meet 4.5:1. This is a pair check, not a complete accessibility review.

Prefer to work in a document? Download the blank editable usage record. Add approved pairs and implementation notes as you test your real layout.

Record the pair, not just a passing color

A color does not pass a contrast test in isolation. Foreground and background must be specified together. The editor checks ordinary body text, supporting text, an action label and an underlined link against their stated surfaces.

WCAG 1.4.3 Contrast (Minimum) generally requires at least 4.5:1 for ordinary text and images of text, with defined exceptions. Large-scale text uses a 3:1 threshold; that category generally starts at 18 point regular or 14 point bold, with equivalent-size considerations. “It is a heading” alone does not make text large-scale.

The editor deliberately uses the ordinary-text threshold for all four pairs. Read the status alongside the displayed ratio: the number is rounded for display, but the decision uses the unrounded result. A value below 4.5 does not meet the threshold simply because rounding produces 4.50.

Do not transfer the action-label result to white body copy on the light surface, or assume that the decorative accent can replace the tested link color. Add another allowed pair only after checking its actual colors, text size and context.

A logo has a specific exception under this criterion, but ordinary text elsewhere does not gain that exception because it follows brand guidelines. A logo swatch should not silently become a low-contrast paragraph color.

Write rules that prevent the next person from guessing

Keep rules short enough to apply while making a real asset. For this example, useful rules are “body and supporting text use the main surface,” “links stay underlined,” and “the accent stripe carries no information.” They describe actual decisions rather than a mood.

Add a few exclusions: no untested light text on a light surface, no accent-colored small caption without a checked pair, and no color-only error or selection meaning. The WCAG Use of Color explanation calls for information beyond color when color alone would communicate meaning. Visible wording, shape or another suitable visual cue can help.

For example, “Selected: Monthly plan” is clearer as a rule than “make the chosen plan gold.” An error should identify the field and problem, rather than leave the reader to infer meaning from a red border. A legend should name the categories, not just show different colored dots.

The distinction matters even when a screen reader receives an accessible name. A visible alternative is still useful to sighted people who cannot distinguish the colors. Your guide should explain the visible design as well as the values copied into it.

Check the implemented component and its states

The editor shows a text and color example; the filled label is not a complete button specification. A real action also needs understandable wording, operability and the relevant interaction checks. Test the actual page or component, not only the sheet.

WCAG 1.4.11 Non-text Contrast addresses visual information required to identify controls, states and meaningful graphics, generally at 3:1 against adjacent colors. That does not mean every decorative line or every button fill has an identical requirement. Determine which visual information is needed in the component.

Check keyboard focus, hover, selected, error and disabled presentations individually. A passing default text pair does not supply a focus indicator. Nor does a comparison between default and hover colors replace checking the colors that actually sit next to each other in each state.

If someone introduces a photograph, translucent panel or gradient, the flat-color result is no longer a complete description of the background. Record that change and assess the implemented presentation. Treat a dark theme as its own set of roles and pairings, rather than reverse every color automatically.

Keep the palette sheet’s status honest. “Four ordinary-text pairs checked” is a narrower and more useful statement than “website accessibility approved.” Contrast is one requirement among many.

Keep digital values and print approval separate

The editor records solid sRGB values for digital use. It does not generate a universal CMYK match, spot-color equivalent or production approval. Ask the print supplier what files, profiles, stock and proof process the job requires.

Make a separate print note for the actual menu, card or package. Include the supplier, material and proof status, and retain a sample or approved file reference when appropriate. A digital contrast ratio is not a measurement of ink on paper.

For digital handoff, record the page or component tested at its intended text size. For print handoff, record the actual production conditions. This keeps a single hex value from being mistaken for proof that every medium will reproduce the same appearance.

Finish with a version and a small change procedure

Give the sheet a name, version and status. Put “checks pending” beside incomplete work rather than leaving a blank that someone might interpret as approval. Record who maintains the palette and what should trigger another check.

Changing a supporting shade: recalculate its pair against the main surface, inspect the real captions and update the allowed-pair record. A darker swatch is not a substitute for checking the number and implementation.

Adding a campaign accent: state its job and keep existing reading pairs intact unless the design changes them. If the accent begins carrying text, status or a meaningful icon, its earlier decorative role no longer describes the use.

Adding a dark theme: write the new surface, text and state pairs separately. Do not mark the light-theme calculations as evidence for the dark version.

Before handoff, confirm that another person can find the right text color, copy the correct background, see a working example and identify unfinished checks. That is the practical test of whether your one-page guide is useful.