Which Color Converts The Best?

QUICK ANSWER: I don’t know. Nobody knows. You should test different colors in your site. That’s the only way!

Everyone seems to have their own favorite color. And that’s OK. But if you go to the Internet and try to find answers, you’ll soon realize that red can make you a winner.

I’m pretty sure you already know this example:

It’s been discussed in almost every blog with topics on conversion rate optimization. The Green VS Red has been one of the longest standing debates out there.

According to Joshua Porter from Hubspot, he created the normal home page with the green button color he had originally designed. Then, he cloned that page (created an exact copy) and changed the button color to red. He did not change anything else on the page. The content, message, and graphics were exactly the same on each page variant. The only difference was the hex value that determined the color of the button.

Joshua wanted to know which color would convert more people to click. Would it be green, which connotes “Go,” or red, which connotes “Stop”? After 2,000 visits to the page, the results were clear as water: 21% more people clicked on the red button than on the green button.

Probably you’re thinking right now on changing the color of all your call-to-action buttons from whatever color you have to red. And you could do it. No one can forbid you to do that. Except one think: common sense. Let me explain it…

It is not possible to generalize these results to all situations. Imagine a perfect world (with lots of rainbows and unicorns out there) where red call-to-action buttons were the most converting ones. And that this were the absolute truth in the universe. Who in the hell would choose to put green buttons in their websites? Absolutely nobody!

Everybody wants to sell to the maximum. Everybody hates loosing leads. Then, why in our world big players like Amazon use a shade of orange for their click-to-buy buttons whereas others like Apple use blue and green? The answer is easy: these are the colors that work better for their specific webs (and designs, audiences, and additional circumstances).

The only thing that you can accept as valid is that the previous results just hold for the conditions in which they occurred: the particular page design, the concrete site where the experiment was run, and the audience that viewed the color variants and (unconsciously) decided which one performed better than the other.

You should test colors on your page and with your audience to see what happens. You might find something interesting in your data that others don’t have in theirs. And, of course, there are lots of external factors that may affect the way you choose colors in your site. Let’s see some of them…

Color Meanings Are Not Always What You Might Expect

There is also a psychological side to colors – certain colors are said to be associated with different qualities and emotions. Colors also have an effect on your visitors before they begin to read the content of your web site. Thus, it is very important for you and your designers to consider your target audience, the psychology of color, and the image you wish to project before you complete your design.

When color is used correctly, it can add impact and clarity to your message and highlight important points. Alternatively, when color is used incorrectly, it can compromise your message and confuse your target audience. In general, the colors red, orange, and yellow are “exciting” colors and the colors purple, blue, and green are “calming” colors.

But the semantics of a color depends on culture, profession, and personal preference. That is, interpretation of colors is not always a matter of personal preference. For example, in Western cultures the color white symbolizes purity; however, in China the color white symbolizes mourning and death. Thailand, however, believes differently and uses purple as its color for mourning instead. Did you know that?

When you design, you should take the time to think about why you’ll use a certain color. But also about the cultural influences associated with that color and whether it has implications past your own society. And that’s important because your design for the web will be seen by thousands or millions of people. I’m sure that you took the time to internationalize the language of your pages (or at least you thought about that), but have you really thought about the color? Color communicates a meaning and your own assumptions can often be wrong.

Not Everybody Sees Colors Like You Do

Struggling to grow conversions? Did you think about the way your visitors see the colors in your site? Maybe that’s one of the problems your numbers are that poor. When your visitors do not see/distinguish the calls to action from the other elements in your site due to the colors in your theme design, that’s like having a hole in your pocket!

Designers (and web designers in particular) are often not aware of how effective their color designs are at reaching the whole of their client’s intended market (i.e. including color blind people). And that gets worse when you realize that 1 in 12 men, and about 1 in 200 women–or about 4.5% of the world’s population–experience color blindness in some form.

It means that 1 out of 20 users may not be able to see your website (including calls-to-action) in its full beauty. For these viewers the text may be fuzzy and images may be unrecognizable. And trust me, I can tell you from my own experience as a color blind person (yep, I’m one of them 🙂 ) that such situation is really annoying!

To begin, let’s examine exactly what it means to be color-blind. For one thing, it doesn’t mean that the individual is blind to color, or sees things only in black and white. Perhaps a better term to use would be color-deficient. While we don’t know precisely why it occurs, it is commonly understood that most color blindness is a genetic (hereditary) mutation deriving from the X chromosome (you are born with it), which also presents one possible reason why more men are color blind than women.

