Red-buttons and green buttons in various real world settings.

When it comes to calls to action, ‘button color’ is one of the classic metrics to A/B test. It’s also a hot discussion topic on design forums, if this Stack Exchange UX discussion is anything to go by.

In the discussion, a user asks:

Which option is more intuitive for the user?

Here are the two options he presents:

Delete button rendered in red - Cancel in green

Delete button rendered in green - Cancel in red

Whilst one reader dismissed the options out of hand — citing the reasons as being 10% of males are red/green color blind — the question certainly raised a lot of intelligent debate.

This includes discussion on the psychological meaning of color, along with the platform used and the physical placement of the buttons.

The Meaning of Color

As far as standard online usage goes, red has been commonly associated with the delete button. It also typically denotes danger in Western civilisations — think of stop signs, fire engines and tail lights.

This is likely to be the reason for using red for delete buttons — it naturally gives us pause due to its connotations.

Of course, color psychology isn’t hard-wired into our brains. Like spoken language, we learn it from childhood, and, like language, it varies from region to region, and even era to era.

Today most parents would get strange looks if they dressed their baby boy in pink, yet this was the norm a hundred years ago.

Check out this great color wheel for a quick reference guide to what colors mean in various cultures. This is an ideal tool if you’re thinking of retargeting your site design for particular geographic regions.

This is true when it comes to your phone too: the red button warns us that we’re going to cut off a call, whilst green gives us the message that we’re going ahead with than call. There’s little getting away from what red means in Western societies.

Green also means ‘go’ in many countries, as well as a sense of nature, and gives us a sense of ‘going forward’ and growth.

However, as one discussion participant pointed out, it also raises questions surrounding ‘false positives’.

Both ways seem to pose a false-positive paradigm. This can be simpler and not have to force the user to spend time making sense of the color-to-label association.

In order to overcome associations, the commenter points out that it’s more effective to simply de-emphasize the button that you prefer the user not to take. This means the user can spend less time processing what should be a simple choice.

For you consider, that they initiated the action. The confirmation of that action shouldn’t need to be a 50/50 yes/no question.

This can be done most effectively by simply muting the color that you don’t expect the user to take. This could be a duller green or even more effectively as a neutral gray color.

Case Studies

The great ‘red vs green’ war has been a long-running battle on the web, with no definitive winner.

There are plenty of case studies to be found online, but many of them are conflicting. This is more than likely due to what’s being tested for what platform, rather than being as straightforward as ‘Red Beats Green‘, as put forward by HubSpot concerning the Performable A/B testing.

In this test, two pages were used — the original page used a green button color and a duplicate page used a red button. They found that, interestingly, in this case the green had a much bigger impact than red and drove conversions 21% higher.

Red vs Green buttons compared on Site Peformance.

The test was carried out over a few days of traffic and the pages received around 2000 visits, with button clicks being measured by Performable. Every other single aspect of the page was the same yet the results far exceeded what was expected.

Similarly, a test run by Dmix comparing the feeback for red and green buttons also increased conversion rates — this time by a huge 34%.

dmix

This, as well as further tests that use red vs green (or a deep orange in place of red) all reported that red converted at a higher rate.

What Does it Mean?

Going back to the original discussion, it can often be the ‘pairing of colors’ rather than the actual colors themselves which could give the designer a problem.

Whilst the participant that cited color blindness as a reason to avoid the red/green nexus was shot down in flames — they may have had a point.

Simulation: Red and Green as seen by color blind users

Simulation: Red and Green as seen by color blind users. source: http://uxmovement.com/content/never-pair-green-and-red-together-on-the-web/

As you can see in the diagram, people that suffer from color blindness see red and green very differently and it’s hard to distinguish one from another. As red and green are opposite each other on the color wheel, they are complimentary colors, so lack contrast.

The way that we process and interpret color means that if you place a red and green button together, the easiest route for our brain is to take no action at all.

