clip_image002

"Contrast is the difference in luminance and/or color that makes an object (or its representation in an image or display) distinguishable." – Wikipedia

In the real world, contrast simply helps us distinguish objects from each other. On the internet, contrast is important because it allows designers and marketers to actually guide the attention of visitors who come to their websites, and this is done with and without color.

How Color Contrast Captures Attention

To illustrate how color contrast is used to make the most important goal element of a page *pop* out, let's have a look at the Mailchimp homepage at different sizes.

clip_image004

Do you see what I mean? Right till the smallest image, the red Call To Action button is clearly visible. This is what great contrast does, makes the most important bits pop up and catch the visitor's attention. Combined with smart copywriting, making something pop can result in wildly increased conversion rates.

Can You Overdo The *Pop* ?

Unfortunately, you can. In fact, it is frequently misused by business types who want their websites to jump out at the cost of aesthetics and professionalism. Designers specially hate any requests to "make it pop". The reason is that "make it pop" communicates nothing yet somehow all the marketing folks believe it conveys their requirement with laser-like accuracy. Here's a video infographic of what "just make it pop" sounds like to a designer's ears.

The primary problem with "making it pop" is this: you lose the professional touch. So a design that is overly colorful with a lot of animations might be great for Disney

clip_image006

..but isn't all that great for a professional services organization like say, Bank of America.

clip_image008

The Psychology Of The Contrast Effect

The underpinnings of contrast lie in the tendency of humans to compare everything. To show you what I mean, I created these couple of images (all copyrights with respective owners of images):

clip_image010

These are two different males, one younger and the other older. Now here's another image

clip_image012

Do you see what I just did? I made the middle aged man younger or older depending on how I want to present him to you just by changing the person I've compared him with. This trick is employed regularly across marketing and advertising to a great degree of success.

How To Apply The Contrast Effect On The Web

The contrast effect can easily be applied in the online world. Let's take for example ServerDensity, who increased revenues by 114%. What they did was simple – replaced per unit pricing with packaged pricing and emphasized their mid value plan by surrounding it with a low value and a high value plan (and also contrasted it graphically).

clip_image014

Surrounding with high and low value items to emphasize the middle is a classic use of psychological contrast. The low is too barebones and most people anticipate having higher needs while the high value item is much more than what they need, so the majority go for the middle option.

Here's another very interesting psychological contrast – a pricing experiment conducted by Dan Ariely when he noticed the peculiar prices of The Economist magazine

clip_image016

He asked 100 students at MIT which they'd sign up for and 16 chose the $59 subscription while 84 chose the last option: Print and web subscription for $125

He then removed the middle option and tested on another group, the results were: 68% chose the $59 option and 32% bought the $125 one.

Here's a comparison of how the two pricing offers performed:

clip_image018

These two tests show the value of the Contrast Effect in the real world. If you have used it to your advantage or have examples of other interesting such usages, let's discuss them in the comments.

Siddharth Deswal

Siddharth Deswal works at Visual Website Optimizer, the world’s easiest A/B testing software. He’s been involved with web development for about 8 years and actively looks to help online businesses discover the value of Conversion Rate Optimization. He tweets about A/B testing, landing pages and effective marketing tips on @wingify

Visual Website Optimizer

You May Also Like

2 Responses to “The Importance of Color & Contrast in Increasing Sales and Conversions”

  1. Excellent article!

    Most marketers know that having good contrast in ads and making certain features pop out to the viewer is important.

    The way you presented it with side by side examples really drives the point home. There were also some sections like the classified study that were really insightful.

    Thanks for posting this.

  2. Thanks for the kind words Adam. Yeah, marketers use it well, but its greatest application is by salespersons, specially property agents.

    Read somewhere that a common trick they employ is to first show you a house that isn't all that great, but kind-of expensive. You obviously won't like it, after which they'll take you to the house they actually want to sell you.

    The contrast effect makes you perceive the second house as much better (and reasonably priced).

    Smart stuff if you ask me.