Web Design and the Use of Colour

Written by: JBi Digital

Published on: 03.08.12

Time to read: 5 Minutes

We all love a bit of colour, and any good web design agency will know just how to use colour to best effect in their web designs. Clever use of colour can really lift a website from the ordinary to the extraordinary. Get it wrong, and it could end up doing more harm than good. With this in mind, let’s take a look at some useful tips for creating colourful websites.

Usability in web design

As with so much else in the world of web design, one of the key roles of colour is to do with usability. It’s important that you check to make sure your site is usable and that the choices of colour help the user rather than hinder them. You don’t want your site to be filled with colours that are hard to read. Some colour choices could even lead to web users straining their eyes to read what you’ve written, so this is definitely an issue worth paying attention to. You also have to think about the visually impaired in this scenario.

It’s about contrast

Contrasting colours can be very useful in web design as they can make the text on your site much more readable. It sounds fairly obvious that you shouldn’t blue background with blue text only a few shades lighter or darker. The contrast shouldn’t be too strong though. Grey text on a white surface is always better than black.

Think about the links

Something else to think about when you are creating a colourful website is the links you might have on your site. It can be helpful for them to either be in a different colour or otherwise highlighted (such as by underlining them) so it is clear where they are. It can be frustrating for users to know that there’s a link on the page somewhere, but not be able to find it. Make sure your choice of link colour is appropriate. A slightly darker/lighter shade of your main font colour is often a good choice.

Don’t be too colourful

We all love colourful websites, but too many colours can push a website over the edge and it can end up looking garish and confused. It’s usually better to employ a carefully considered colour scheme throughout the site. This is one of the ways your web design agency is able to create consistency in the design. It doesn’t stop you from using multiple bright colours, but it does mean that you need to think carefully about the quantities you choose.

Think about the text

This is a subject we’ve already touched on. There’s little point in creating high quality written content to go on your site if it is almost impossible to read once it’s there. A clear background behind the text usually works well (a coloured background is fine, but patterns or images can get in the way and make it harder for the eye to focus).

Consider the shades

One popular option for colourful websites is to use just one or two main colours, but then utilise different shades of those colours. If a good web design agency should be able to create an exciting, interesting website with just a few basic colours, so don’t be afraid of sticking to a couple of main options.

Consider the branding

If you are looking for colour inspiration for your site, one great place to look for it is your company branding. For instance, many sites take the inspiration for their colour scheme from the colours in the company’s logo or related graphics. This can also give you a good place to start when deciding which colours you want to avoid. It will give you an idea of what is likely to clash or look out of place against your existing branding.

Think about social media

You no doubt will have seen that many sites have their own bespoke social media link buttons. These can be a great opportunity for a splash of colour, but while you want to make sure they stand out, they also shouldn’t look out of place. You should have good social media buttons that you can compliment your website design. Don’t know where to find social media icons? Icon Archive is a good place to look.

White space is OK

Even if you are really keen on a bright and colourful website, don’t forget that white space is allowed too. In fact, white space can help you make the most of the colour that is there and act as an interesting design feature. It can help your colours stand out more, which is particularly great for webpages with a call to action (e.g. product purchase page or email newsletter sign-up page). You could have a fairly simple page design, with just a hint of colour for the important action information.

Be careful with light on dark

While light text on dark backgrounds can look really good and be fantastic for some sites, it doesn’t always work for others. Don’t force it if it doesn’t seem to be going right. Your web design agency should be able to advise you on the best options for your site.

Images are important

Often when we talk about colour in web design, we mean the background, text, and the general colour scheme. However, don’t forget that images are an important source of colour, and can be a great way to make an otherwise fairly simple site much more colourful.

Steer clear of fluorescents

Most websites do this naturally, but it’s a good idea to steer clear of fluorescent colours. They might work for highlighter pens or perhaps even the odd flash of colour on websites, but a site packed with neon pinks, yellows and greens is not really to most people’s tastes.

Digital transformation. Delivered securely.

Let’s discuss your objectives.