The role of colour in website usability and design

This week through my work as an internet marketing consultant I had reason to consider the role that colour has in web design and more importantly how colour affects website usability. As a result, I discovered some pretty interesting research, and I am happy to share what I found this Five Minute Friday.

I was looking at the Google Analytics stats of a new client’s website, and identified that the major issue on the site was a high bounce rate. I deal with SME’s so there is no budget for professional usability testing; however I did wonder what affect the yellow colour of the header and main sidebar were having on the bounce rate. What I found out about the colour yellow and website usability was really interesting:


• Yellow is a bright that is often described as cheery and warm.
• Since yellow is the most visible colour, it is also the most attention-getting colour
• Suggests warmth, sunshine and happiness

Less Positive

• Yellow is also the most fatiguing to the eye due to the high amount of light that is reflected.
• As is the most difficult colour for the eye to take in, it can be overpowering if overused
• Yellow can also create feelings of frustration and anger.
• While it is considered a cheerful colour, people are more likely to lose their tempers in yellow rooms
• Babies tend to cry more in yellow rooms.

What this tells me is that it is important to research the colours that we use on our websites. Yellow probably works really well as an accent colour – we use it on our own website, but should probably not be used as a background for content. Our kind website designer has agreed to change it so we can see if the change improves the bounce rate.

Here is some more information about other colours in terms of psychology and website usability.

BLACK is associated with seriousness, darkness, mystery, secrecy. Black absorbs and dilutes all colour surrounding it, black is not recommended as a backdrop to text rich content, as it will make small type difficult to be read

RED: Red triggers a physiological response that speeds up the heart rate, causing the person seeing it to breathe more rapidly. Red is associated with love, passion, and excitement, so if one wants to induce a passionate response, the colour red is always a good bet. One word of caution though – red is also associated with danger, warning and indebtedness.

BLUE is associated with trustworthiness, success, seriousness, calmness, power, professionalism. This is why it is used so often in corporate websites, by airlines and by financial institutions. Blue is also associated with intellect and therefore is often used by high tech and computing industries.

GREEN is associated with money, nature, animals, health, healing, life, harmony. Dark green is associated with luxury and lighter green is more calming and peaceful, making it a good choice for environmental products and pharmaceuticals.

ORANGE is associated with comfort, creativity, celebration, fun, youth and affordability. Research has indicated that the lighter shades of orange appeal more to an upscale market whereas the brighter ones appeal more to a younger audience.

PINK is associated with softness, sweetness, innocence, youthfulness, tenderness. Maternity sites should consider some pink.

BROWN is associated with earth, nature, tribal, primitive, simplicity. Choosing a dark brown shade may cause customers to associate it with dirt.