Colour Choices to Avoid When Designing a Website

The world is full of colour, and the human eye can pick up a variety of astounding hues. But does that mean you should paint your website in rainbows? Not necessarily. You can indeed go terribly wrong with colour choices for a website, which could in turn impact the user experience and drive visitors away. Gone are the days of gradients and poorly laid out sites. Now, you need to be careful and consider colour psychology when choosing a palette.

Here are the colour choices to avoid when designing a website:

1. Banish The Pure Black

You might be thinking, “But I see blacks used on websites all the time.” Yes, but have you ever really seen anything that’s #000000 everywhere? No. Pure black is jarring, because it’s unnatural. Not even Monet used pure black in his paintings, and that should tell you everything you need to know. If you want to use blacks, use #111111 (cod grey) or other similar colours. That will make the darker colours much more suitable for human eyes and make any text that is placed over the black much easier to read.

2. Light Colours On White

Want to give your visitors a headache? Then put pastels on white or off-white on white. There is nothing more irksome than trying to decrypt nearly invisible text on a blaring white screen. Remember, you have to balance darks and lights to create an environment that is easily readable and comfortable for the eyes. The best way to ensure you’re putting a dark enough font on your white (or light) background is to think about complimentary colours on the colour wheel.

The same goes for bright on bright and dark on dark. Any similar colour combination will create a clashing effect that is hard on the eyes. For example, fuchsia on magenta. Makes you frown just thinking about it, right? Even if you don’t think this slip up will happen to you, those who tend to use monochromatic schemes make mistakes by putting greys and greys and so on. Be careful and, when in doubt, use contrasting colours.

3. Neon Colours In The User Interface

Something about neon is mentally jarring and perplexing. The eyes tend to like glimpses of bright colour, and therefore you should only utilise neons when trying to make an attention-grabbing statement or artwork. On the user interface, though, neons tend to overwhelm, especially with used in bigger sections of the web design.

If you really need to use neon tones or have them as part of the logo or within the colour scheme of your company, you can remove some of the brightness by toning down the colour by a few shades. Further, you can use neon for smaller elements where the reader would need to see the text easily.

4. Avoid Christmas Colours

Even with the spirit of the holidays tying these two colours together, when it comes to web design, they are worse than siblings fighting over a toy and need a mediator. There’s a couple of reasons for this:

  • Users who have deuteranopia, or colour blindness, will have difficulty telling the difference between red and green.
  • Red and green are on opposite sides of the colour wheel and, therefore, naturally clash.
  • Strong psychological associations with red and green will make it difficult for people not to anticipate Christmas or traffic signals or Stop/Go connotations.

5. Rainbow Themes

Anything that breaks away from colour theory and colour psychology is going to be dangerous down the road. Even if you’re a rainbow-themed store, you need to be extremely precise in where the rainbow elements are placed. If you want to produce a beautiful web design, remember that you shouldn’t go over 4 colours on a page and use colour blocking. While you can go from red to purple to blue, throwing yellow and green in there will cause colour vibration and unsettling lack of balance.

6. Yellow and Blue

The worst offence that is still made today is the combination of pale yellow and bright blue. Bright blue as a background is difficult, first, because it leaves you with little to work with. Bright blue also tends to create vibrations with other colours, like yellow, making it an unpleasant sight. The same applies to yellow—except yellow as a background is infinitely worse. Yellow is like throwing your whole brand into a pile of rubbish. Just don’t do it.

Instead, you can pair bright blues and yellows with more earthy tones. Yellows pair well with dark reds and oranges for a retro look, while lighter blues can make for a breathy page.

Like green and red, never mix the two together.

7. Ignoring Web Safe Colours

Everything that has been hinted to so far is that there is a level of acceptability in UI design that you shouldn’t ignore. “Web safe colours” is a term many graphic designers and website designers know. Some people think the practise is outdated, but that couldn’t be farther from the truth. Web safe colours help everyone see colour the same way and get your intended message across more effectively.

Web safe colours are “colours that are deeply encoded into the browsers and display uniform, consistent, and in a non-dithered manner on any computer monitor that supports 8-bit colour and above,” as defined by BrightHub.

In other words, some computers display colours differently than others. An Apple might show more oranges while a Dell shows more reds. This means that you should consider 2-4 of the 216 web safe colours that don’t get distorted when constructing a website.

Even if the idea of using “simple” colours offends you, remember that you’re not trying to win an art award. You’re trying to make a clean user experience for the visitors.

There you have it—7 colour mistakes to avoid when designing a website. Keep these in mind so you don’t commit a design sin or offend your visitors. By applying rules of colour psychology and using colours that are mainstays, you can create a clean website that is both beautiful and functional.

Scroll to Top