Contrast in Web Visuals: Why You Looked at This Title First

SMS Text
Contrast in Web Visuals: Why You Looked at This Title First

Web design is fundamentally about visual communication. The most effective designers can keep their viewers’ attention long enough to communicate a message.

Companies have been making a big change lately as to how they communicate their messages online. Gone are the sites with walls of black text on a white background… and nothing else. And that’s a good thing. We’ve determined that most people aren’t inherently good at processing plain data, which is why 82 percent of people won’t bother to read a massive block of text word-for-word.

However, almost all humans are designed to think visually – 90 percent of information transmitted to the brain is visual, and visuals are processed 60,000 times faster than text. That’s why you need to incorporate visual best practices to ensure that your viewers get the most visual experience possible on your site.

According to Web Design Ledger, the biggest visual concept of all is contrast.

Contrast Establishes Visual Relationships

Visual "Uniqueness"

Created for SEJ by author

People have a natural desire to categorize objects by looking for their differences and assigning relationships among them. For example, things that appear larger suggest they are closer to us, and color variation might mean that one object is unique from the rest.

The funny thing about “uniqueness” is that objects are only unique because they contrast from the objects around them. Dramatic differences between objects suggest uniqueness, and therefore significance.

This is a great concept for visually optimizing your website. Remember that contrast makes elements stand out based on how they look in relation to their surroundings. An image that is larger than the rest draws attention to itself, as does a red paragraph amongst black ones. People can’t help it – their eyes naturally go right to the elements that are different.

Graphic designers can use this subconscious respect for visual contrast to convey a lot of information in just a single web space. By incorporating different relationships among your elements, you can organize your content and direct your user’s attention to your most important information.

7 Design Principles for Contrast

So what kinds of visual relationships can you establish online?

There are surprisingly more than you might think, and we like to call them design principles. You can create contrast in your content based on:

1. Size

Visual Hierarchy for SEJ

Created for SEJ by author

What do you see when you look at this image? On the left, you see a small green circle surrounded by bigger black circles, and on the right is a larger freen circle surrounded by black gray circles. Right?

Wrong. Believe it or not, both of those orange circles are the same size.

Why does the one on the right seem bigger? It’s all about relativity. An object that is larger than other surrounding objects visually takes up more space and therefore demands more attention. Consequently, smaller objects are deemed less important and hold less visual power.

You can use this to your advantage by associating size with significance in your design. Make sure your largest page elements contain the most important information for your viewers. That way, you can guide your viewer’s eye to particular sections of your page in order of biggest to smallest visuals (and most to least significant content).

Try this technique with your text as well. Use big, emphasized type fonts to add order to the page, and use smaller size text with headings and subheadings.

Cruise America has a great example of using size to indicate importance. You look at their homepage, and the first thing your eye goes to is the “Made for Cruisin” heading in the top right. Why? Because it’s significantly bigger than any other textual element on the page, so your eye views it as the most important. Next, your eye probably goes to the picture of the father and daughter, because again – it’s larger than any of the other images.

Cruise America Homepage

Screenshot Taken 3/14/2014 from

The biggest elements on the page are the ones that demonstrate the most important concepts – that the company is “made for cruising,” and that it can provide you a great family experience.

2. Color

You can use color to both organize your page and give it some personality. You can organize your colors to demand attention to specific sections, i.e. using bold, contrasting colors to emphasize buttons or color-coding content by category. You can also use web color psychology to add an emotional appeal to everything from your logo to your CTAs.

Here are some of the ways you can use different colors to cause an emotional response in your viewers, and some examples of companies that use these colors on their homepages.

Red: Evokes intense feelings of excitement, anger, love, and sexuality.

Conservation Ark

Screenshot taken 3/14/2014 from

Orange: Makes you feel excited, enthusiastic, and warm. Used to draw attention.

Fanta Homepage

Screenshot Taken 3/14/2014 from

Yellow: Both cheerful and frustrating. Most fatiguing to the eye, yet most attention-getting color.

Lipton Homepage

Screenshot taken 3/14/2014 from

Green: Symbolizes nature. Associated with peace, luck, health, and greed. Calms and relieves stress.

Happy Roots

Screenshot taken 3/14/2014 from

Blue: Most preferred by men. Evokes feelings of calmness and security.

Paypal Homepage

Screenshot taken 3/14/2014 from

Purple: Associated with royalty, wealth, and wisdom.

Fuel My School Site

Screenshot taken 3/14/2014 from

3. Alignment

Alignment creates structure among your elements. The location of an element in relation to the location of other elements can dictate its value. For example, items that are middle aligned are up front and center, so they seem more valuable than other elements that are aligned left or right.

