Call-to-Action Buttons: Color vs. Contrast

call-to-action-color-versus-contrast

Kayla Hollatz | November 16, 2015

(Originally published on March 5, 2015)

Your call-to-action (CTA) button is the most important thing on your landing page. No matter how great your landing page design and copy is, you won’t meet your campaign goals if your button doesn’t beg to be clicked.

We talked about the importance of CTA button copy in our post Death to the Submit Button, but today we’re getting down to the nitty-gritty of how to use color and contrast to increase your conversion rates.

Okay, which color nets me more leads?

Sadly, it’s not that simple.

Take a look at this example from Hubspot on ConversionXL’s blog:

color-CTA-button-example

The red CTA button raised conversions by 21%.

So red is better than green, right?

Not exactly. This is when it gets tricky.

When you take a deeper look into the example, you’ll notice something else that could’ve caused an increase in conversions for the red button: the use of green throughout the landing page. See, red is directly opposite green on the color wheel — meaning they’re two colors in big contrast to each other.

The green branding of Performable made the red button stand out because of the contrast. The green button didn’t have a chance.

So we’re not here to convince you that a red call to action button is better than a green one or vice versa. No single color can be deemed as the best for conversion because its effectiveness depends on:

  • The contrast of the button to the background of the page
  • The contrast of the button to the signature branding colors of the brand
  • The emotional reaction it evokes from visitors

Why should we care about contrast?

The higher the contrast between elements on the page and the CTA, the more attention is directed toward the button. The more attention, the better likelihood of that visitor clicking the button.

Okay, so you know what good contrast looks like in the first example, but what about bad contrast?

contrast-CTA-button-example

Did you look at this and have a face-palm moment? Me too.

That (dark) blue button is having a hard time standing out against the (lighter) blue form background.

If that button was a BOB, or big orange button as Unbounce likes to call it, Salesforce would convert more leads. Why? Because of the high contrast orange would create in contrast to the blue.

Don’t make your visitors search for your CTA!

That being said, a low-contrast CTA button is definitely better than a ghost button

…which leaves visitors with zero contrast.

It’s like Peep Laja and Oli Gardner say in their Landing Page Design course:

“Button color is irrelevant. Button contrast is what matters.”

In this example from Instapage, it’s not the color of the button that matters. It’s the contrast.

All this talk about calls-to-action and contrast — but I’m sure marketers just want to know: “What’s the best conversion color?!

The answer?

call-to-action

And the Best CTA Button Color is…. (drumroll)

It depends.

Again, can’t stress enough that it’s all about that contrast.

In fact, contrasting — or complementary — coloring is so important in conversions that Angie Schottmuller gave an entire presentation about how color influences conversions at the Unbounce Conversion Road Trip in June. Her data revolves around a cool bit of biology:

If our eyes are inundated with a specific color, they’re built to seek out the complementary color.

That means your web visitors are just begging you to show them some contrast! Don’t let them down.

As with any other aspect of marketing, remember to always test your call-to-action buttons before believing one color is better than another for you. There’s always room to test.

Google once tested 50 shades of blue (not grey) for their CTA color to see which converted the best. FIFTY!

If it matters to Google and your visitors, it should matter to you. A lot.

Because, quite simply: call-to-action contrast = higher conversions.

Boom. *mic drop*

Happy testing!

 

Have you tested a landing page to see if your conversion rates were increased by a change in color or contrast? If so, what were your results?

Let us know in the comment section below.


  • As discussed above, the button color, contrast and website layout all three contribute equally to have a CTA that maximizes conversions and user engagement on your site. But, be careful before going to any conclusion and always prefer testing your website elements if you want to approach the most accurate results. A/B testing tool like MockingFish provides you the most reliable data based on visitor segmentation. With a tool like MockingFish, you will be able to generate the best result for your website and track how visitor interacts to gather a real time data.

  • Hi,

    As discussed above, the button color, contrast and website layout all three contribute equally to have a CTA
    that maximizes conversions and user engagement on your site. But, be careful before going to any conclusion and always prefer testing your website elements if you want to approach the most accurate results. A/B testing tool like MockingFish provides you the most reliable data based on visitor segmentation. With a tool like MockingFish, you will be able to generate the best result for your website and track how visitor interacts to gather a real time data.

  • Thanks so much for mentioning Instapage. If anyone has any questions at all please let us know!

    Here is a quick hoplink to our main benefits: http://goo.gl/DAXivL

    Cheers!

  • Thanks so much for mentioning Instapage. If anyone has any questions at all please let us know!

    Here is a quick hoplink to our main benefits: http://goo.gl/DAXivL

    Cheers!

Join Our Monthly Newsletter

Filled with industry news, tips, and upcoming events!


Recent Posts

Categories

Archives