How To Choose The Right Colour For A Call-To-Action Button

Does button CTA colour play a role in getting clicks?

An eye-catching, high-contrast button is key to getting your users’ attention, but that’s not all. The colour of the button is actually an important consideration in driving users to click. One study showed that people were more likely to click on buttons that matched their brand’s colour scheme. Another found that using red buttons generated more clicks than green or gray buttons. This is likely because our brains see red as a strong call to action, lending an urgency and level of importance to the button. 

Four tips to help you choose the colour of your CTA button

Every colour has its own meaning and evokes a different emotion from the user. Using colours effectively will help you communicate with users in an easy way and ensure more conversions for your business.

Choose a colour that fits in with the overall theme of your brand

If you look at the buttons on your own website, or a website for a company you know well, most likely their button colours will match their brands. While this is not always true, it is often the case. For example, Amazon uses orange as their primary brand colour and they have orange buttons on their site. Google uses blue and yellow as primary colours and uses them on their buttons. The reason behind this is that we associate colours with feelings. The same way we might associate green with nature or red with love, we also associate certain colours with certain brands. So when you see that colour in the context of something else (ie a button), it helps us to connect it to the brand.

Think about what emotions a colour could evoke in a user 

The colour of a button could have a huge impact on the experience of a user. A blue button might be associated with calmness, while a red one might be associated with urgency or passion. Think about it: when you’re at a hospital, do you see any red buttons? Probably not—red is usually reserved for dangerous or critical situations (like “emergency exit” or “do not press”). In contrast, if you see a blue button, you’re probably safe to press it.

On the other hand, maybe you want your users to feel something other than safety or calmness. Maybe you want them to feel excited and energized by their shopping experience. In that case, orange and yellow are the colours for you—they’re stimulating and energetic! Or perhaps your users just need to be relaxed and feel like they’re in safe hands (for example, when using an app for banking): in that case, green is the colour for you, as it’s known to create feelings of serenity and reassurance.

Take into consideration the colour of the font in the button 

The colours you choose for buttons can affect their readability and accessibility, so it’s important to make sure that there’s enough contrast between the button and its text. Try to stick with black or white for your button copy so that the contrast is always clear and visible. Also, it’s best to avoid yellow, blue, or red buttons against white backgrounds; these colours are often associated with warning messages and can be distracting.

Button colours can also coordinate or contrast with website fonts. You might want to use your brand’s colour for buttons, especially if it’s a bright colour that has a good deal of contrast. If you do this, try using a darker shade of the same colour for your button’s hover state so that it doesn’t become difficult to read when highlighted. Alternatively, you could go with a contrasting colour that pops nicely against the rest of the site: try using a complimentary colour scheme generator like Adobe colour CC to find different shades of colours that work well together.

Choose contrasting colours to draw attention to the CTA buttons

You’ve probably noticed that a lot of websites have buttons that stand out—typically in bright green or blue. It’s an easy way to draw attention to the call to action, and in many cases it can make a difference in the click-through rate. However, there’s a trick to this approach: it needs to be done subtly. This is especially true if the colour you choose is bold. A contrasting colour draws attention to the button, but if it’s too extreme, looks jarring and even aggressive. To prevent this from happening, use a complementary colour on a dark background, or shades of the same colour for subtle contrast on light backgrounds. This will give your button the attention-grabbing quality you’re looking for without making it look like you’re trying too hard.

We at formX have written extensively about how CTAs can help you boost conversion rates. Check them out here:

A Complete Guide To CTAs, The Ultimate Weapon To Increase Conversion Rates

How To Brainstorm For CTA Copy Using AI Writing Tool (And Save So Much Time)

7 Ways To Increase Your Conversion Rates By Simply Altering Your CTA Placement

How To Write Attention-Grabbing, Irresistible CTAs


Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top