Colour Contrast in the Brand Palette

Elegant on the designer's screen

The palette was chosen with care: soft grey body text, gold headings, plenty of white. On a large monitor in a bright studio, the site looks calm and expensive.

On a phone held at arm's length outdoors, the grey text fades into the background and the gold headings almost disappear.

For a visitor in their sixties, or with any loss of vision, the page is hard work in any light. Some will read it anyway. Some will leave without realising why it felt like effort.

Who struggles with low contrast

• People with low vision, most of whom use no special software.
• Older visitors, whose eyes need more contrast to read comfortably.
• Anyone on a phone outdoors, with glare washing out the screen.
• Visitors with colour blindness, when colour alone carries the meaning.
• Old or cheap screens, in offices, waiting rooms and hand-me-down laptops.

The third is the one that changes minds in a meeting. Not everyone has low vision, but everyone has squinted at a phone in the sun, and a palette that fails there fails every customer some of the time.

The standard and the numbers

The accessibility guidelines most rules point to, WCAG, measure contrast as a ratio between the lightness of the text and of its background. Black on white is 21 to 1; white on white is 1 to 1.

Version 2.1, published last June, keeps the long-standing minimum: 4.5 to 1 or better for ordinary text, and 3 to 1 for large text, roughly 24 pixels and up, or about 19 pixels if bold.

It also adds a requirement for things that are not text. Form field borders, focus outlines and icons that carry meaning need at least 3 to 1 against whatever surrounds them.

Where brand palettes fail

Light grey body text is the most common failure. A light grey such as #999999 on white comes out below 3 to 1. The lightest plain grey that passes on white is #767676, noticeably darker than most designers' first choice.

Gold and yellow come next. A typical metallic gold on white is about 2 to 1, short even for a headline.

Then come white text on pale buttons, placeholder text inside form fields, text laid over photographs, and thin typefaces, which make even a passing colour feel fainter than its ratio suggests.

Checking your own site

Free contrast checkers take two colours and return the ratio, with a pass or fail against each level. Chrome's developer tools show the ratio too, for any text you inspect.

Check every pairing the site actually uses, not just the main one: body text, links, buttons, the footer, form labels, placeholder text, and any text on a coloured band or a photograph.

Write the results in a short table with the colour codes. It becomes the reference for the fix, and for whoever adds the next page.

A worked example

An interior design studio had a site in its brand colours: body text in a pale warm grey, headings and links in gold, all on white.

A long-standing client mentioned, kindly, that the site was only readable with the screen brightness turned all the way up.

The checker explained why: the body text came out under 3 to 1, and the gold headings close to 2 to 1.

The studio did not want a different brand, and did not need one. The body text moved to a dark warm grey that keeps the same tone and passes comfortably.

Large headings moved to a slightly deeper gold that clears 3 to 1. The original gold stayed for thin decorative rules and a band behind the footer, with dark text set on it.

Links became a deeper bronze from the same family, underlined in body text. Side by side, the two versions look almost the same until you try to read them.

Adjusting without abandoning the brand

A brand colour is usually a hue rather than a single exact shade, and the fix keeps the hue while changing how dark it is wherever it carries text.

Give each brand colour a text version: the same colour, darkened until it passes on white, or lightened until it passes on a dark background. Most palettes need nothing more than a second column in the style guide.

Use the original shades where the rules allow: large display type that still clears 3 to 1, backgrounds behind dark text, decorative lines and illustrations.

And reverse the question for buttons. White text needs a button colour dark enough to carry it, which usually means the deeper shade of the brand colour rather than the pale one.

Colour should not carry meaning alone

Contrast has a companion rule: colour should never be the only way something is shown.

A link marked only by being gold, an error shown only by turning a field red, a required field marked only in orange: each is invisible to some visitors with colour blindness.

The fixes are small. Underline links in body text, write the error in words beside the field, and mark required fields with a word or symbol as well as a colour.

What the logo is allowed to do

Logos are exempt. The guidelines place no contrast requirement on text that is part of a logo or brand name, so nothing here asks you to redraw it.

Pure decoration and buttons that are switched off are exempt too.

That leaves the logo as the fixed point and the text around it as the part to adjust, which is usually the order a business prefers anyway.

The counter-case

Not every pale colour on a site is a problem.

Decorative flourishes have no requirement at all, large display type needs only 3 to 1, and the stricter 7 to 1 level is a goal for some sites rather than a general expectation.

A business whose customers are mostly young and indoors will hear fewer complaints, though it still loses the people who read in the sun and never mention it.

The minimum for body text is not a matter of taste: 4.5 to 1, with the original brand colours kept for everything that does not need to be read.

The palette check

1. List every text and background pair on the site.
2. Measure each ratio with a contrast checker.
3. Mark anything under 4.5 to 1 for body text.
4. Create a darker text shade of each brand colour.
5. Keep original shades for large or decorative uses.
6. Check field borders and icons at 3 to 1.
7. Add both columns to the style guide.

Step four is the one that saves the brand. Most palettes fail because one shade was asked to do every job, and a darker partner for text lets the original keep the jobs it does well.

The same problem for the mark itself is covered in a logo that only works on white.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.