Color vs Contrast: Which One Brings More Conversions
The majority of us are familiar with color psychology; there are hundreds of articles, case studies and even infographics on the wild that open this issue from different angles. Color affects us, influences our choice and impacts our decision-making process – there is no point of arguing with that. However, you should not blindly follow its principles since there is always one catch. Today we are going to examine the role of contrast in creating striking and attention-grabbing CTAs.
Changing color from soft and calm green to drastic and bold red, to draw more attention, may not always save the day. If there is no good base for making it look prominent, splashy or ‘loud’, nothing will happen. In this case, by ‘base’ I mean contrast. We have rounded up 10 examples with a well-thought-out and sharp contrast and 10 examples where action buttons safely blend in the environment, and, as a result, have lost their importance. Draw your own conclusions.
Color vs Contrast
Here contrast steals the show:
ESPN Sports Programming
The front page of ESPN Sports Programming is a great example that shows how color can play a significant role in increasing conversions. There are 2 CTAs: which one strikes your eye first? Of course, the red one since thanks to the drastic tone and solid backdrop it looks much more appealing rather than the simple lettering on the right.
Moovrs
Though the button does not leverage a vaunted red tone that is considered to be the winning solution, thanks to the strong contrast between it, the background and the main color scheme, the CTA immediately catches the eye, becoming a natural focal point.
Metaverse Mod Squad
This is another excellent example of a design that meets the rules of color psychology. Here red is used as an emphasis tool that easily separates such important details as CTA, hamburger menu icon and ‘Hire Us’ link from the overall content flow. Although the backdrop and artistic touches produce an overwhelming effect, those 3 always stay in focus.
S-Trip
Here the designer has taken care of making the buttons look distinctive and eye-catching. Utilizing a bright yellow shade that stands in startling contrast to the backdrop, the artist has managed to highlight the importance of these two components.
Squad Digital
Saturated red with a crimson hue puts the CTA at the center of attention. Though of course, you should not diminish the role of the dark almost monotone backdrop, a ton of white space and well-tied together text block at the heart of the page that do not create any other focal points.
El Passion
Although green is usually associated with serenity and naturalness that perfectly fits into an environment, in this case it allows the button to stand out from the scene and call the overall attention. The effect is obtained thanks to the overshadowed image background and a scant amount of text.
Icons Responsive
Icons Responsive has a pretty busy homepage with lots of interesting stuff. There is an animation that is worth your attention, a brief description, relatively huge logotype, a navigation bar. Nevertheless, despite this content-intensity, 2 buttons easily excel and grab the attention.
Chatrify
Not only does the creative team opt in favor of a bright, warm yellow color that sets the buttons apart from the environment, but it also uses size in order to add visual weight and significance to the CTA. As a result, ‘Get started now for free’ has got top priority.
Teletrack Plus
Teletrack Plus has a magnificent businesslike atmosphere that exudes an image of trust and dependability. Although the landing page is content heavy with its device mockups and list of features, the relatively small yet highly saturated yellow button placed almost on the bottom is distinct and eye-catching. As usual, skillful choice of tone that breaks away from the main color palette saves the situation.
Mobirise
Again, which one button does seize your attention first? I believe, many of you will agree that the solid orange button looks more clickable and striking rather than the elegant ghost button.
To be honest, to find examples of bad contrast and seamless coloring was not so difficult, they appear all the time. Nevertheless, we have included examples where the CTA needs some enhancements to bring more conversions.
100 Thoughtful Acts
100 Thoughtful Acts is a matchless website with impressive aesthetics. However, the tiny CTA that finishes off the text block looks a bit dim. Although red seems to be the right decision, it helps the button to blend in rather than to stand out.
Lucerne Health
Lucerne Health has such a spectacular photo background that it is hard to tear your eyes from it. The CTA perfectly supports the theme and leverages a calm and serene blue tone. However, such coloring only keeps it away from becoming a focal point.
Convect Air
Convect Air is another excellent example of website design where the CTA is lost in a lavish background. Lack of contrast and a small size play a bad joke, depriving it of due attention.
Soundsnap
Soundsnap has 2 buttons that look alike, and as a consequence, have the same priority. What’s more they ideally blend into the environment. So that, the only thing that instantly strikes the eye is the narrow yet bright and bold sticky info bar at the top.
Wiser Digital
The ‘Find out more’ button ideally echoes with the overall design and makes a tiny contribution to the aesthetics. Although the backdrop serves as an excellent foundation for text and graphics, the button still is not sharply defined.
Spire
Here the CTA has a more distinctive appearance; the only drawback lies in its size. An interesting backdrop with some fancy overlay effects has a great visual impact, to say nothing about the huge white solid tagline that takes up the central position, so that the button naturally seems to be ‘on the outskirts’.
The Green Guys
Yellow and green run the show here. Although the white color in comparison to these two looks prominent, it does not stand out enough to become a centerpiece, especially when the size of the object is so small.
Martin Wren
Martin Wren’s website serves as evidence that bright tones win over gloomy ones. Although the dark button goes perfectly well with the design and adds a note of sophistication, the orange CTA is more powerful in terms of increasing conversion rates.
Royal Albert Hall
The website is based on a lush, picturesque background that creates the overall aesthetics and conveys the message. Although the nameplate looks distinctive thanks to sharp typography and its relatively big size, the search field and submit button look smooth and seamless.
Desperados
Desperados has amazingly creative aesthetics achieved by a decorative font and ornamental graphics. To put emphasis on the CTA the designer leverages additional graphical objects.
Conclusion
Color choice plays a huge role in website design creation; however, as practice shows, maintaining the contrast between background and CTA is of great importance. If you want to increase conversions and improve interaction with users, you should take into account and manipulate with these two factors in mind.