As we’re all well-accustomed to CTA buttons, using both red and green together actually has the opposite effect to what we’re attempting to do. We get locked by analysis paralysis.

With this in mind, choose either green OR red for a call to action — but never both — is the best way to avoid this issue.

It’s also worth thinking about contrast with other colors on the page. Clearly, if you have a predominantly green page, then a green button is unlikely to stand out.

What about Orange?

As we saw earlier early, some designers opt for a dark orange color instead of red, as this contrasts better with some backgrounds.

To test background colors and button colors for contrast, try Joe Dalson’s Color Contrast Comparison tool to make sure that there is enough of a difference for color blind people to see the button clearly. You should also test the contrast of the text color used on the button for best results.

I came across an article recently that said orange is the future when it comes to CTA buttons.

That’s certainly been the case for Amazon — always obsessive user-testers — which uses orange in most of its most important call to actions. But what associations does the color carry?

Orange isn’t as intense as red and is thus more inviting, without having the association of urgency. It’s a friendly color and one that works well with brands that prefer to come across as sociable and approachable.

However, since red is associated with urgency, I still believe it is the default choice for CTA button, simply because it psychologically prompts the user into taking immediate action.

All in all, it seems that red is the color for CTA buttons, preferably used on its own, tested for contrast when button text is used and against the site’s background colors.

Green can work too, but you can’t argue with weight of studies that underline red’s effectiveness.

Whether that will be enough to satisfy the ongoing red vs green row however, is debatable.

