photo of a man in a highly contrasted background and contrast heading

How Contrast Can Increase Your Conversion Rate

What is contrast and why is it important in web design?

Contrast refers to the arrangement of opposite elements. It is one of the most important principles in graphic design. 

With the help of contrast, you add variety to the page and help to distinguish the elements from one another. Well established contrast will create a visual hierarchy on your page. It will also grab users’ attention to desired elements.

Excellent web design is not only supposed to look pretty. It must also be functional and achieve certain results. You have to be able to communicate with your users through your layouts.

Most often, web design is directed towards business objectives. For example, the design should inspire users to consume content and to respond to Call-To-Actions.

In case you asked yourself how to do it, there are several tried-and-true design principles. These principles will make your design more engaging. So let’s dig in!

Different types of contrast that can increase your conversions

By now, you should know that contrast is an important tool in web design. Besides, Nielsen Norman Group proved that most users do not read the articles, they scan them. The average user spends only 15 seconds reading the actual text and scrolls through the rest.

Remember that contrast helps certain website elements stand out from the rest. Therefore, a well-established contrast on your webpage would lead the users straight to the desired elements, for example, your CTA. Naturally, that directly parallels with increased conversions.

Below you can get familiar with different types of contrast, which you can use to arrange objects the way you want them to appear in your customers’ eyes.

Color

In a plain manner, if two colors are different to each other they have high contrast, whereas if they are very similar then they have low contrast. 

beatport landing where key message and CTA are highlighted with color contrast
beatport landing where key message and CTA are highlighted with color contrast with Attention Insight heatmap

According to Jennifer Fleming, the author of  “Web Navigation: Designing the User Experience,” it is important to establish an information hierarchy to organize information into clear and logical categories. One of the most powerful ways to achieve it is through color contrast:

 “Color and contrast show relationships between items, establish importance, and most importantly draw attention. Color is also an excellent way to show a continuing path”

So you may ask which color would convert best for my CTA button?

When it comes to calls to action, button color is one of the longest-standing debates in the world of conversion and optimization. There are many interesting A/B testing case studies regarding this question:

  • HubSpot conducted an experiment and compared red versus green CTAs. They had 2000 visits to the page. Their result? The red button outperformed the green button by 21%
green vs. red CTA button
  • Similarly, a test run by DMX with 600 participants showed that conversion increased by 34% when they used a red button versus green.
green vs. red CTA button

Even though red seems like a clear winner in these cases, ultimately, what matters is how much a button color contrasts with the area around it.

At the end of the day, without the data, it might be nerve-racking to choose the best performing color of your CTA. And what if you don’t have enough users yet? 

Attention Insight enables you to test your CTA buttons pre-launch. Here is a perfect example where visibility of the CTA button has increased by a staggering 500% after changing its color and size.

Size

Size contrast also establishes visual hierarchy. The biggest elements on the page are the ones that demonstrate the most important concepts. Consequently, smaller objects are deemed less important and hold less visual power.

landing page of Neil Patel with key message highlighted with size contrast
landing page of Neil Patel with key message highlighted with size contrast with Attention Insight heatmap

As if that’s not enough, experiments show that people tend to be less trustful of the text that is small and hard to read. Most of the time, only highly contrasting elements are noticed and comprehended.   

  • Another way to optimise conversions is to alternate the font size. Remember that 4 in 5 readers scan through most of the text anyways. Since larger text typically gets more attention, you can leave the less relevant text smaller. Just do not go too small where it will not be readable anymore.

Shape

Shapes are extremely important in any design. Even though not everyone notices different shapes on the webpage, they still affect our perceptions subconsciously. Most things on the web are square or rectangular and bring a sense of authority and familiarity. 

  • You can simply create contrast by altering the physical shape of your layout items. The easiest way to achieve shape contrast is to make your CTA round. Circles have historical associations with the sun and other cosmic objects. It will make your design softer and milder, but also more contrasting.

Texture

Texture might be less common than it once was due to flat and minimal styles as the dominant driver in design trends. Nevertheless, it is still a great way to add depth and contrast to attract your users’ attention.

  • One of the most common ways to use texture contrast for your advantage, is to do a clean logo, headline or CTA button against a textured background and vice versa. Typically, the textured part of a website is what tends to appeal to visitors first.

Bonus tip to increase your conversions

In our previous blog post, we wrote that white space increases comprehension, and 80% of readers prefer more white space versus less. The best way to achieve visible contrast is by repositioning your less important elements. You can either remove none essentials or reposition in a way that it would not disturb the most significant elements.

Hick’s law states that the time we take to make a decision is directly proportional to the possible choices we have. To put it simply, by increasing the number of choices, the decision time also increases.

  • ServerDensity increased its revenue by 114% by replacing per unit pricing with packaged pricing. Furthermore, they used color and size contrast for the mid-value plan by surrounding it with a low and high-value plan. By using visual and psychological contrast, ServerDensity managed to double its revenue.
pricing page where middle pricing plan is highlighted with size and color contrast

Conclusion

Contrast is an essential skill, especially in web design. The majority of people have a short attention span and scroll through most of the article. Thus, the good website design must take that in mind and establish visual hierarchy through contrast.

You can modify your page to optimize maximum engagement from your audience by wisely using color and size contrast. Use contrasting colors to increase readability and size contrast to emphasize the most important elements.

Use this powerful tool thoughtfully, and you are bound to increase your conversions through contrast.

Product Hunt deal

FREE for everyone:

Days
Hours
Minutes
Seconds

GET HEATMAP