Talk to a sales representative

+1 844-822-8378
or

Write to us

Check Your Email!
We've sent a message to
yourmail@domain.com
with an activation link in it.
Just click the link, and we'll take it from there.
Can't find the mail?
Check your spam, junk or secondary inboxes.
Still can't find it? Let us know at support@vwo.com

VWO BLOG

on Conversion Rate Optimization

Red means passion, black is equal to luxury and yellow gives a feeling of freshness. Use orange for your CTAs to increase conversions and this case study proved that red is a better button color than green… BLAH!

There are more than 16 million colors and any great blog-post that you come across on the internet will tell you the “feelings” conveyed by only a handful of colors. If you sell to people from different ethnicity and cultures, choosing colors for your website can become even more difficult as one color that relates to wealth and prosperity in a country may relate to mourning in another. How do you go about it then?

In this post I will help you choose colors for your website’s CTAs, background and other important entities that you want people to focus on. A believer of “one size doesn’t fit all” and “data (not opinions and experience) gets most respect“, I will not be able to spill out some magic potion and tell you the exact colors you should use. But I promise to take you through 3 actionable tips that you could go back and test right away to increase your website’s conversions.

1) Color the Primary Goal of your Website to Make it Stand Out

Imagine a shopping list of 20 items, all items written in blue ink except for one which is in red. If asked to scan this list for 10 seconds, which item do you think you are most likely to recall later? Multiple experiments have confirmed that outliers (or the item in red in the example) is what people remember most often. This is because of a phenomenon known as the Von Restroff effect (also known as isolation effect) which states that an item that stands out is more likely to be remembered than others.

Applying this to your websites, if you want your calls to action to get immediate attention, make them stand out. Use a color that has high contrast compared to your background and that hasn’t been used for any other entity on the page. Look at how Facebook and LinkedIn do it on their homepage:

Facebook homepage
LinkedIn homepage

Choosing a contrasting color for your primary CTA is not very difficult. You just have to look for a color diagonally opposite to that of your background color or most-used color on your page from the color wheel.

color_wheel

Image Credit: Wikipedia

Let’s for a moment go back to the red button v/s green button case study. Have a closer look at the screenshot below. You will find that the color scheme of the original page has some emphasis towards green. The Performable logo is green, the screenshot used on the page has some elements in green and one of the features also has an icon in green. A quick scan doesn’t really make the CTA stand out from the rest of the elements. I wouldn’t be surprised if testing the original page against a variation with the CTA in yellow or orange would produce same or better results.

red_green_button_case_study

The important takeaway from this case study is to create a visual contrast for your goal. End of the day, it’s not the button color that is going to sell your stuff but how prominently you display it for people to take a decision before abandoning your website for the competitors’.

2) Choose Colors that are “All”-User Friendly

In United States alone, about 7% of males (roughly 10.5 million men) and 0.4% of females have some form of color blindness. In Australia, these percentages are 8 for men and 0.4 for women. The most common problem being difficulty in telling red from green.

Needless to say, when deciding colors for your website and the areas where you want people to focus on, it becomes imperative to keep in mind people who have some form of color blindness. And if you have a SaaS product, that shows some results in charts and graphs, it becomes even more important to choose the right colors so that they are easily distinguishable for everyone. See below, how a contrast between foreground and background appears to people with certain forms of color blindness. You will notice that while eyes with normal vision would easily be able to read the text, people with Protanopia and Deuteranopia (most common forms of color blindness) will just not be able to read what’s written.

Normal vision:

normal_color_vision

How the above appears to people with Protanopia:

protanopia

And to people with Deuteranopia:

deuteranopia

Image Credit: Studiopress.com

Common solutions to ensure a great experience for everyone:

  • Choose colors many steps away from each other on the color wheel
  • Use tints (mixture of color with white) for background and shades (mixture of color with black) for foreground (or vice versa). Or make one element even more dark and the other even more light to create better contrast.

3) Train Visitors with your Color Key

Consider how bar graphs work. To look at data of one particular type, you just follow its color or pattern. Once you understand what a particular color or pattern bar stands for, you are able to compare easily focusing only on that particular color or pattern.

Similarly, if you use one color consistently on your website for a particular CTA (say signup), you will subconsciously train your users with the meaning of that color on the website. As an example, let’s suppose someone is evaluating a SaaS product on your website. And you have a shiny orange button for free trial on every page. When done evaluating their eyes will look for the orange thing, on whichever page they are, to sign up.

This way, you can even tell them which colors correspond to a heading, which means links and which call for a purchase.

See how CampaignMonitor does it beautifully. CTA buttons on all of their pages, which ask people to sign up for an account, are in green. And for no other CTA has the same color been used. This createa a consistent visual memory for visitors.

campaignmonitor_homepage

Let’s Talk

How has your experience with website colors been? Tried any A/B tests that worked well? Or may be which didn’t? Would love to hear all of it in the comments section below!

Author

Taruna is a Marketer at Visual Website Optimizer. She takes care of paid campaigns and is constantly on a search for interesting ways to promote VWO.

(5) Comments

Leave a Comment
  1. Good quick read! Yes, I agreed that important to make your CTA a color that doesn’t get lost in your site and brand colors.

  2. Nice post, Taruna! I’ve read a good deal on using color to boost conversions, but there’s a lot of information out there and it gets overwhelming quickly. So I appreciate you breaking it down into basic principles. I especially liked the idea about training your visitors with a consistent color scheme. Now to implement it on my site! Thanks.

  3. Thanks Arec
    Glad you liked the post 🙂

    Thanks Corey 🙂
    Would love to hear how it works out for your website.

  4. Hey Taruna,

    I totally agreed with your point here, unless you make your CTA button contrasting opposing to your background color it would not generate higher conversion, as users would go away without noticing it.

    As a marketer your first step should be to grab the attention of your audience to your desired CTA only then they can perform the CTA.

  5. Great article – never heard of the Von Restroff effect (similar to the Gestalt principle of contrast I suppose)

    RE: Point 2, it is also advisable to avoid high vibrancy colour combinations that can cause phantom shadows, perceived vibrations or other visual effects.

    The reason is that these artifacts and effects can cause eye strain when focusing and may cause users to naturally look away – just need to be sensible with colour selections.

    There’s many colour contrast tools to check WCAG levels, which is a good starting point to make sure your button label is readable on the background colour.

    Here’s one I regularly use: http://www.paciellogroup.com/resources/contrastanalyser/

    – Chris

Leave A Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Close