Choosing the right colour combinations for your website
There’s a whole science behind the meaning and impact of colours. We all know the obvious ones, red symbolises danger, and ironically also love and passion, but when it comes to choosing the right colour combinations for your website the process is more considered.
Familiarising yourself with the emotional and mental implications of different colours is crucial for marketing. However, scratch beneath the surface of colours and there are some important rules for website design.
In this article we talk about how you can use colour to create impact on your website whilst making it easy to navigate and accessible.
Brand colour considerations
The starting point of any new website design is your existing brand colour palette.
You should already have created a strong brand identity, that uses colours to increase impact and memorability and to position your company or product in the market. So, the starting point of any new website design – or a site refresh – is your existing corporate palette.
Mapping a website design that makes the best use of these existing colour guidelines is important. Brand consistency dictates that you should never tinker with this, such as having logos in different colours on different pages. It’s your brand embodiment, so don’t devalue it. Show it off loud and proud! Mockup – Design Bolts
Website colour tips
Bold colour combinations can trip up website visitors especially those who are visually impaired or dyslexic.
Colour use on webpages extends beyond protecting and projecting your brand image though. There are ways to use colour to increase your website’s ability to grab and hold attention.
The most obvious is the strategic use of ‘white space’. Which can be any neutral colour in fact. The term indicates an area in your page design deliberately low key and empty. This white space draws the eye to important Content, including isolating navigation aids and calls to action.
At the other extreme, in the search for innovative layouts, it’s all too easy to flood your website with too many contrasting or bright colours. This creates visual boundaries and obstacles. For example, is it wise to use neon shades on websites, even if you’re trying to look funky and fun? You might end up with a website design that is dazzling in all the wrong ways!
This leads to the importance of making websites accessible. Companies should always be considerate to differently-abled website users and build in design features that accommodate their needs. Messy or vivid colour combinations can trip up website visitors who are visually impaired or dyslexic.
Putting text across strong colours is another way to make digital harder to read – such as red lettering on a reflex blue background. That’s way over the top!
Best use of colour in website designs
Mailchimp is known for their bright colour ways, however this has not affected the website performance. Buttons and text are still clear and obvious to all viewers.
That’s not to say you can’t get creative with colour on web pages. Just do it in a way that protects the clarity and cleanness of Content.
This includes using complementary and appropriate shades to make sure users can see a button, tab or design feature at a glance.
White text on grey buttons or panels can fade out of perception, for instance.
Incidentally, don’t assimilate buttons into elaborate designs either. A button needs to stand out.
One of the best ways to underpin good navigation and a positive User Experience with colour is to choose your design palette from a long-established, complementary scheme. These are generally created around one strong accent colour and include graduated versions or harmonious additions.
A scheme incorporating seven colours and shades is a great starting point and can make website design easier and more intuitive.
Once chosen, apply this scheme consistently across the site, making pages seamlessly flow and easy to read. Stronger shades can be used to draw the eye across pages, and to isolate important USPs or calls to action.
How to test your websites colours
Always test your webpage colour combinations to make sure they work successfully. Use online site tools to help you test.
Beauty is in the eye of the beholder, and if you have a creative website design that you love, it can be hard for you to gauge user engagement and reaction.
One way to test your website for effective colour use is this handy online tool, Snook – Colour contrast check
Regular UX Research is also important, including Focus Groups and eye-movement tracking activities. It’s the sort of insight that can provide unequivocal evidence of a prototype’s validity. Or, it can periodically check whether your website’s features and structure are still having the desired effect, including design choices.
Factory Pattern can make sure that you colour your website brilliantly, and that you keep well within the lines of effective UX and lead conversion!