Color vs. Contrast — Which makes you click?

This is not another “use red instead of blue” article. We have heard that one time too many.

Applying colors to designs is a delicate process that needs to see in context the audience and the entire environment of the project (or 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. I will not tell you “use colors in your designs,” but will show you why you should use contrasts in your designs to make people do what you need.

I have been following the topic of color for some time — I see value in combining colors to create harmonious projects.

Many a time have I heard or read that using one color instead of the other creates a huge response in people (and brings an enormous increase in conversion rates) - “everybody should do this because of reasons.”

Of course, the studies that prove “X color makes you swim in money” are numerous. The one that is quoted the most is the example of Hubspot, where they ran a test on the color of their Call to Action button.

The result of their study is that the red button outperformed the green one by 21%. Way to go, Red!

Why did Red win? Another source claims that red gives an edge to athletes participating in competitions. In the light of this news we all should go, open our projects, and change everything to red right this second.

There’s one thing, though.

Do you see the color scheme of the first example? It has a green palette. The backgrounds, the buttons, and icons are designed using green as the foundation. Even more, the button itself is less saturated and much darker than the red version. It blends with its surroundings.

And on the other example the red button is lighter and highly saturated, and guess what? It is a complementary color to green elements. It is a contrast.

This is not another “use red instead of blue” article. We have heard that one time too many.

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 surround us on daily basis.

Let’s forget “red makes you hungry, blue makes you calm” and focus on the study of contrasts.

“What good is the warmth of summer, without the cold of winter to give it sweetness.” ― John Steinbeck

To prove my point about the effectiveness of contrasts, I conducted a study using Screenshot Click Testing (nods to UX’ers). It’s a study where people basically click once in screens I show them.

With an audience of around a hundred, I tried to figure out whether a more contrasting color scheme (and a slight change to the buttons) would actually give more clicks 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 were minimal.
  • The second screenshot used my favorite pairing of colors: navy and orange, to display a bigger contrast between the website and the CTA.

You can participate in the study yourself: Here is the link. See if you are like everyone else , but don’t look at the rest of article before taking part in it, no cheating! I will post the results only for Medium readers in the comments soon.

The first project: notice that the only noticeable contrast is within the logo.
The second project with my favorite pairing of colors.

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.

The clicks on the first project.

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 button 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 button.

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 than the previous design.

The contrast won in aesthetics.

I also used another type of color pairings, which meant navy buttons and orange background — the only result I got was that it was an absolute nightmare too look at.

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 even the fans of the first version were consistently placing their clicks on the orange CTA. The clicks of people who liked the first design 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 pages.

Various artists have been following contrasts for a long time before — learn from art.

Gaugain, Mondrian and Matisse.

How to apply contrasts to your designs

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.

It’s clear once you look from distance.

In order to evaluate quickly whether your contrast works, you can minimize the designs and compare them to each other. See which elements you notice first.

You should also try comparing the colored designs with their gray-scale versions. However, that does not always work according to my expectations, so I prefer the first method.

Make sure that the background colors are natural and neutral. Josh Byers from Studiopress speaks of a method to create a hierarchy of 3 colors on your website: background, base, and accent colors. Background and base are meant to support the accent color, which is contrastive to the rest.

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 — don’t go orange background, navy buttons.

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 User Session Recordings 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 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.

Article also featured on the UsabilityTools blog. If you want to learn more about contrasts, here’s an article about how “Low Contrast Texts are Bad UX.”

Published in #SWLH (Startups, Wanderlust, and Life Hacking)