A Website Designed Around the Owner's Favourite Colour

How the colour got there

At the first design meeting, someone asks the owner which colours they like. The owner names a favourite, and from then on it is everywhere.

It becomes the header and the footer, the colour of every heading and the fill of every button. Sometimes it becomes the background of whole pages, with white text on top.

The owner is pleased, because the site finally looks like theirs. Customers, meanwhile, squint at it on a phone in daylight.

Nobody chose badly on purpose. A question about taste was answered as if it settled a question about reading.

Where favourite colours cause trouble

• Pale backgrounds behind white or light text.
• Bright colours used for text, especially yellow, orange and light green.
• Buttons whose label barely stands out from the fill.
• Links in a colour too close to the body text.
• Dark backgrounds with thin light text across long pages.

Buttons do the most damage, because a button is where a visitor decides to act. A label that is hard to read on the one element meant to be pressed is a quiet way to lose enquiries.

Contrast can be measured

Whether text can be read against its background is not a matter of opinion. The difference in lightness between the two can be measured, and free contrast checkers do it in seconds.

WCAG 2.0, the usual benchmark for accessible websites, puts the floor for body text at 4.5 to 1 at level AA; large text can go down to 3 to 1.

Many favourite colours fail with white text on top. Mid greens, oranges, sky blues and most pinks fall short, though they look bold on a designer's large monitor.

A quick check needs no special tool: take a screenshot and convert it to greyscale. Text that fades into its background in grey is too close in lightness.

Real screens and real eyes

The designer's monitor is bright and indoors. Customers read on cheap laptop screens, on phones dimmed to save battery, and outside in the sun.

Each of those conditions makes weak contrast weaker, and pale colours wash out first. Eyesight matters too: sensitivity to contrast fades with age, and some customers cannot tell certain colours apart.

A colour scheme has to work for the customer with the worst screen in the brightest light, not for the owner at a desk.

Colours and the trade

Customers carry expectations about what a business in a trade looks like. A law office in candy pink feels wrong before a word is read.

Most of what is written about colours and emotions is guesswork. The more useful question is what the trade's customers are used to, and whether the site should fit in or stand apart deliberately.

The most reliable signal is consistency. A site in the same colours as the trucks, the sign and the invoices tells visitors they have found the right business.

Where the owner's colour belongs

Treat the colour as an accent rather than a background. It can fill the logo, a band across the header, section dividers, icons and the occasional large heading.

Buttons can carry it if the label passes a contrast check. If white text fails, try a deeper shade of the same colour, or dark text on the colour.

Body text stays near-black on white or a very light tint. Used this way the colour is more noticeable, not less, because it is no longer competing with itself on every surface.

A worked example

A feed and farm supply store on a rural highway had its site rebuilt three years ago. The owner's favourite colour, a soft sage green, became the background of every page.

The text was white in a light typeface, and the order and contact buttons were pale yellow with white labels.

Most of the store's customers check stock and hours on their phones, often from a truck or a paddock in full daylight. On those screens the pages were close to blank.

The counter staff noticed first. Callers asked questions the site already answered, and a few said plainly that they could not read it.

The redesign kept the green but moved it to a band across the header, the logo and the dividers between sections. Pages became white with near-black text, and the buttons turned dark green with white labels.

The owner approved it after comparing both versions on his own phone, in the store's parking lot, at noon.

Show the owner rather than argue

Contrast ratios rarely change anybody's mind about a colour they love. A side-by-side comparison usually does.

Put two versions of the same page on the owner's phone, take it outside, and ask them to read the prices aloud.

Offer shades of their colour rather than replacing it. Owners tend to care about the colour family more than the exact value, and a deeper version usually satisfies them.

Colour should not carry meaning alone

One more rule applies whatever the palette. Never let colour be the only signal, such as green for in stock and red for sold out, or links marked only by colour.

Add a word, an icon or an underline, so the meaning survives for customers who see colour differently.

The counter-case

Some favourite colours are perfectly usable. A deep navy, a dark green or a burgundy carries white text comfortably, and an owner who picked one of those chose well.

A business whose colour is already its brand, painted on vehicles and printed on bags for years, should keep it prominent. Recognition is worth something.

And a site for an artist or a designer can take more risks with colour, because the visual style is part of what is being sold.

Even then the text has to be readable. Keep the colour, move it off the text, and check every button.

Checking the colours

1. Screenshot your home page and a service page.
2. Convert both to greyscale and look for faded text.
3. Run each button colour through a contrast checker.
4. Read the site outdoors on a phone at midday.
5. Move the brand colour off body text and backgrounds.
6. Deepen any shade that fails with white text.
7. Match the colours on your signs and vehicles.

Step four is what ends the debate. A page that is readable in a parking lot at noon is readable almost anywhere, and an owner who has tried it rarely needs persuading.

Body text that fails for similar reasons is covered in grey text on white backgrounds.

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.