Alignment also plays a part in the order that people navigate your page. People have both innate and developed expectations for alignment. Visitors will subconsciously consume all online content left to right in a Z pattern – not just text. Take a look at how the average user might scan the homepage for Your eye naturally starts at the top left, moves across to the right, scans back left further down, etc.

Wix Homepage Hierarchy

Image credit from

Therefore, it’s a good idea to place your most attractive and interesting content at the first 3 points to get your viewer’s attention. For Wix, that involved their most important offer – to help you create a great website for free. Once you grab your viewers’ attention, you can provide smaller and more detailed information further down to keep them engaged.

We also know that users have developed additional expectations for consuming information specifically on web pages – i.e. general information belongs in the top right and contact information should be at the bottom.

Dean and Draper Insurance Agency does a great job of putting the most sought-after information in the top right, where visitors will first look for it. This area includes links to manage your account, request a quote and contact them. It also prominently features their phone number, an important piece of information that any company will want to showcase on their homepage.

Dean and Draper Homepage

Screenshot taken 3/14/2014 from

Considering this information, it makes a lot of sense to put your general information in the areas where viewers expect to find them. Then, organize the rest of your content so that the most important pieces are at the top of the Z pattern.

4. Repetition

Repetition assigns identity to the different parts of your page. If all of your paragraphs are gray, for example, then when users see gray text, they can assume it’s another general paragraph. Also, when users come across a blue hyperlink or a black title, they understand that it is different from the paragraph text.

You call attention to items by breaking apart from your set repetition. Let’s say that you had a statistic that you really wanted to call attention to among several paragraphs of text. If you stuck with your gray paragraphs and incorporated a red one with the statistic, viewers’ eyes would go right to the red paragraph since it would defy the “paragraphs are gray” repetition rule.

The homepage for Resume Baking uses contrast of repetition to call attention to its most important element – its CTA. Users land on this page with the cool blue and white color scheme and are visually shocked to see the bright red button in the center. The button says “Create Resume: It’s quick and easy” to showcases what  Resume Baking has to offer. It’s a great way to ensure the first thing the viewer sees are the company’s benefits.

Resume Baking Homepage

Screenshot taken 3/14/2014 from

5. Proximity

Consider proximity when separating your elements from each other. You might have multiple sections within one page that are separated by space, and you would want to establish a new hierarchy within each section. People are also programmed to associate similar content with proximity – items that are close together have something in common.

Joes Graphics Proximity

Image credit –

In Web Designer Depot’s example, we see two versions of a business card for Joe’s Graphics. The one on the left shows the name of the business in the center, with contact information in each of the four corners. However, this business card looks really scattered, and the eye breaks it up into five separate sections. The card on the left features the name of the business in the top right, with the address below it and the phone number and e-mail address in the bottom right. Now, your eye sees two sections where it once saw five. This looks a lot cleaner, is easier to digest and uses the next design principle – whitespace.

6. Whitespace

Cramming a lot of information into a small space makes it feel heavy and dense. Alternatively, if you space your elements out too much, they lose their relationships to one another. You need to strike just the right balance so the eye can easily recognize which elements are related and which aren’t.

Smashing Magazine says you can’t emphasize the importance of white space enough. The first thing visitors do when they approach a webpage is scan the page and divide it into digestible sections of information. Therefore, if you have the choice of separating two segments with white space, you should almost always do so. This makes it easier to break up your content. Without white space, your page looks like one big overwhelming block of information that might discourage viewers from sticking around.

Apple is pretty notorious for using a lot of white space on their website. Their iPod page, for example, incorporates a lot of white space combined with colorful images. The empty space ensures that users aren’t visually distracted by providing great contrast to the content, so the eye goes right to the bright pictures and bold text.

ipod page

Screenshot taken 3/14/2014 from

7. Style/Texture

Incorporating styles and textures is also a great way to establish a visual hierarchy on the web. Style is probably the broadest tool you have to execute visual contrast. For example, a brown background “feels” different than a dirt textured one. A textured background adds an additional layer of sensual stimulation – you’re more likely to react to dirt, which you’ve smelled and touched before, than you are to the stagnant color brown.

The Cleveland Brothers CAT dealer, for instance, incorporates a dirt texture as a backdrop to its animated header. Since CAT sells construction equipment, and construction almost always involves dirt, the use of the texture really lends itself to the look and feel of the site.

Dirt Texture on Site Design

Screenshot taken 3/14/2014 from

Why Visual Contrast is Especially Important Online

