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

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.

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

Comments are closed.

22 thoughts on “Contrast in Web Visuals: Why You Looked at This Title First

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

  2. 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 😀

    1. 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.

  3. 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.

    1. 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!

  4. 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..

  5. 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.

  6. 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

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

  8. 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 ^^

  9. 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”).