Add Focus To Your Conversion Insights
Get 14-day free trial

Color vs Contrast: Which One Brings MoreConversions? 25 June 2015 | Piotr Koczorowski

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.

Of course, the case studies that prove “X color makes you swim in money” are numerous. The one that is quoted the most, at least from what I have seen, is the example of Hubspot, where they ran a test changing the color of their CTA.


(Source: Hubspot)

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

Another source claims that red gives an edge to athletes participating in competitions. In the light of the aforementioned we all should go, open our stylesheets, and change everything to red right this second.

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):

A critical review from Genetic, Social, and general psychology monograph explaining how our perception of color is influenced by various factors such us our upbringing or cultural contexts.

An article on the importance of color in marketing from the Journal of the Academy of Marketing Science, which researches the effects of colors in branding.

A similar article on the impact of color in marketing from Management Decision, namely how color impacts our moods.

A final proposition of an article from Marketing Theory, which proves with experiments how products should be presented using color.

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 on Color Psychology in Marketing, and the infographic below from on how to coordinate colors (click to read):


Click to see the entire infographic.

A different source comes from the expert, Neil Patel, who talks about colors that influence conversion rates. The infographic mentions genders’ preferences towards colors and associations with given shades.

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 our 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 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 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, 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.

contrast comparison

Orange vs. blue

Make sure that the background colors are natural and neutral. Johsn 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.

(source: Josh Byrnes,

(source: Josh Byrnes,

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.

Piotr Koczorowski

Written by Piotr Koczorowski

Quirky, funny and energetic young blogger from Poland with a passion for video games, contemporary American literature, chillwave music, and pizza. Between studying Translation Studies at a Polish university, Piotr works at UsabilityTools where he blogs about UX and goes overboard with puns and cultural references. In his free time he dreams of space travel (and pizza.)

  • Pete Austin

    I have no idea whether you are right, or just lucky, because there are no numbers.

    The internet has many blog posts by people who had an idea, did a little bit of research which supported it by chance, and published because they assumed it was right.

    You never see blog posts by people who had the same idea, did a little bit of research which DID NOT support it by chance, and didn’t bother publishing because they assumed it was wrong.

    • Piotr Koczorowski

      Hmm, in that case, what numbers would you like me to provide? I believe most are in the pictures…
      I was thinking of running further studies, but that would take too much time… but now I’m inclined to do it :)

  • Carrie Morgan

    I love this article – just like a headline determines if a blog post is read or shared, conversion is about the copy and great design, not color. What’s visually pleasing? What directs attention where and in what order? What stands out and is that truly the priority on the page? What grabs attention, given the page design as a whole?

    Way to go, Piotr!

  • 72dpi

    Why don’t you employ the same theory on the letters on the “Get Free Trial”-button. I can almost not read it because of low contrast between the letters and the button-color.

    • Piotr Koczorowski

      In this study, I didn’t want anyone to focus on the writing alone – I
      wanted them to focus on the buttons and their colors only :) I could’ve
      removed the writing all together, but that would have looked shifty,
      Hmm, but maybe the low contrast depends on your display settings and on the level of light in the room your computer is?
      You are the first to point that out, but noted for any future changes!

      • Reinier Kaper

        72dpi is right: the button is hard, if not almost impossible, to read.
        It’s mainly because light font weights (esp. 300) are rendered significantly differently on different devices/OS’s.

        I would recommend giving it a 400 weight at least, so everyone can read it (the light pink also doesn’t help in terms of contrast of course) :).

      • califor1010

        I think 72dpi is referring to the CTA buttons in’s header div and the end-article callout, not the examples in the article.

      • Mordecai

        Hey, 72dpi is right. I never noticed the “Get Free Trial” on this website. You really need to use contrast as well.
        Thanks for the great article.

        • Piotr Koczorowski

          Thanks guys for feedback, I actually have similar feelings, hence the study, but need to take it over to the team responsible for the site :) Now I have opinions to back me up!

  • Ean Moody

    To start, I’m going to say that I think you’re right, and contrast really is the key.

    That said, I don’t think your study actually backs up your claim, or at least doesn’t definitively show that it is more correct than Hubspot’s claim.

    Your test showed an orange button against a blue background does better than a blue button on a blue background. Hubspot did the same thing with red and green, so the results could show that their theory was overly narrow (and could apply generally to warm/cool colors), or that your theory is right and it was really the color contrast that mattered as opposed to the hues selected, or that *both* are correct and influence the result to some degree.

    In order get unambiguous results you’d want to run a third and fourth test; blue button on an orange background and orange button on an orange background.

    If the issue really is only contrast, the blue-on-orange should perform just as well as the orange-on-blue. If Hubspot is also right that warm/red colors convert better, you should see orange-on-blue convert better than blue-on-orange, but both should outperform scenarios where button and background are similar.

    • Piotr Koczorowski

      That is a great idea for a new study, thanks! I’m onto it

  • Neak hong

    I once had the unusual, though unhappy, opportunity of observing the same phenomenon in the brain structure of a man, who, in a paroxysm of alcoholic excitement, decapitated himself under the wheel of a railway carriage, and whose brain was instantaneously evolved from the skull by the crash.

Ready to empower your website's potential?