The effects of color vision deficiency can be mild, moderate, or severe depending upon the defect. If you have inherited color blindness your condition will stay the same throughout your life – it won’t get any better or worse. Most people with color blindness can’t distinguish certain shades of red and green, others have problems with blue and red, and others even don’t realize they are color blind since their condition is just minimal.

Fortunately, getting a colorblind-friendly web design shouldn’t be difficult. Just avoid using color combinations that are hard to read, such as red-green that is not suitable for color-blind people as they have problems distinguishing between red and green. Another example is the red-blue combination that looks blurry to the eye (my own case).

Another important aspect of color choice is strong contrast between foreground and background colors, which makes the text easy to read. This is even more important when considering the color-deficient user. To see how this can affect what you choose for you site design, let’s consider the following examples.

You need to exaggerate the difference between the foreground and the background and avoid using colors with similar lightness no matter how they differ in saturation or tone. It is wrong to think that the lightness of the images you embrace will be the same for people with color deficit. So, if you lighten light colors and darken the dark ones, you will increase my visual accessibility.

Basically, there are two simple ways to optimize your website color design for color blindness:

• Increase contrast: People with color blindness cannot perceive certain colors, but they can perceive contrasts. Test your WordPress theme and other WordPress elements (calls to action, in particular) for contrast.
• Avoid color semantics: Make sure to properly label color choices with either an “alt text” that clarifies everything or with copy on the page. Try not to rely only on color semantics. The solution is to avoid using color as the only indication of what to do, or the information you are trying to get across. Instead, use color only as an unimportant hint to the user.

Put the Colors in Your Web Under Test

Probably you’re here because you wanted me to explain you about the results of split testing experiments others put in their sites where they switched colors and analyzed what happened. I won’t do that. It’s useless and unnecessary. You can do it in your own site and decide with your real data. To start an experiment testing different color combinations is easier than ever. Do it yourself!

You can start with a CSS Experiment, where you can test alternative colors for backgrounds of buttons or any other element in your WordPress site, or test alternative font colors for headers or links. To create the experiment with Nelio A/B Testing, follow these steps:

1. Under the Nelio AB Testing menu, click on the Add Experiment option.
2. Fill out the Basic Information of the experiment, including a name and a description.
3. Under the Alternatives tab, click New Alternative CSS which will allow you to create a new alternative style.
4. Create as many alternatives as you want and then edit them using the Save Experiment and Edit CSS that appears below their names.
5. Go to the Goals tab to define and configure which actions should be counted as conversions. Check our Conversion Actions and Goals page for additional information.

Once you have defined the experiment completely (that is, you defined the basic information, added one ore more alternatives, and organized one or more actions into goals), you may start the experiment. In order to do so, just go to the Experiments page, hover over the experiment you want to start, and click on Start to launch it.

While you’re editing a CSS alternative style, you’ll find a Preview function available. Select the page or post you want to use to preview the CSS changes and take a look at them. This way, you’ll know for sure whether what you’re doing looks the way you want.

If you are not familiar with CSS syntax to describe new styles, here are some examples that you can use when defining the alternatives of the experiment:

Change font color of paragraphs to blue

p { color: #0000FF !important; }

Change font color of links to orange

a { color: #FF7E00 !important; }

Change background color of buttons* to green

.button { background-color: #008000 !important; }

*assuming a button is an HTML element with the button class.

For more complex CSS definitions, you can call your designer of contact us through the comments of this post.

On the other side, if you want to test several alternative images in a page, you just need to create a new A/B testing experiment of pages, as described in our documentation. Just remember that under the Alternatives tab, you need to click New Alternative (based on an existing page), which will allow you to select a page whose title, content, and metadata will be copied. So no need to create the new page by yourself. Just use this option to make a copy of your original page. Then edit their content and the only thing you need to do is to change the image you want to test on any alternative page by its alternative.

Here’s an small video (of an old version of Nelio A/B Testing, 😉 ) where you can see the process in just a minute:

Nelio A/B Testing

Native Tests for WordPress

Use your WordPress page editor to create variants and run powerful tests with just a few clicks. No coding skills required.

More Info

Conclusions

Just saying that one color converts better than another is senseless. What worked well in a particular website may harm the conversions of another one. That’s why you need to split test different color combinations in your site before choosing the winner one. You personal preference doesn’t matter. Make your visitors select (without even realize) which is the color combination that performs better. I’m sorry to say you this, but you have no clue about which color converts the best. You cannot know beforehand. Neither do I. So your only option is A/B Testing.

Take into account color semantics and color-deficient visitors when creating the alternative color designs for your WordPress theme and elements. And then put your site under test. It’s never been that easy. Just let your split testing tool track your visitors for you, and finally take decisions based on real data, not opinions.

Featured image by Don McCullough.