Choosing colours for a website: your favourite may not be the right one
Colour choice isn't about taste; it's about readability and recognition. How to pick a brand colour and use it correctly on a site.
"I like blue, let's make the site blue." That sentence is the one designers hear most often and the one that causes the most trouble. Choosing colour is much more than personal preference.
Three colours are enough
A good palette consists of three roles:
Background colour. Covers most of the page. White, off-white or a very dark tone. Never saturated — it tires the eye.
Text colour. Must contrast strongly with the background. A very dark grey is usually softer and more readable than pure black.
Accent colour. Your brand colour. Used only on buttons, links and things that need to stand out. If it covers more than about 10% of the page, it stops being an accent.
Why the accent must be used sparingly
Emphasis comes from the calm around it. Make everything orange and nothing stands out. What draws the visitor's eye to a button isn't the button's colour — it's the absence of colour around it.
Contrast is not negotiable
Light grey text on a light grey background can look elegant but is unreadable. Someone looking at their phone on a sunny day won't see that text at all.
There's a measurable threshold: for normal text, the contrast ratio against the background should be at least 4.5:1. Free contrast checkers measure this in seconds.
Colour must never carry meaning alone
Saying "the red ones are out of stock" is meaningless to colour-blind visitors (roughly 8% of men). Always pair colour with a symbol or text.
If you're considering a dark theme
The same colours behave differently in dark mode. An orange that looks good on a light background can be glaring on a dark one — or the opposite, too dim to read.
Check contrast separately in both themes. On this site, the icon colour shifts to a slightly deeper tone in light mode, because the brand orange doesn't give enough contrast on white.
Where to start
If you have a logo, the palette is already there. Make the logo's main colour your accent and keep everything else neutral. If you don't have one, avoid the colour everyone in your industry uses — being orange in a blue industry is more memorable than being blue.
- #design
- #colour
- #branding
