20 colour tips for web pros

20 colour tips for web pros

Here are some things to keep in mind when planning the colour scheme for your website. Remember that there are always some superb exceptions to the rule (see 13), so don’t be afraid to experiment…

  1. Contrast. Background colour should be a single wash and have plenty of contrast with the text. Black – or dark grey – text against a white background remains the most sensible option.
  2. Avoid patterns behind text. This is the main problem with many of those user-customised MySpace profiles.
  3. Links. I firmly believe that links should be coloured blue, largely because the web’s most popular websites typically use blue (Google, Yahoo, BBC, New York Times, eBay, etc). Why reinvent the wheel?
  4. Clicked links. The vast majority of websites change the colour of a visited link to help users navigate. So should you. Maroon is a common choice for clicked links. Avoid applying these settings to your primary navigation.
  5. Limit your colour choices. The consensus opinion with regards to colour and web design seems to be one of ‘the fewer the better’. Use colour sparingly if you want it to grab the eye. Colour can be persuasive, but not if it is lost among a rainbow.
  6. Shades. Many websites use a blend of neutral colours and a range of shades of their main colour choice/s. This is easier on the eye than trying to work with multiple primary colours. I’m currently a big fan of grey. Note that some people struggle to pick out differing shades of blue.
  7. Add 30% more white space. By spacing out content units and blocks of colour you’ll help guide the eye to key areas. I’d wager that lightly-coloured landing pages with one brightly coloured ‘buy now’ button will convert better than a page featuring a mess of colour. Make that button stand out! Go on, try it…
  8. Be ‘web safe’. Macs and PCs both render colours differently, as do browsers. You should use ‘web smart’ colours to minimise issues.
  9. Clashing colours. Nobody wants to read green text on a bright red background. Avoid bad colour combinations.
  10. Branding. Make sure you consider brand guidelines and use matching or complementary colours throughout your website.
  11. Take extra care when using light text on dark backgrounds. Not recommended for publishers, but it works for some websites. Here, you should increase the leading, tracking and decrease the font weight. Why? Because there is greater contrast with white on black, compared to black on white. But for news sites and blogs with lots of content, this doesn’t work so well.
  12. Use gradients and shadows. Ok, this is a bit Web 2.0-ish, but it works. I’ve seen websites relaunch with barely anything changed except the addition of some sexy gradients, or a drop shadow below the logo. This can add a lot of depth to a site, making it appear less 2D.
  13. Consider some colour coding. I love the brashness of colour in the navigation of the new Guardian website – they have ripped up the rulebook somewhat, but then we don’t do rules, do we? The typography works, and there’s plenty of white space on these colour-coded channels. It is a stand-out example, and shows how well this can work. It’s not just about colouring up channels: note how Techcrunch authors have their comments colour-coded when replying to reader comments.
  14. Try a little opacity. If you insist on using patterns, or placing text in front of images, try reducing the opacity of the background pattern (or part of the image where the text is placed) to lighten the colours. This will achieve greater contrast for the text in the foreground.
  15. Use richer colours for prominent items. My favourite buy-it-now button is bright red, placed against a white background.
  16. Avoid fluorescent craziness. This is the web, dammit, not a Stabilo Boss catalogue.
  17. Remember the role of images. Pictures can add a lot of colour and depth to web pages. Keep this in mind when working on the wireframes / early designs of a website, as if you’re using test content (‘Lorem Ipsum’) you won’t necessarily factor in images. Don’t overcompensate with colour at this early stage.
  18. Going global? Where do your existing and prospective customers live? Which market are you targeting? There are plenty of cultural considerations to factor in when choosing colours.
  19. Demographics. If your audience is elderly then some usability experts suggest that brighter colours may be a good idea. On the other hand, if your website is mainly used by children then you could introduce lighter shades and pastels.
  20. Does it fit? Green is for the environment. Pink is for maternity leave. Blue is for corporate sites, etc. I’m not sure these observations are anything more than generalisations, but an eco-friendly site heavy on hot pink might look a little bit odd.

More To Explore


Ethical Search Engine Optimization

A search engine is an internet tool that enables us to search for any information or any other form of data. Ethical means something that