Kerry Butters
Kerry is a prolific technology writer, covering a range of subjects from design & development, SEO & social, to corporate tech & gadgets. Co-author of SitePoint’s Jump Start HTML5, Kerry also heads up digital content agency markITwrite and is an all-round geek.

  • http://bluesunglasses.cz/ Michal Sevcik

    Use red for removing, and blue for confirmation. Usually just one colour and the other options white or less emphasised. So it depends if you are deleting or confirming.

  • Jingqi Xie

    I prefer that the primary or intended button be of the site’s primary hue, others being sorts of grey.

    • http://markitwrite.com/ Kerry Butters

      It could be said that it’s subjective, in that case, don’t you think?

  • Alex Walker

    I think most of us agree that the secondary action button (i.e cancel) it best kept white or gray.

    Personally, I like the idea of choosing a sitewide primary button color, but also reserving red for ‘Delete’ and ‘Remove account’ buttons, and other non-retrievable situations.

    • http://frontaal.net Roger

      I’d say using red buttons for dangerous buttons likely lead to having the opposite effect (the polar bear phenomenon, http://www.apa.org/monitor/2011/10/unwanted-thoughts.aspx ). Emphasizing that something is discouraged (using ‘red’), leads to, indeed, emphasis while in most cases people are better of not noticing them. (You’ll see them soon enough if the time comes that you need them.)

      Color might not necessarily be the best way to solve the issue of dangerous buttons. Other ways are e.g. building in an ‘are you sure’, or better yet, providing an option to undo the action.

      And again, deciding the button color shouldn’t be based on personal preference (even if you are a designer), consensus, or about using brand colors, it’s about making a button stand out relative to the other colors used on your site (what about a red site?), and testing what leads to actual improvement (i.e. measuring it) in your own situation.

      • Alex Walker

        But by that thinking, wouldn’t red traffic lights be more effective if we just switched off the green?

        I’m totally happy for them to notice the red button at this point.

        Case in point: A gallery of images that each have a small trash can. I can’t imagine many situations where you’d want a screen full of red trashcans.

        If they clicked one, a modal might ask ‘Are you sure? {Delete this image} {Cancel}’.

        I’m not trying to avoid that button being noticed at that point.

        • http://frontaal.net Roger

          Colors for traffic lights are a totally different animal: traffic light colors let everyone know what they need to do at that moment. Taking action based on whatever state (color) it is in, is mandatory, for everyone, at any time. Lights off are an implicit signal that it is broken. Introducing this kind of doubt in traffic is probably lethal.

          In software or on websites, there is often no such thing as mandatory actions that apply to every single user or visitor (except maybe in forms). Instead, the highlighted button often stands for the ‘recommended’ action. Click-happy people tend to click on these highlighted buttons, red or not. So, in case of your modal with the ‘are you sure’ question, I might still opt for a solution like grovberg mentions (but with the plain text link to confirm the delete), which helps click-happy people, while still helping others. In addition, you could highlight the ‘You are about to delete this’ using a red sign icon in the modal, because you actually want them to notice the caution, not the button itself.

  • grovberg

    It’s interesting that we’re restricting this conversation to color choice, as if that’s the only way to distinguish the two options. I’m quite fond of the WordPress approach, where the most likely, positive choice is a button while the “Nope, never mind.” choice is a plain text link. It makes it immediately obvious which is the most likely option, catches nearly every user who doesn’t bother to read, and gives enough information to make your intention clear via the text.

    It’s not as pretty though.

    • http://markitwrite.com/ Kerry Butters

      And therein lies the issue? It’s not as pretty…

  • Stevie_D

    First – I agree that those buttons shouldn’t be red/green but should be colour/grey. Colouring both the Yes and No buttons in is unnecessary, visually jarring and makes the user think more.
    Second – why only consider orange as an alternative – how about blue? People are used to blue being a call-to-action on the web, ever since hyperlinks were shown in blue way back in the 17th century (or whenever it was), and blue is still the most common colour for links. People are used to seeing blue and click on it.

    • http://markitwrite.com/ Kerry Butters

      Well, to answer your question from the writer’s point of view, considering other colours for the purposes of the debate could have meant a very, very long article ;)

  • Alex Walker

    It’s weird isn’t it? The contrast is one thing. I just can’t believe THAT layout is the best way to tell that story.

    I mean, a grid might not be sexy, but you could scan straight down the ‘green’ column and see what emotions each culture attributed to it. I found myself turning my head upside-down trying to understand that strange sunburst layout.

    The funny thing is: they’ve organised the emotions/states alphabetically – Anger to Wisdom — which is naturally linear. Ok.

    Then they’ve shoehorned that linear, english-alphabetically sorted data into a circular layout — a layout that implies something without a natural start or end.

    What’s the best example of a circular data layout that works?

    Probably a color wheel.

    • M S

      But someone thinks its “beautiful” so fuck usability..

      • http://markitwrite.com/ Kerry Butters

        It looks very much as if it’s been designed with printing out in mind, more than anything else I thought. Unless you print it, there’s a very good chance you’re going to get a neck injury as well as worry about your eyesight. I also struggle to understand why they have used yellow + gold, silver + gray on the key??? Seems like a great way to muddy the waters even further…

  • http://activeseo.com.au Jonathan Keller

    I am so glad that you brought up the colour blind issue in this article. It was the first thing I noticed for the 2 colour choices considering I am one of those that are colour blind. The dark red on a dark background would make me more inclined to click “No, keep it” – But I can imagine this would suffer from analysis paralysis for most people.

    • http://markitwrite.com/ Kerry Butters

      Thanks Jonathan, nice to get the actual ‘real world’ perspective of a colour blind user :)

  • http://markitwrite.com/ Kerry Butters

    Thanks Roger, yes a little more in depth the article you refer to, but using essentially the same sources. I would agree with rephrasing as I would performing testing on CTA buttons anyway, if it’s something that you consider very important to the site’s conversions, then it would be madness not to carry out A/B testing. Saying that, I’m sure there are plenty of clients out there that will read any of the three highlighted case studies and insist upon red based on that.

  • joey

    well. https://www.guildwars2.com/en/ uses red and green at the same time, whats up with that?

Related books & courses
Available now on SitePoint Premium

Preview for $1