Contrast is an important concept for any visual medium; however, it’s especially important for web design. As of March 13, 2014, there are at least 2.09 billion webpages on the Internet. That’s a lot for a user to sift through, so you need to do whatever you can to make your page stand apart. By incorporating contrast, you can appeal to human psychology and create visual interest that will make your page rise above.

There are tons of ways to use these principles to incorporate contrast on your page. Here’s a basic checklist of things to do if you want to experiment with contrast on your site:

  • Make your most important messages and images pop out by making them the largest elements on the site.
  • Use dashes of powerful colors with your links and buttons, and make sure your colors match the emotions you want people to associate with your brand.
  • Align your information so that the most interesting and significant elements appear at the top of the Z pattern.
  • Break your repetition design rules to bring attention to your CTAs.
  • Keep related content close together, but use adequate white space to separate sections.
  • Finally, play around with textures to add an additional sensory component to your homepage.

By using all of the tools in your contrast toolbox, you can transform your website into a graphic experience that will appeal to our subconscious desire for visuals. Contrast will help get and keep the attention of your visitors, giving them an ideal web experience and (hopefully) sealing the deal on a conversion.


Featured Image Credit: Andrey_Kuzmin via Shutterstock

Shane Jones

Shane Jones

Director of Earned Media at WebpageFX
Shane Jones is the Director of Earned Media at WebpageFX, a Pennsylvania marketing agency. Additionally, Shane is a Reporter at Econsultancy US, where he covers Conversion Marketing and UX Design. Shane loves making friends and wants you to connect with him on Twitter, Google+ or if you reach out via his blog.
Shane Jones
Get the latest news from Search Engine Journal!
We value your privacy! See our policy here.
  • Sofia Rhodes

    we can’t get better information than this.It’s really worth reading and it can help all Web designers to have best design.

    • Shane Jones

      Thanks for the kind words Sofia!

  • Aaron Watters

    Great article. It’s crazy at how impactful a small but thought out change could do for conversions. I’ve always found color psychology interesting. Thanks 😀

    • Shane Jones

      Thanks Aaron! It’s amazing what people inherently think just by taking in the colors at first glance. It means a lot about the actions the consumer will take follow that initial judgment.

  • weProms Lahore

    Good article! I see your points as being valid and I appreciate the way you expressed yourself here in this article.

    • Shane Jones

      Thanks a ton!

  • Peter

    Great article, Shane! I was really interested with the colour schemes of a website. I also liked the Z pattern alignment, it is a really great tip for designing a website.

    • Shane Jones

      Thanks Peter! I’m glad you enjoyed it. THe Z patterns is a really great bit to know, – as I mentioned to Jenise in a comment below…keep your eye out on my content on SEJ coming up…I’ll be talking about those eye tracking studies more!

  • Jenise Uehara Henrikson

    Nice post. WRT alignment, any thoughts on alternative patterns? Such as the F pattern or Gutenberg. Would love to know if there are recent eye tracking studies that indicate whether one seems to be working better with today’s site visitors, or if a pattern is better suited for a particular type of site, depending on content/industry etc..

    • Shane Jones

      Thanks Jenise!! Keep your eye out on my content here at SEJ … you might just be lucky that that one is coming up… hint hint… 😛

  • Romano

    This article offers a variety of interesting stats showing the importance of visual content. I enjoyed reading it and recommend it to anyone interested in marketing.

    • Shane Jones

      Really appreciate the strong compliment Romano, and thanks for the recommendations!

  • christina josephone

    nice blog.. i appreciate your stuff that you are provided.. thanks for shairing this knowledge with us..i will surely bookmark you..

    • Shane Jones


  • Sophia Moors

    Hello, Shane, I just enjoy and expand my knowledge so much. You mentioned all the matter so buttery its easily spread in my mind and set. Its really make me feel more confident. Thanks

    • Shane Jones

      Thanks Sophia! Thoughtful analogy!

  • Jay

    Always known green was a peaceful color….
    Thanks Shane for helping me understand the use of color in Marketing

    • Shane

      No problem Jay!

  • Ozair Akhtar

    Really the UI and UX of any web element must be perfect.

    • Shane

      Absolutely correct!

  • Helge Sverre

    n the left, you see a small green circle surrounded by bigger black circles, and on the right is a larger ***freen**** circle surrounded by black gray circles. Right?

    Wrong. Believe it or not, both of those ***orange*** circles are the same size.

    Misspelling and wrong color ^^

  • Adrian

    Just one mention, we have tested different colors and contrast, our results are very well with Flat UI palette. So, these colors are perfect for websites look and sales buttons (like “Purchase”, “Buy Now”).