Colour schemes leave a lasting impression and too much colour, along with too much or too little contrast, makes the user experience fraught with unclear calls to action and elements competing for attention.  The infographic below shows the effect colour choices have on the subconscious mind and how you can leverage colour schemes to evoke a sentiment.

Neutral Works

Neutral colours provide visual relief.  Start with a neutral background; white, black, grey, beige as the canvas.   This provides you greater scope for using colours within the content to create visual separation and help the reader skim your content.   For body copy, use a high-contrast neutral colour.  E.g. if you have a white background, black works best for copy.

Contrast // Toolkit

Use Colour Contrast Check to see if your colours contrast enough for those with visual impairments or black & white viewing.

Accent = Attention

Use stronger colours and/or typography to draw out key content points; headlines, page titles, links, calls to action, etc.  Using different colours helps create visual separation and enables the reader to better skim the content and access the bits most relevant to them.

Memorable Difference

A great way to provide colour cues for your brand is to do something different than your competitors with your colour choice.  Contact lens solution OptiFree has a green label while its competitors all have a variation on the colour blue.  By choosing a different label colour, it provides another memory cue for the consumer.

Colour can help the brand stand out.

For website Grey4Gold, we took the colour cues from the name to generate a website that set itself apart from other recruitment websites by using a darker background colour.  Gold was then used as the headline colour as well as borders.  

Easy on the Eyes

Above all – make your website easy to look at.  If your content is great and your navigation seamless, it can still fall apart by having the colour scheme and layout jar the visitor’s experience.

Colour // Toolkit

  • Colourschemedesigner.com Enter in the RGB code for a colour to see a palette of complimentary colours.  It also generates a mock up website in the colour scheme.
  • The Psychology of Color, shown below, provides insight on how colour choices can encourage certain mood
    Infographic via Youthedesigner.com

Key Takeaways

  • Against a strong background colour, content can get lost because the background is competing for attention
  • Using colour as an accent to show an active link page or offers can draw the eye to content and provide visual clarity
  • Using colour as well as varying font sizes is a great strategy to draw visitor’s attention to certain elements/calls to action on the page
  • Having a neutral background colour provides visual relief from all the elements on the page as well.

Some things are better shared

  • +1 this