A well designed CTA button can increase click-through rates which, in turn, impact SEO, and color is a major design factor. So, which color should you use? The truth is there’s no single easy answer but luckily, a lot of research has been conducted on the topic, and we’ve compiled some examples of good practice related to use of color in CTA buttons and strategies to help you increase conversion and click-through rates.
Color is a subjective experience, and the effect of any particular color on a person has as much to do with the color itself as with the viewer’s culture, past experiences, mental and emotional state. For example, purple or white can symbolize vastly different things in different parts of the world, which is why choosing color schemes in web design demands research and a solid understanding of your target audience.
Research from DesignAdvisor highlights many success cases where a particular color has made a huge difference in conversion rates. For instance, VegasSlotsOnline increased conversion rates by a whopping 175% after changing their CTA button color from green to yellow. When chosen wisely, color can become a tremendous asset in CTA button design. Here are a few things to know when designing your CTA button.
Size and placement
Ultimately, the success of your CTA button will depend on more than color alone. Thinking about size and placement is a good starting point before moving on to color schemes. A good rule of thumb for drawing attention to your button is making it larger than your business’s logo. As with most things in life, moderation is key so avoid going too large with your CTA button – the effects could be comical at best and impractical at worst. Aim to place the button in a prominent location, such as on top of the page or surrounded by white space.
Contrasting Colors
Think of color in terms of contrast – making use of highly contrasting colors can help draw user attention to specific components of your site such as CTA buttons. For example, if you place a yellow button on a grayscale background, users are bound to notice it. The color orange is a popular choice for achieving contrast since it is likely to stand out against other elements of your site. However, if your design as a whole happens to be dominated by orange, a wiser choice would be another contrasting color, such as green.
Secondary Colors
Sometimes, the nature of your business requires more than one CTA button. For example, you may be inviting users to either start a trial or buy a product directly from the website. In these cases, color can be a great way to separate the primary and secondary actions required. Using a secondary color can establish the difference between the primary and secondary CTA button without taking too much of the primary button’s spotlight. For example, if the primary button is red and the secondary blue, users will be naturally drawn to the primary one first, and then to the secondary one.
CTA on WordPress
CreatorSEO™ have developed a plugin for WordPress that allows you to easily create and style a Call To Action button anywhere on your site. The plugin is available directly on your site from the WordPress repository. Visit the WordPress Plugin Repository or CTA Button Styler on CreatorSEO for more information.
For more insightful facts and stats on the power of color in CTA button design and more have a look at the attached infographic.
Infographic published with permission from https://designadvisor.net/blog/psychology-of-colors-infographic/