So when it comes to website design and specifically selecting the call to action colour, what is the best choice?

It stands to reason that bright vibrant colors should stand out more on the page and therefore get more clicks, right? Well you would expect this to the case and in many cases this is true, but this does not mean that all of your buttons need to be in bold primaries. As with most things an balanced approach is best select colors that are complimentary colours to your design pallet (see the colour wheel below). A call to action can be in any color as long as it has prominence on the page, obviously though there are some colours that work particularly well, lets have a look at these.

Example of the colour wheel (source Wikipedia)

Green

Green is a colour that is often associate with the environment, medication and can stand for  “go”. Green is a secondary colour that sits on the border of the passive colour range. This in itself is not a bad thing, but introduce red in the equation and green can suffer. This I suspect is why many multi-variant tests favour red of green. Green can be an excellent choice where the overall site design is of a muted palette.

Red

Red is one of the most powerful primary colours and has one of the longest wavelengths visible to the human eye. It is often associated with danger, risk and warnings and it is for this reason caution should be exercised when using it for primary calls to action. For example if selecting red the primary call to action colour then it would be wise to consider another colour for warning and alert messages. That said it can be very effective in drawing attention to a button and many multi-variant tests suggest that it still gets one of the best click through rates.

Orange

Orange another secondary colour has grown in popularly as the colour of choice for the primary call to action on many websites. This is possibly down to it having many of the benefits the “active” colour range but without some of the negative associations of red.

So what other factors should affect our choice of colour for call to actions?

Well for a start there is the environment the call to action will be placed in. I see many websites that simply mimic the colour of the main navigation or logo colour for call to action buttons. The point of the main call to action is that it should stand out from the other elements on the page drawing the attention of the customer to commit to that action. If the call to action colour is competing with other objects on the screen of a similar colour then it will have less prominence and ultimately will be less effective.

 Secondly consider the use of “whitespace” (I am making the assumption of white backgrounds here) . A cluttered, busy page is going to result in the button having more elements to compete against, particularly is these elements use strong colours themselves. Ideally these secondary elements should be kept out of the way away. For example if it is a product page consider grouping the product name, price “add to basket” button and any other essential infomation, but allowing space around this.

Finally, consistency of colour is just as important as the colour selected for the call to action itself. If the “buy now” button on a product page is green then green should be used on the primary calls to actions throughout the basket process. I am still surprised by the number of websites that revert to default grey buttons once in the basket process, making the customer having to “relearn” where they are supposed to click next. Consider the traffic light analogy when the light turns to red chances are that your right foot is already on the brake pedal long before your conscious mind has told you that “it is a red light l need to step on the brake” The same should be true of your website design, the colour should guide the subconcious through the process so that the customer is not asked to think more than is necessary.

In summary you should select a call to action button colour that contrasts the dominate colours of the website design. If you have the opportunity to run multi-variant testing with different colours do so, this is a relatively quick and easy way to test the effectiveness of your website’s design. Finally leave sufficient space around button to allow the button’s colour to stand out and make sure you are consistent with your use of colour throughout the buying process.