6 reasons why one-colour branding can be bad for usability

By Debré Barrett

We often work with corporate brand guidelines that specify in detail what the brand is about: from fonts and colours, to how you’re allowed to use the logo on a T-shirt.

skype-forbidden

Skype explains how not to use their logo. 

These guidelines usually contain a single page for how the brand should be represented on the web, which is fine – it means the web designers have some room for interpretation.

But there is one frequent oversight in brand guidelines when it comes to web use: not enough colours.

If your branding specifies only 1 colour, or 1 colour with black or grey, a variety of usability problems can happen.

1. It makes it difficult to design primary and secondary buttons

On complex transactional pages, there are often 2 important things going on: you have to do a variety of stuff on the page, and then you have to move to the next step. (For example, you might have the option to upload documents before going to Step 4 of a transaction.)

At Flow, we like to use primary and secondary button styles for this. The primary button is the big one that moves you on to the next step. You have to press it or you can’t complete the transaction.

The secondary button is usually something that is optional. It’s a secondary action. Some people take it, some don’t.

buttons

These two buttons shouldn’t look the same. And you can’t make them look very different if you’re only allowed to use one colour.

2. Grey becomes your only option

Grey becomes your only option

The Easy group’s colour palette. See their brand manual (pdf).

If you have a brand with 1 colour, and grey or black specified as secondary colour, designers often end up using grey buttons to avoid overuse of the primary colour. Grey buttons look greyed-out. People don’t click on them because they think they won’t work.

3. It’s impossible to create a complex graph

Let’s say you want to compare the performance of 4 different unit trust funds against a benchmark. You need 5 lines on a chart. If all 5 lines have to be the same colour, how will you know which fund is which?

Old Mutual (who used to suffer from the one-colour problem) recently refreshed their brand and added a secondary colour palette particularly for use in graphs.

This is their primary palette:

primary-palette

And this is the secondary palette:

secondary-palette

This means designers have 7 colours available for graphs, which is more than enough in most situations, even complex financial ones.

4. Links and headings often end up the same colour

If a brand only uses one colour, there are two risks with links:

  • The links are the same colour as the text, giving no affordance that they are links. One of the most basic usability mistakes you can make.
  • The links are the same colour as headings. Another Usability 101 mistake. If links and headings are the same colour, users often mistakenly try to click on headings because they believe them to be links.

Virgin atlantic screenshot

Virgin Atlantic. Which of these words are the links?

5. Bad things happen when your only colour doesn’t comply with accessibility guidelines

We’ve worked with a brand where only one colour is allowed, and that colour contravenes the WCAG accessibility guidelines when used as text on a white background. Or in plain language: the colour is too light for people to read.

For me this is a no-brainer: being able to read the text on your site is more important than replicating the exact shade of yellow you use in your logo. You can check whether your colours comply with Jonathan Snook’s Colour Contrast Check.

Colour contrast screenshot

6. It makes my eyes hurt

If you spend enough time on a one-colour branded website, it starts feeling like that colour is burning into your very soul. Granted, at Flow we often spend the entire day on the same site, particularly when we’re doing heuristic evaluations. Most users won’t do that.

pak-n-save screenshot

But you also don’t want users to leave after a short while because they’re subconsciously overwhelmed by the sheer amount of green on your site.

If you’re responsible for the corporate identity of a big name, remember the web. Designers need more than one colour to make good websites. And if you don’t specify those colours in your brand guidelines, they will come up with their own. No doubt they will come up with good colours, but for a big corporate with multiple digital products, that means lots of designers across the business choosing their own secondary colours. Put a stop to that by giving them a useful set of secondary colours to work with from the start.

Branding style guides from around the world:

Brand identity style guides from around the world on LogoDesignLove 20 inspiring branding guides on Web Designer Depot