Color your way to Conversions!
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 a/b 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:
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.
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.
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.
How the above appears to people with Protanopia:
And to people with 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.
How has your experience with website colors been? Tried any A/B tests that worked well? Or may be which didn’t? Write to us at firstname.lastname@example.org