The eye’s weakness can make calls to action stronger

eye contrast web

The entire concept of contrast in respect to eye strain perplexes me. It's common knowledge that high contrast is a strain on the eye, it's the reason you're not supposed to watch TV in the dark, or put the brightness level on your computer monitor at 100%.

However, our eyes can better process images with high contrast. This would lead me to believe that low contrast images cause strain on our eyes. Confusing, right!

  • Regardless of how much strain high contrast places on the human eye, it's easy to assume that it grabs more attention than low contrast.
  • This assumption forms the entire concept behind the lightbox.
  • Before a lightbox is displayed on a web page, it first decreases the contrast between the page background and the website contents.
  • Only then, does the lightbox then popup in it's high contrast glory.

lightbox

Similarly, we can leverage the eye's inability to process low contrast to draw attention to our calls-to-action.
 

Leveraging Low Contrast

When most people think about ways to make something "pop" on a web page, they run through the various ways to make it contrast with the other elements on the page. What this essentially does is create an entire page of high contrast elements, plus one extremely high contrast element. Talk about over-stimulation!

A wiser approach is the reduce the contrast of less important items on the page, leaving the important element or elements at "standard" contrast.

A great example is Twitter's public home page (not logged in).

twitter home page

Where do your eyes immediately focus when you load the page? The sign up / login form. The rest of the page is masked with a semi-transparent black, causing low contrast between it and the elements on top of it.

  • The bright grey-ish background behind the login form creates a single high contrast element to focus on.
  • There is arguably only one high contrast element on the page, making it extremely easy to guide us down the path of logging in or creating an account.
     

Simple Techniques to Product Low Contrast Elements

There are many techniques to lower the contrast between your page elements and the background, but only a few that can be implemented in under 5 minutes.

The two that I like involve adjustments to either the opacity of page elements or the page background color.

  • Using opacity, we can lower the opacity level of all elements on the page, except the items we wish to emphasize.
  • Using background colors, we can darken the page background to more closely resemble the text color. Then, increase the contrast between the element we wish to emphasize and the background.
     

For Developers

CSS developers, you can do this is just a couple lines of code. In the examples below, we are emphasizing the <h1>, as well as an element with an id of signup.

body > * > * { opacity: 0.5; }
#signup, h1 { opacity: 1.0; }

body { color: #777; background: #eee; }
#signup, h1 { color: #000; }

This example page might help put things in context.