Colour shapes how visitors feel about your brand and how easily they can use your website's design. Get it right and the site feels professional and easy to read; get it wrong and visitors struggle to read text, miss buttons or leave. Here are the colour choices to avoid in web design, why they cause problems, and what to use instead.
The Rule That Matters Most: Contrast
The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios between text and its background: at least 4.5:1 for normal body text and 3:1 for large text (roughly 24px, or 19px bold) at the AA level. Buttons, icons and form borders also need enough contrast to be seen. Free online contrast checkers will tell you the ratio for any two colours.
1. Light Text on a Light Background
The most common web design mistake is pale text on a pale background, such as light grey on white or yellow on cream. It can look soft and elegant on a designer's high-end screen, but on a phone in sunlight, an older monitor or for anyone with weaker eyesight, it becomes hard or impossible to read. Light text on a busy, detailed photo has the same effect.
Use instead: dark text on a light background, or light text on a dark background, that passes 4.5:1. Place text over images only with a solid or semi-transparent overlay behind it.
2. Too Many Neon Colours
Neon can be fun in small doses, but screens are backlit, so digital colours appear brighter than on paper. Large areas of neon are tiring to look at and pull attention away from your content.
Use instead: keep neon for small accents if it suits your brand, and check colours on several real screens, not just a design file.
3. Bright Colours Placed Side by Side
Colours do not have to be neon to overwhelm. Strong, saturated colours of similar brightness placed next to each other, such as red and green or blue and orange, can create a "vibrating" effect where edges seem to shimmer, which strains the eyes. Red and green together are also hard to tell apart for people with the most common types of colour blindness.
Use instead: pair a bright colour with a neutral (white, off-white, grey or a dark tone), and never rely on colour alone to show meaning, such as an error. Add text or icons as well.
4. Rainbow Themes and Too Many Colours
Using every colour of the rainbow is overwhelming and makes it hard to tell what is important or clickable. Unless a multicolour look is central to your brand, it distracts from your content.
Use instead: a simple palette, with one main brand colour, one or two accent colours and a set of neutrals. A common guideline is the 60-30-10 rule: about 60% neutral background, 30% secondary colour and 10% accent for buttons and highlights.
5. Inconsistent Button and Link Colours
If links and buttons change colour from page to page, visitors cannot learn what is clickable. Using your accent colour for decoration as well as for buttons has the same effect.
Use instead: one consistent colour for links and primary buttons, used for nothing else, with a clear hover and focus state.
Quick Colour Checklist
- Body text meets at least 4.5:1 contrast against its background.
- Text over images has an overlay or solid background.
- The palette has one main colour, one or two accents and neutrals.
- Buttons and links use one consistent colour.
- Meaning never depends on colour alone.
- Colours have been checked on real phones, outdoors as well as indoors.
Colour is one of three core principles we cover in navigation, hierarchy and colour, and one of the 10 elements of web design. If you would like a professional review of your site's colours and readability, our website design team can help.
