Color plays a critical role in our lives; from differentiating between objects, to understanding traffic signals, to using tools correctly.
What’s even more interesting is the huge impact that color has on our cognition and mood. Recently I read a short research article that explains how different people perceive color and the impact that they can have on their mood and emotions. They cited a study in which workers lifting boxes that were painted black complained that they were too heavy – but when the same boxes were painted green, they felt lighter.
Similarly, in regards to websites, colors can have a significant impact on the usability and cognition of users. While each design element contributes to the usability of a website, a designer needs to be extra careful when choosing which colors to use on them.
Let's took a look.
How Bad Color Combos Impact Readability
Background and foreground elements on a screen/webpage must be different colors. When both are the same, it's difficult to identify the foreground elements right away. Obvious, right? Yes, but there's more.
Not all combinations of foreground and background colors are suitable for use, but with that in mind, how do we know which colors to choose? Answer: choose colors that contrast each other well.
Source: Color Interaction and Color Effects
In the image above, even though the color used on the background square is very different from the one used on the foreground square, it's nonetheless extremely uncomfortable to look at, despite the high level of contrast. If the foreground was text, it would be unreadable as well as uncomfortable, and the same applies when there is low contrast as well.
Is there a sweet spot?
Yes there is – keep reading.
Finding the Contrast Sweet Spot
The solution is to choose a color combination with sufficient contrast. According to the WCAG 2.0 guidelines, the contrast ratio for text should be at least 4.5:1. For example, it would be quite difficult to read the text if the contrast ratio was 1.26:1; however, if the contrast ratio was 7.58:1, it would be more legible and readable.
Is there a tool that helps you check the contrast ratio of background and foreground colors for apps and websites? Yes! WebAIM tool.
Choosing the Best Colors for Eye-Catching CTA's
Color contrast also matters when you need to divert a user’s attention to a specific element, like a call-to-action button (also known as a CTA).
In an experiment, two A/B variations of a webpage were created. The first variation had a blue background and used a different shade of blue for the call-to-action, the other had a navy background with an orange CTA. Users were asked to click on the element that draws their attention the most. The orange CTA received more clicks than the blue CTA because the orange-navy contrast was higher than that of the first variation.
The variation with blue background had a contrast ratio of 1.39:1, which is a little below the "sweet spot". In the second variation, the contrast ratio is 4.73:1, which means that the orange-navy combination contrasted better than the other version.
When choosing a color for a call-to-action, we need to choose one that contrasts well with the background color. But how do we know which colors create the most contrast? For that we can use a color wheel to find "opposite colors". For instance, in the above case study, orange is opposite to navy on the wheel, and thus the contrast is stark (i.e. more effective).
How to Make CTA's More Accessible
As individuals, we all experience color in different ways. Some of us have a vision deficiency called color blindness, which is described as the inability to distinguish between certain colors (most commonly between red and green, or blue and yellow). In fact, it's estimated that 1 in 12 men and 1 in 200 women suffer from this type of blindness.
Colorblind users will have difficulty perceiving certain colors. For example, a blue CTA might appear as desaturated blue, and this may cause the contrast between the CTA and the background to appear quite low, which in turn would make the CTA far less attention-grabbing.
Here's an example of a sign-in screen viewed using a colorblind simulator.
The solution is, once again, contrast. By using high-contrasting colors you can make CTA's accessible regardless of the actual colors used!
The post How to Boost Usability with Intelligent Color Choices appeared first on SitePoint.