UX Design Colour Psychology, Theory & Accessibility

Published in

UX Planet

7 min readJun 29, 2020

Colour is an interesting topic, which I feel is often overlooked and sometimes under-appreciated. One of the first things I was taught was the power of colour, how it can have an impact on human emotion, and that there should be a purpose behind choosing one. I rarely see articles or posts talking about this subject, and because my memory needs refreshing a bit, we decided to write this post to hopefully help others, we hope it comes in handy in your next project! Even if it’s just to give a reason as to why you chose a particular colour for a difficult client 😉

Although we don’t think there’s anything completely wrong with picking a colour based on the reason that… you simply like it. But we think more often than not it’s important to have a reason for using a specific colour, as it can be a powerful choice and have an impact not only on the visual aesthetics but also on evoking particular emotions and even influencing decisions that your customers make. For example, Hubspot [1] found an interesting discovery when experimenting with different button colours for conversion rate. They A/B tested both green and red, with an intuition that green would perform better due to its correlations with ‘go’ and movement such as with traffic lights. However to their surprise the red outperformed the green by 21%! They surmised that it was probably because it’s more of an urgent, attention seeking and salient colour.

Accessibility

There are also other behavioural studies to suggest that colours are not all equal, colours can even be influenced by age and even gender. Joe Hallock’s [2] observations, for example, show that on average in his study that men dislike the colour purple, whilst women feel the opposite, but both dislike the colour brown. This might be useful the next time you design a website or app that’s targeted at a particular gender.

Blue is the safest colour for all age ranges, especially those over 70. This however could be due to the fact that most people are able to see the colour blue clearer than any other colour, even those with colour-vision deficiencies.

“Red and green are the colours most affected by colour-vision deficiency. Almost no one has a blue deficiency. Accordingly, nearly everyone can see blue, or, more accurately, almost everyone can distinguish blue as a colour different from others.” [3]

Incredibly around 9% of the population [4] do suffer from some sort of colour blindness or deficiency, so it’s always important to put thought to accessibility in your design, especially when designing for an older demographic. A good way of doing this is not only to use safe colours of brown and yellow, but also different design treatments. Such as dotted, dashed or different-sized lines and shapes. This can often be seen in road maps, this helps to decipher the map without the need for specific colours.

One or two colours are best

When it comes to how colour should be used in the design, it’s also important to factor in the number of colours used. We would always refrain from using too many bold colours. We usually only stick to a few, and tend to use a lot of white space with accents of vibrant colour to attract the eye to that particular element, usually in a way of a call to action. If you do use too many colours, especially if they’re all super bright, you’ll lose hierarchy with everything fighting for attention. A solid way of making sure this isn’t the case is using an old interior design method of the ‘60/30/10’ rule. This rule isn’t set in stone so feel free to deviate. But it’s always a good starting point. The idea is that you have a baseline colour, which takes up a 60% ratio, and then a secondary colour which takes up 30% and lastly an accent or touch of colour which takes up 10%. Within these ratios, you can, of course, have shades of the colour within.

An interesting example of this is with fortune 500 companies — the largest companies in the world. 82% of all companies only use up to two colours incorporated in their logos!

“Most of the time companies are using just two colors, going three colors or more in a logo is rarely practiced.” [5]

Having too many colours is not the only eye-burning design flaw that can be made, another is using too many with high saturation. When there are too many vibrant colours or even too many muted colours there will be a lack of hierarchy and difficulty in differentiating between elements. Contrast is paramount. A quick and efficient way of testing this is simply by making your design black and white or greyscale, this will highlight how much of a contrast there is. If it’s difficult to visually notice the difference between elements and the design is difficult to see, then we’d suggest adding more contrast.

Colour psychology

Colour can be powerful, it can have an impact not only on visual aesthetics and accessibility but also on evoking particular emotions and feelings. This is why it’s important to choose a colour that reflects your brand, if there’s no correlation the message that’s being portrayed may feel inconsistent or even evoke negative connotations. For example, having a meditation company’s brand colour in a vibrant Ferrari red might feel a little off.

“The restaurant and hospitality industry has studied this a lot. For example, in the U.S orange makes people agitated, so they won’t stay long (useful in fast food restaurants). Browns and blues are soothing, so people will stay (useful in bars).” [4]

However, this is a bit of a tricky topic as colours do affect people differently, especially in different cultures. There are some colours that are more objective, such as gold and green which are universally understood due to nature. However there are others that are more objective, for example, white in the UK signifies peacefulness and purity, and is often used in weddings. Whereas other cultures see it as a colour synonymous with death.

Also on an individual level, there could have been a particular experience such as something traumatic that has impacted how a person views a particular colour. However, as a whole and particularly in Western Culture the colours below evoke these certain emotions:

To Conclude

It’s clear to see that colour can have a profound impact, not only bringing a brand, product or design to life but also in a way to evoke certain feelings and potentially to even being used as a behavioural tool. As always we think it’s imperative to test colours before making any assumptions, even if you think it’s obvious, as your user demographic could have a different perception. If you really haven’t got the means to test, then use this post or any in the ‘useful resources’ section below, and further reading on the topic will get you the majority of the way there.

We hope you found this post interesting and helpful, and that you may now have a second thoughts about choosing a particular colour for your next design! 🎨