Call To Action Buttons and the Psychology of Color

By combining scientific studies on color with some design principles, you can create a great call-to-action button for your website and improve its conversion rate drastically.
A CTA-button has 4 important tools to achieve this: placement, shape (and size), message and color. In this article I will talk about the aspect of color. But first things first…

So what are call-to-action buttons?

Just imagine that your website is a flow of actions which users have to follow in order to find whatever they were looking for. To make things easy for them, it’s absolutely necessary to design this flow as smooth as possible (meaning user friendly) and that you guide them to the desired page without any interference.

Because some of these actions are more important than others, they’ll have to stand out from the rest of the interface. You want to grab the user’s attention, trying to persuade them to take action (call to action). These actions are mostly made with the help of a visual marker, the call-to-action button. Some examples of possible actions: buying a product, subscribing to a newsletter, setting up a new account, submitting a form, downloading the latest version of a software package, …

But why are colors so important?

Psychology of color

Every color evokes a different feeling or mood with people and therefore result in a different reaction when seeing the color. Doctors and nurses wear white, which is a sign of sterility. Gym rooms are often painted blue because studies have shown that weightlifters are able to handle heavier weights in blue gym rooms.

As you can see, colors are a very powerful tool in encouraging or blocking certain feelings. This means you can somewhat guide your users through your interface by letting them make the choices you want them to make by using the correct colors and color combinations. But don’t start to collect color schemes just yet. There are still one or two things you need to know.

While the perception of a color is subjective, some color effects have a more universal meaning. Example: blue is a cold color, red is a warm color.

A second thing is that the perception of color is culture based. Let’s take black (which is scientifically not a color) as an example. While black is associated with death and mourning in many cultures, it also represents life and rebirth in ancient Egypt.

Susan Weinschenk, Ph.D. in Psychology and author of Neuro Web Design: What Makes Them Click? (Voices That Matter), wrote an interesting piece about it.
Don’t forget to watch the McCandless Color Wheel, which you can download at the bottom of her webpage.

Kissmetrics made a great infographic on how colors affect purchases.

A bit of color theory

As I will explain you later on, it’s best to use a good contrast when designing your important buttons. When speaking of contrasting colors I actually refer to complementary colors. Complementary colors are colors which are on the opposite of one another on the color wheel (see image below). When placed next to each other, complements make each other appear brighter.

The color wheel.

The Resumator (see image below) used a nice looking red CTA-button for a signup-action on a blue background but a blue colored version of the button for the less important actions.

The Resumator

Another example of complementary colors is the use of scrubs worn by doctors while working in the operating room. In most cases the uniform is green or blue. These two colors refreshes the doctor’s vision of red things, or the bloody innards of the patient, making it more clearly to see small nuances of the human body. Red and green are complementary colors.

So what color should I choose for my button?

As I told you in the beginning of this article, a call-to-action button is a collection of 4 things: placement, shape, the message and color. If these 4 aspects are in line with each other, you’ll have a great call-to-action button.

Baring this in mind, you need to know that we have some general design principles and guidelines. If you want a design element to stick out, you can give it the complementary color of the background color (think about the example I used of The Resumator).
Little hint: for large buttons, choose a color that is less prominent (relative to surrounding elements and the background) and for smaller buttons you may want to choose a brighter color. But whatever color you may choose, make sure you design the button in such a way that it is noticeable without interfering with the overall design.

Although this article is based on scientific research regarding color psychology and some design principles, you should always test your call-to-action buttons to see what works best for your website. You can easily do this with A/B or Multivariate testing or you can follow these 5 quick tips to improve your website’s usability.

One of the many examples you can find on the internet is a casy study done by Maxymiser, which clearly demonstrates the power of color in call-to-action buttons. They achieved an increase of 11% in clicks to the checkout area of the Laura Ashley website, by testing color variations and different messages. Check out the case study yourself.

Also, think about the people who are color blind. Ux Movement published a great article about it.