Colour is an important part of daily life, and also an important design element. Just as it informs us about our environment, it can also be used by designers to inform users of how to interact with their design. In the world of UX, colour is used to draw attention, show relationships, lead the eye, convey product branding, direct the user journey and deliver deeper symbolic meaning. The science behind how humans see colour, and therefore how we represent colour in our designs, has a powerful effect on our users' understanding of our product. The relationship between user and product is very important when choosing colour, as personal perception, culture and even physiology can change the way that colour is interpreted.
How Do We See Colour?
Humans see colour using cones in the retina of their eyes. Wavelengths of light hit surfaces around us, which pass into the eye through the pupil. From here the light passes to the back of our eye, where the retina is found. The retina contains a round-about total of 126 million light receptors, called rods and cones. Rods (120 million) perceive values of light and dark, and cones (6 million) perceive colour.
Above: The human eye with its cones and rods, used to perceive colour and values of light and dark.
Each cone is one of three types: a red receptor, a green receptor or a blue receptor. A combination of how much these red, green or blue receptors are stimulated is responsible for the colour that your brain perceives. The way that our eyes understand colour using red, blue and green receptors is mirrored in our understanding of colour on a computer, where we often use ratios of RGB.
Above: Use the sliders to generate colour using different ratios of red, green and blue. Credit: Mark Lee
The colour spectrum that humans see is called "visible light". It is a comparatively small section of all known wavelengths of light, that contains our "rainbow" of colour. One end of our visible spectrum is met with ultraviolet light, the other with infrared light. While we can detect both ultraviolet and infrared with technology, we are unable to see them. However, many insects perceive ultraviolet light, and some snakes can see infrared. The Predator, of course, can see all light wavelengths.
Above: The electromagnetic spectrum, within which there is a small band of visible light for humans.
How Do We Represent Colour?
Our visible spectrum of colour is often represented as a colour wheel in a triadic segmentation. The three primary colours (red, blue, yellow) are shown with the range of colour in between them. However, this colour wheel only depicts hue, and therefore does not truly show how we see colours in the world around us. To better explain this we could use the Munsell colour wheel.
Above, left: The 2D colour wheel. Above, right: The 3D Munsell colour wheel.
The Munsell Colour wheel is three dimensional and depicts hue, value and chroma (or saturation). The hue accounts for the 2D range of the triadic colour wheel, although it is now thought of as a ring. The ring slides up and down a value rod, which ranges from darkest (black) to lightest (white). As the ring moves up and down the hue lightens and darkens. Thirdly there is horizontal rod, perpendicular to the vertical value rod, that accounts for chroma.
Chroma can be thought of as the intensity of colour. In painting if would be the amount of pigment used. On a computer it is known as saturation. At one end of the chroma rod the colour is dull, and at the other end it is bright. A good understanding of these elements that make up our representation of colour is incredibly useful as a designer, especially when communicating colour to users and clients.
Above: Scales of hue, saturation and value.
Beware of the difference between saturation and chroma! On a computer, colour is presented on a screen that is made up of tiny lights (one per pixel), therefore there is high saturation through all values. However, when colour is printed on paper sometimes the same colour cannot be achieved with chroma in the ink. This is because, although white, printer paper is not made from bright light. When black is printed on that same printer paper, it is not as dark as on a computer because the paper is a surface that reflects light. On a computer screen, darkness is the complete absence of electric light. In this way we can see how the value range is severely diminished for printing versus what we can perceive on the screen.
When designing for web and software products, the colour on the screen is what we care about. Without the limitations of printed colour, the screen is our digital oyster. So what does limit us? What leads us to make certain colour choices over others? This is where user consideration plays a critical role. What limitations do our users have? What culture do our users share? What do our users think "looks nice"? Let's answer these questions in reverse order.
What Looks Nice?
It is important to understand colour relationships in order to create a product that is visually pleasing and directs the user in a non-confusing manner. Some examples of colour relationships are:
Above: Examples of triadic, monochromatic and complementary colour relationships.
A helpful resource to demonstrate these different colour relationships is the Adobe Colour Wheel. Here you can select various relationships in the dropdown, and drag to create different variations. As you will see, triadic splits itself at points equal thirds of the wheel. An example of a triadic relationship would be the three primary colours of red, yellow and blue.
A monochromatic relationship refers to different values of the same colour. Think of the Munsell colour wheel here, where the wheel does not spin but the value rod moves up and down.
A complementary colour relationship refers to colours that are directly opposite one another on the colour wheel. For instance, red and green, or gold and blue. "Complementary" seems like a misnomer, as these colours are difficult for our eyes to see together. They can be thought of as contrasting colours. The reason that our eye has a hard time viewing complementary colours directly next to each other is due to the way that our retinal cones process colour. Our red cones and green cones cannot process receiving red and green light wavelengths at the same time, and so they take turns in a way that makes complementary colours appear to vibrate. This is why the following complementary example is not only difficult to read, but also likely to give you a headache. However the analagous colours example has oceans more chill.
Above: Complementary colours are difficult to look at close together. Analagous colours are much easier on the eye.
This may lead one to think that using complementary colours is a bad idea when creating user-friendly websites, but it can be used in such a way to highlight and draw attention. Take the Twitter sign-in page below as an example:
Above: The Twitter sign-in page, which uses complementary colours to direct the eye and highlight areas of importance.
Twitter uses monochromatic blues primarily, as part of a strong brand identity. In fact when imagining Twitter's colour scheme it is easy to think of seas of blue and blue alone. But look closer at their sign-in page and you what do you see? A touch of yellow in the log-in inputs, to compete with the blue surrounding it. This is purposeful, to draw the user's eye to the area where their action and input is needed. As the eye cannot register blue and yellow very well simulateously, this contest for focus brings notice to the opponent. This not only demonstrates that complementary colours can be used effectively, but have been used as such by a successful, well-known brand that pays a lot of attention to User Experience. The use of complementary colours by Twitter is intentional physiological manipulation, and it works incredibly well.
Choosing Colours for a Delightful User Experience
When choosing a colour palette for user experience a good rule to follow is using split harmonious or split complementary relationships. Choose a colour, then select colours either side of its complentary opposite, but not quite its triads. Here is an example:
Above: A split harmonious colour relationship.
This palette is great for creating visual interest and leading the eye to parts of the website that you want the user to notice or spend time, without being too visually harsh. The idea is to use the analogous, near colours the most (these are the harmonious colours) and use the contrasting third colour to highlight and accent. Remember also to use near white or near black, and greys. Creating an absence of colour allows your colours to be more powerful rather than overloaded and intense. Overall, it's cool to use colour for accenting, drawing attention, manulating the user and making this pop, but at the same time it is important to maintain some chill.
After all you don't want a website as overloaded with colour and therefore as confusing as this one:
Above: A website that uses a lot of colour on a dark background, resulting in pages that are difficult to read, and difficult to understand what information is relevant.
Phewf!
What Culture Do Our Users Share?
Another important consideration is user culture. For each culture different colours are used to represent certain ideas and symbols. A common example of this in Eurocentric culture is the use of green to convey success, going forward, passing, and red to convey an error, stopping, stalling or going back. Consider Twitter's branding colours again. The light blue that they use invokes a sense of freedom, the blue sky, endless possibilities. If we were to read into it we could even say that the freedom associated with the blue also creates the perception of free speech. This may seem ridiculous, but these kinds of ideas are strongly regarded by branding and marketing departments.
So because of this, employ care and empathy when choosing colour for your product. Some common patterns in colour symbolism in England might not be the same in Indonesia. Colour conveys emotion, and the aim is to trigger a positive emotional reponse to your design rather than a negative one.
Accessibility - What Limitations Do Our Users Have?
So far we have talked about colour from the point of view of the writer, who perceives colour in the way that is typical of most of the world population, but what about those who see colour differently? 8% of men and 1% of women globally are affected by some form of colour blindness. There are many different types of colour blindness, but a common experience is a difficulty in differentiating between certain hues.
Above, left: typical colour perception. Above, right: red blindness.
Above, left: green blindness. Above, right: blue blindness.
Colour blindness is caused by deficiencies in the retinal cones that perceive colour. For instance, if someone has deficiencies in their red cones they can be described as having red-weak or red-blind sight. This will cause a difficulty in differentiating between red and green shades. Think back to the example of using a green button to symbolise going forward and submitting a form, and a red button to symbolise going back or cancelling an action. To someone who is red-weak or red-blind, these buttons will look very similar, if not the same. In this case using something alongside colour to convey meaning, such as marking buttons with stand out text like "Submit" or "Cancel" is imperative.
Even for those without vision disabilties, there are differences between them in how they differentiate between colours. An interesting measuring stick is this Munsell hue test, which determines one's level of determining minute differences in hue, and which colour wavelengths might be more difficult for your retinal cones to process.
Some people with colour blindness live with Monochromacy, which is vision with a complete lack of colour. People with Monochromatic vision see in value only, so for these users it is important to define relationships and difference using contrasting value. For instance, to someone with typical colour perception two colours of contrasting hue but the same value will be distiguishable. However to someone with Monochromacy they will not. A useful tool to check contrast for colour value with accessibility considered is this contrast checker.
Colour and value are indispensible in UX design. Colour can be used with purpose to determine how your user will interact with your product. Overall it is important to consider the user's relationship with colour in order to design effectively. A sound knowledge of colour theory and well as the science behind how we perceive colour should guide the designer's hand to create products that can be useful and enjoyable to people from a multitude of cultures and a range of abilities. Ultimately however, empathy with their end user is the designer's most important tool.
