What Is The Best Colour For Your Call To Action Button
In 2009, Google experimented with 40 different shades of blue for the links on results pages. The test generated a reported $200 million in extra revenue (and led to a high-profile resignation). In 2016, the company tried using black text for the links. This time, the results were disastrous.
Colour is an essential part of design, but it its not only software developers who worry about it. In marketing, no question has captured the imagination as much as the best colour to use for a Call To Action button.
The Best Colour For Your CTA Button
- What a Blue Button Says About You
- The Big Red Call To Action
- Getting the Green Light
- Keeping Your Button in the Black
Can a colour affect your mood, your opinion, or your behaviour?
In the early days of Conversion Rate Optimization (CRO), experts promised their clients huge returns from simple website edits. They don’t make these claims anymore, and CRO has become more rigorous. Even so, digital marketers face the same question when creating an email, landing page, or notification: what colour should I choose for my Call To Action button?
Armed with new techniques for measuring physical responses, scientists have conducted studies associating particular colours with bodily reactions. A number of these studies have shown how colours affect heart rate and blood pressure. However, no experiment is able to remove the impact of context or social conditioning. In fact, the Journal of General Psychology published a study in 1995 that identified strong links between “favourite” colours and physical reactions to them. So, even if a colour can give us a subtle nudge in one direction, it is unlikely to be a universal effect. It is also likely to depend on learned responses and context.
Despite this, there is a connection between emotions, learned behaviours and colours. These associations are why the world’s largest technology company spends so much time and money testing the colours they use.
Your Call To Action exists in a colour scheme, and the way it works with the other features is important. There are some basic principles that affect how users experience the colours on your website. Taking a colour wheel, the scheme you develop can be:
- Complementary: Colours are opposite each other on the colour wheel
- Analogous: Colours are next to each other on the colour wheel
- Triadic: Three colours evenly spaced throughout the colour wheel
- Square: Four colours, evenly spaced throughout the colour wheel
The most common approach used for CTA buttons is to incorporate them into a Complementary or Triadic colour scheme.
Complementary colours (those opposite each other on the colour wheel) give the greatest contrast. Using them for a Call To Action button allows you to draw attention to it.
In 1933 the German psychologist Hedwig Von Restorff published the research she had been compiling for her PhD. Her research described a principle known as the Isolation Effect, in which subjects remembered distinctive items (those isolated from a series) more than similar ones. By using contrasting colours for a Call To Action button, you can make it stick out in a visitor’s memory.
Triadic colours (those spaced evenly throughout the colour wheel) give a different effect. When balanced carefully, the colours you use can combine to create a “chord”. The tones are distinct, but combine to establish a harmony. Not only does beautiful design improve your branding, it also increases the usability of your product.
Used by: Facebook, IBM, Microsoft
Blue is the third most common colour used for a Call To Action button. However, among B2B websites and communications agencies, it is by far the most popular.
6 of the top 10 B2B companies have blue as a primary or secondary colour in their branding. They choose it for one simple reason — it is associated with trust.
Age of the Blues
French historian Michel Pastoureau has traced the history of the popular perception of blue. Once associated with heat, and considered ugly by the Ancient Greeks, blue is now the most common “favourite colour” in Europe and America. In the European Middle Ages, blue was most commonly associated with royalty and the Church (particularly the Virgin Mary). In the modern era, blue is more often associated with internationalism and the Earth itself (when seen from space).
When to choose blue
For an e-commerce site, blue colour schemes can be a useful way of conveying trustworthiness. Countless surveys have demonstrated its association with natural images and tranquility. However, if your website is already blue, it might be best to pick an alternative colour for your Call To Action button.
Used By: Netflix, Target, Coca-Cola
In May 2005, researchers at Durham University released a study that confirmed a well-known fact: red teams win more often. The study was based on the Olympic Games of the previous year, considering events in which the competitors were randomly assigned different coloured outfits.
The association between red and particular emotions (passion, rage) is well established, but these associations vary in subtle ways with cultural context. For example, in areas of China, red coloured packets are associated with gifts of money and brides often wear red dresses.
What Does Red Say About You?
In 2007, a survey of “Add To Cart” Buttons by Getelastic found that red was the most common choice. The most common copy was simply “Add to Cart”. Whilst the world of eCommerce seems to have become more varied since the survey was conducted, this formula is still very popular.
A famous A/B test, the results of which were published in 2011, highlighted the value of using red as a Call To Action button. The marketing automation platform Performable ran a test on their “Get Started Now!” button, introducing a red version of the usual green button. The results of their test were convincing: the red Call To Action button gave a 21% increase in conversions.
Whilst the results were conclusive, interpreting them was more complicated. The red button performed better than the green one, but this might not reflect a general advantage. When seen alongside the green website, Performable’s red button created a complementary colour scheme, enhancing its visual impact.
Used By: IBM, Argos, SportsDirect, Microsoft
Green has a unique place among Call To Action buttons. In the past, companies have used it because of its association with action and forward movement.
More recently, the public interest in environmentalism and ecological concerns has seen a number of major brands embracing the colour green. However, green CTA buttons rarely appear in high-end or luxury stores.
Why Go Green With Your Call To Action?
In the early days of eCommerce, green buttons were by far the most common form of Call To Action. The use of green in everyday architecture (traffic lights, safety signs, tick icons) is overwhelmingly positive, and popular anxiety surrounding online payment made it important for websites to reassure their visitors.
However, the association of big green buttons with supermarkets and discount eCommerce stores has caused luxury brands to abandon the design.
A notable exception to this rule is the world of SaaS, where green is a common colour for CTA buttons. In our survey of 20 top SaaS websites, the following colours were most frequently used for CTA buttons:
One reason for the prevalence of green in SaaS CTA buttons is that the most common brand colour for SaaS companies is blue. This also explains why blue is the second most common colour chosen in the software industry.
Used By: Topshop, Net-a-Porter, The Body Shop
Black is surprisingly popular for Call To Action buttons. Brands like Zara, Dorothy Perkins and Boohoo favour a black button for one reason: it conveys luxury.
For this reason, black buttons are the most common choice for fashion and clothing websites. In our survey of the 20 most popular fashion websites, the colours used for Call To Action buttons were:
A Luxurious Call To Action
The association between the colour black and luxury fashion developed in the mid-twentieth century. Fashion designers such as Coco Chanel, Gianni Versace and Yves Saint Lauren favoured black for its simplicity and the depth it gave to their outfits.
The popularity of the colour for CTAs may also come from the fact that computer backgrounds are often white. The use of black provides a stark and elegant contrast, particularly in pages with few distracting features.
Whilst the claims made on behalf of CTA buttons by Coversion Rate experts have been moderated in recent years, the design of Call To Action buttons has a big role to play in conversion rate optimization. Companies like Amazon incorporate the buttons within a carefully crafted CRO strategy.
A Button for the “Everything Store”: Orange
Despite the changes that Amazon’s Add To Cart button has gone through over the years, the colour has remained remarkably consistent. There is a phrase among CRO practitioners that describes the design: the Big Orange Button.
Amazon’s core brand colours are black, white and orange. Black and white compliment each other perfectly, while the orange accents stand out and draw the eye towards important features.
Credit Report Websites: Blue and Green
Requesting a credit report involves giving a large amount of personal data to a third-party, so it is important for the websites to appear trustworthy. Blue and green are excellent choices, as they both have associations with natural and calming images.
These CTA buttons, taken from the best known credit report websites, are designed to reassure the consumer that they can trust the service being offered. The effect is enhanced by the pastel tone and rounded font chosen.
These particular buttons have a more difficult job than most. Not only do they need to provoke action, they also need to explain to the user what they should do. A credit report is not as tangible as a normal consumer product, so the copy has to contain information that can’t be taken for granted. The buttons combine precise yet dynamic copy with reassuring colours.
Call To Action Buttons and A/B Testing
What to the following buttons have in common?
These Call to Action buttons are both for the same product. Ikea offers its furniture to French and British consumers in different ways, according to a process of testing and adjustment.
A Ghost in the Machine: See-Through Marketing
In the last few years, a new type of Call To Action button has become popular. Usually reserved for secondary CTAs, the ghost button is an elegant way of de-emphasising an option. The button is transparent, with a thin border that matches the text inside.
Whilst these buttons break the time-tested 1-1-1 rule (one value proposition, one clear message, one Call To Action), they offer a way to structure multiple options without drawing attention away from the primary goal.
The variety of colours chosen by successful eCommerce websites demonstrates an important point: there is no “best” colour for a Call To Action. Instead, the most successful websites incorporate the following considerations into their button design:
- Brand colours – the colour you choose should complement those already on the page
- Contrast – your button should stand out
- Tone – buttons should match the tone of your page, and the offer it describes
- Industry – your design should not deviate too far from your customers’ expectations
In other words, the most important factor is context.
Not only does the colour have to meet these criteria, but the other aspects of your Call To Action button are equally dependent on content. Your copy should be appropriate to the market, audience and branding of your products. The placement of your button is critical. It should be surrounded by an appropriate amount of empty space, but needs the elements surrounding it to give it context.
A Call To Action is only one part of a successful Conversion Rate Optimization strategy. In order to ensure your eCommerce conversion rate stays competitive, you should continue to define your Value Proposition and incorporate your CTA button within persuasive content.
Once you are happy with your creation, there is one final step before you can sign off on it: testing. There is no way to predict how users will respond to your design, so data is the second-opinion you cannot do without.