This is not another “use red instead of blue” article. We have heard that one time too many. Applying colors is a delicate process that needs to take in context the audience and the entire environment of the website you want to modify. The choice is highly individual, as it needs to fit the website’s (and the brand’s) personality.
However, there is one utterly universal principle. Do you know what rules our perception? It is contrast. This article will not tell you “use colors in your designs,” but will tell you “use contrasts in your designs,” followed by a proof in a form of a case study.
Red Dead Assumption
I have been following the topic of color for some time. Many a time have I heard (or read) that using one color instead of the other brings a huge increase in conversion rates and everybody should do this because of reasons.
However, do you see the color scheme of the first design? It is based on the green color. The backgrounds, the buttons, and icons are designed using green as the foundation. Even so, the button itself is less saturated and much darker than the red version. It blends with its surroundings.
Whereas the red button is lighter and highly saturated, and guess what? It is a complementary color to green elements. It is a contrast.
Consider the simple fact that you are reading this article using a black font on a white background. If you look around yourself, you will probably notice some items faster than other ones. Contrasts are employed on everyday basis.
We need to drop the beaten-to-death myths (“blue is calming, red makes you hungry”) about colors, as there is no surefire method to choosing the right shade, because of various factors that influence our perception of color. Below you can see some studies exploring this topic further (color psychology is an utterly captivating topic):
If you are unfamiliar with the topic of color overall and require introduction, I recommend a lighter read in the form of the article from Coschedule.com on Color Psychology in Marketing, and the infographic below from Kissmetrics.com on how to coordinate colors (click to read):
However, I want you to a look at the whole website’s design itself. It uses green buttons and labels, but the bar at the top, which badly wants a click from you, is actually red. Even though the infographic says, “This color does that,” the website’s design itself follows one principle: contrast.
Red stands out.
Trust in contrast – a study
“What good is the warmth of summer, without the cold of winter to give it sweetness.” ― John Steinbeck
To prove my point and test new designs for our website, I have conducted a study using the tool, Screenshot Click Testing. With a limited audience (around a hundred), I tried to figure out whether a more contrasting color scheme (and a slight change to the CTA) would actually yield a higher click rate on the sign up buttons.
I have shown participants of the study two screenshots: the first featured elements colored in different shades of blue, including the buttons, so the contrasts are minimal. The second screenshot used my favorite pairing of colors: navy and orange, to display a bigger contrast between the website and the CTA.
The principle of the study was simple. The participants received the following task: “Please click on the element that draws your attention the most,” and then were shown successively the two pictures above.
At the end of the study, they received a question “Which version was more interesting to you? Can you tell why?” All they had to do was place a click on the most interesting element in each version, and then provide an answer.
Here is a map of 75 clicks placed on the contrast-less version. As you can see, they were rather evenly distributed around the page. The sign up CTA is the winner only by a small margin – other areas were almost as interesting.
People who preferred this version over the other claimed that this scheme was more peaceful and pleasant to the eye, and looked more professional. Indeed, the shades of blues look very minimalistic and elegant.
Yet, the results of the other screen are more surprising.
A drastic majority of clicks (almost 75%) was directed towards the contrasting orange CTA.
About 68% of respondents claimed that they prefer this version to the other. Reasons stated were that it is more interesting, more eye-catching, and even clearer. The contrast won in aesthetics.
But the purpose of the study wasn’t about visuals – I wanted to learn which version gets more clicks on the CTAs.
With the second design, I found out that eventhe fans of the first version were consistently placing their clicks on the orange CTA. The clicks of people who liked the first design more still were all over the website and in general did not meet my goal, which is clicking on the sign-up buttons.
Therefore, the conclusion is that even though the first version might be more attractive to one’s tastes, it is the contrasting version that achieved my goal, which is a click on the CTA. Companies that rely on such actions and clicks can use this type of study to optimize their homepage.
Contrast 1:0 Color
The contrast theory is worth exploring. If you want to employ contrasts in your designs and websites, I can recommend studying some art theories. Here, colorwheel.co explains the basics of the contrast theory, created by Johannes Itten. You can also get inspired by various painters.
Paul Gaugain, Piet Mondrian, and Henri Matisse.
Employing Contrast – know how
Since you learned that contrasts do work (and that is pretty much a huge tip in itself), now it is time for some tips how to use contrasts.
In order to evaluate quickly whether your contrast works, you can minimize the designs and compare them to each other. See what elements you notice first.
You can also try comparing the colored designs with their Grayscale versions. However, that does not always work according to my expectations, so I prefer the first method.
Moreover, do not rely on highly saturated colors exclusively as the only method for contrasts. They do attract attention, but once overused, they can strain the eyes of your users and visitors. Apply them in moderation.
As a final piece of advice, test. A/B tests are the best method to check how your buttons, propositions, or designs are received. I use Screenshot Click Testing to see people’s opinion and clicks, but I also use Click Tracking for additional verification. Without testing, you cannot be sure that your choices actually match the personality of your website. Gut feeling is one thing, but tangible data is another.
Do you agree that contrasts rule the world? How do you employ them in your designs, if ever? Share your insights in the comments.
Torsten is CEO and founder of Userpeek. He is an old stager in the online business with 20 years of experience as an online marketer, conversion rate optimizer and UX strategist.
I agree that contrast outperforms color in bringing conversions. Having said that, it's also key to pick the right colors for any design geared to convert customers. Contrast will surely suck if perfect colors aren't picked for a specific design.
I agree that contrast outperforms color in bringing conversions. Having said that, it's also key to pick the right colors for any design geared to convert customers. Contrast will surely suck if perfect colors aren't picked for a specific design.