medium bookmark / Raindrop.io |

It’s one of the oldest debates in web design and digital marketing: which color should you use for call to action buttons?

Plenty of people will tell you that red is the best color because it conveys urgency and evokes excitement, or that green works best because “green means go”. Meanwhile, Unbounce suggests that a BOB (big orange button) is ideal because orange “represents energy, enthusiasm, and a ‘get-it-done’ attitude.”

So why is this still a debate? The problem is that the data doesn’t support the premise that any particular button color is inherently the best option. Hubspot published a popular case study that showed how a red button outperformed a green one in an A/B test. But the folks at Sentient have seen orange, pink, bright green, and even white outperform red. Chris Goward of WiderFunnel says that orange buttons have often proved winners in their A/B tests.

With all of this conflicting data, it’s no wonder Peep Laja and the folks at ConversionXL claim that color makes little difference on its own, and that a color’s impact depends on how it affects the visual hierarchy of the page, and that the most effective button is one that “stands out”.

So what does it really mean for a button to stand out?

In neuroscience, visual saliency is the term used to describe how much certain content “stands out” within a scene. Saliency is a complex topic, but here’s what you need to know: as a human being, your visual cortex is programmed to look at the most salient objects in a scene. It’s not a psychological thing, and it’s not influenced much by culture, preferences or demographics. It’s the way the human brain is wired based on evolution to make it easier to rapidly detect potential prey, predators, or mates in a cluttered visual world.

Visual saliency can actually be measured. The most reliable way to do this is to run a large-scale eye-tracking study and see where people look first on your web page.

What factors contribute to saliency?

In the context of buttons, there are many visual characteristics of a page that allow your brain to rapidly evaluate the design and provide instructions to your eyes.

At EyeQuant, we use machine learning to analyze fixation data from eye tracking studies and determine which design characteristics contribute most to visual saliency. As it turns out, color hue is a factor, but a far more important factor is luminance, and specifically, luminance contrast.

What is luminance? Technically, it refers to the intensity or perceived “brightness” of a light. In the context of design, luminance contrast is the difference in luminance between an object on the screen compared to its surroundings.

Just how important is luminance contrast? Well, NASA  claims that luminance contrast is the most important aspect of color choice in graphics, and a key component of attention management, even when designing cockpit graphics.

This example from NASA’s AMES Research Center shows how luminance contrast helps to define which content in a design is most important.

What does all this mean for your CTA buttons?

First, your CTA button should have a strong luminance contrast
Light background? Use darker buttons. Dark background? Use lighter buttons. But it doesn’t stop there.

One of the most overlooked ways to increase the likelihood of people seeing your button is also to maximize luminance contrast between button text and the button itself.

You can combine both of these strategies for maximum effect. Does your website have a white background? Then a dark button with light button-text is a safe bet to get noticed.

Let’s look at a practical example. Imagine your site has a white background and your brand guidelines allow for two shades of green for the CTA button, and either white or grey button-text. In this case, the highest-contrast combination is the darker green button with white text.

As you can see below, this version of the CTA (Option 1) stands out more than any of the other possibilities within the brand guidelines.

Armed with an understanding of luminance contrast, it’s easier to grasp why it’s not just as as simple as green vs. red vs. orange. For example, here’s a hyper-visible CTA button from Abercrombie & Fitch:

The green button used on this product page is loaded with luminance contrast, and it works. According to the EyeQuant perception map, users look directly at the button within 3 seconds of landing on the page.

Now here’s an example of a green button that doesn’t get seen right away:

Notice how there’s less of a difference in luminance between the button and the background on this page (bright green on light blue), and how the brighter green in the button doesn’t contrast as much against the white text.

Not all red buttons are equal, either. Here’s an example:

Sephora design	First 3-seconds heat map
Uniqlo design	First 3-seconds heat map

Here you can see that the Sephora CTA actually draws more initial attention than the Uniqlo button (according to the EyeQuant Attention Map), despite the fact that it’s much smaller. While Uniqlo has maximized total luminance, Sephora’s done a better job of guiding the eye with luminance contrast.

Let’s try orange:

In this case, B&Q uses a richer orange than Sixt, which means it has a stronger luminance contrast vs. the background and vs. the button-text. The result is higher visibility according to the EyeQuant Attention Map.

But if luminance contrast is so important, does that mean we should all be designing with black and white?

Not quite, and this graphic (also from NASA) nicely illustrates why:

Here, you probably noticed the red and pink letters right away, even though they have less luminance contrast than the the black letters. This is called the “pop out” effect.

Because there are so many black letters, it becomes hard for your eyes to determine which ones are most likely to be important. Instead, the red and pink letters stood out because they’re a very different hue. Just like with luminance, it’s the hue contrast that matters, though – there’s nothing intrinsically special about the colors red or pink.

The “pop out effect” on websites is especially relevant when there are many objects on the page with high luminance contrast. Most websites use a white background and black text, so if you’re using black or white buttons, you risk having them get lost in the design despite their strong luminance contrast. This is why using brand colors for buttons can also be dangerous, as these colors tend to be used in multiple other places on the page.

To choose a button that has an appropriate level of hue contrast, we recommend brushing up a little bit on basic color theory and the color wheel. We wrote about this in a previous blog post here.

Key Takeaways

The best color choice for a CTA button depends not just on the button, but on its context and the content around it. The best choice:

• creates luminance contrast between the button and the background
• creates luminance contrast between the button and button text
• is a noticeably different hue than other colors on the page

Is that all there is to it?

Not quite. The tips above should go a long way, but EyeQuant has identified dozens of other factors that have a measurable impact on visual saliency, so keep that in mind.

To know with certainty which button will draw the most attention on your website, you’d need to run a scan-phase eye tracking study for every page on your website, with several different button variants. That’s with real eye-tracking – mouse movement and click maps don’t count.

If that’s not a realistic option for you, EyeQuant’s web service simulates a real eye-tracking study based on the machine learning we’ve done with huge amounts of fixation data from past eye-tracking studies. It’s more than 85% as accurate as a real study and provides near-instant results.

Want to learn more about EyeQuant? Book a personal demo with one of our experts below!

Topics:

CRO,

ui,

UX,

Design Strategy,

Myth Busting,

Research