The Principle of Contrast in Web Design

By / Feb 3, 2010 / Tips
shares

A web design is made of many different elements, each having varying levels of importance and some demanding prominence over others. Some elements share a relationship, while others are not related at all. The tricky part is being able to communicate this visually and effectively. This is where the principle of contrast comes into play.

Contrast is the difference between two or more elements. With contrast, a designer can create visual interest and direct the attention of the user. But imagine if all of the elements on a web page were the same in style and appearance. There would be no organization, no flow, and definitely no hierarchy. Content would be nearly impossible to digest. This makes contrast an essential part of effective web design.

In this article, we’re going to see how contrast can be achieved by creating differences in three aspects of design: color, size, and alignment.

Contrast in Color

When most people hear the word contrast, they think of color. Even though the principle of contrast is not limited to color, it can go a long way in helping the user differentiate page elements from one another.

It’s a given that almost all web designs have a header, a content area, and a footer. These are three completely different areas that should have a clear visual separation. Using contrast in background color is an excellent way to achieve this.

Here you will see that the Church Media Group’s website is an excellent example. The header and footer have dark background colors, while the content area is white. This clearly establishes the content as being different and even more important than the other areas. If we look a little further there is another level of background contrast within the content area. The “Featured Project” area has a light blue background. Since the amount of contrast between this area and the rest of the content is minimal, it tells us that the two are related.

contrast in web design

Phil Renaud’s portfolio has a unique layout and an incredible color scheme. He uses a gold-yellow color to create contrast between the vertical navigation and the rest of the predominantly brown design.

contrast in web design

Color can also be used within text to create contrast. Billy Tamplin does an excellent job of creating separation and hierarchy by giving the headings, subheadings, and paragraph text all different colors. For a blog style layout, establishing contrast between post headings and body text is critical. It helps the user easily see where articles begin and end as they scroll down the page.

contrast in web design

Contrast in Size

Another way to create contrast in web design is to use size differences between elements. In other words, make some things bigger than others.

Creating contrast through size becomes very important when you can’t rely on color. Taxi has a lot going on within it’s layout and has a minimal color scheme. So in order to establish a hierarchy among the three columns, the designer used a much larger width on the middle column – over two times that of the left and right columns. This makes it apparent to the user that the middle column is the most important area of the page.

contrast in web design

Just as color can be applied to typographic headings to create contrast, so can size. Big headings are a great way to establish hierarchy within the content of a website. The website of Imaginaria Creative, uses big headings to catch the visitor’s attention and draw them in so that they read more of the smaller paragraphs below.

contrast in web design

contrast in web design

Contrast in Alignment

Good alignment plays a big part in creating a quality web design. Things just look better when they line up. This is why I think using different alignments to create contrast is tricky and should be used sparingly. However, when done well it can be very effective in creating separation.

LegiStyles uses a large left margin on the content blocks below each heading. Along with the the large size of the headings, this creates a good amount of contrast. If you are going to use this kind of difference in alignment, be sure to make it a big difference. Otherwise it will end looking like a mistake of poor design.

contrast in web design

Centering large paragraphs is a big typography no-no. It makes text very hard to read. However, don’t be afraid to mix left aligned paragraphs with centered headings. It’s another good way to use difference in alignment to create contrast. Combined with a nice serif font, it can also give your typography a classic look.

Simon Collison uses centered headings paired with left aligned paragraphs in each of the content boxes. Since the font size of the headings isn’t much larger than that of the paragraphs, this helps set the headings apart.

contrast in web design

A List Apart is another great example of using centered heading with left aligned paragraphs.

contrast in web design

Now Go and Be Different

Learning to create the right amount of contrast in your designs is just like mastering any other principle of design – it takes practice. Take time to study the work of talented designers and see how they are using contrast in their designs. Remember that contrast is all about differences. If two elements are very different in nature, be sure to make their visual differences very obvious.

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

41 Comments

  1. Neelakandan
    February 3, 2010

    This is awesome. Great post.

    Reply
  2. Marco Barbosa
    February 3, 2010

    I find contrast one of the best principles to design a good layout.

    Great article!

    Reply
  3. Jordan Walker
    February 3, 2010

    Great article, wish more designer would take this into consideration.

    Reply
  4. Jones
    February 3, 2010

    Nice post, thanks for that. It’s become my personal crusade as of late to catch the insane amount of mock-ups we produce at work where it’s med-dark grey text on a med-light grey background (or any other sort of similar low-contrast combination); yes it may look good, but it’s not legible.

    Reply
  5. Alan
    February 3, 2010

    Contrast is something you always try to get right on a site.

    My main problem i always come across is whether or not to use another colour in the palette for extra contrast, lol.

    Reply
  6. honour chick
    February 3, 2010

    very informative. ;)

    Reply
  7. Brian Egan
    February 3, 2010

    For those interested in learning more, I highly suggest that you read one of the great articles on this topic by Andy Rutledge:

    http://www.andyrutledge.com/contrast-and-meaning.php

    Cheers!

    Reply
  8. Chris Thurman
    February 3, 2010

    Contrast is considered one of the basics but along with proper color selection, it is sometimes misused or ignored. Great read!

    Reply
  9. Michael Locke
    February 3, 2010

    Great article. A simple principle that’s overlooked by many beginners.

    Reply
  10. Anna
    February 3, 2010

    Good contrast is essential for a great and successful website design. Thanks for bringing this to light.

    Reply
  11. Yvonne
    February 3, 2010

    Great article look forward to more

    Reply
  12. Amit
    February 4, 2010

    Very nice collection. Inspired, nw back to work :)

    Reply
    • Harry
      February 8, 2010

      Can’t you keep you mouth shut? You always drop such bad comments.

      Reply
  13. Website Design Sydney
    February 4, 2010

    The concept of contrast says that if two items aren’t the same, make them very different. Contrast adds visual interest to your page. You can create visual interest by using color, size and weight, or any other property of an element.

    Reply
  14. john white
    February 4, 2010

    Cool Article.I Attract your post.I like so much.Designing a website is essential to the success of the company. Viewers who come across the site spend on average 10 seconds on the front page and if it loses their interest they will move on.

    Reply
  15. Taha
    February 4, 2010

    Very nice article. Articles like this gives us lots of information and ideas about web designing. Keep up the good work.

    By the way there is a repetition of “the” in this sentence.

    “Along with the the large size of the headings, this creates a good amount of contrast. “

    Reply
  16. Iama Web Designer
    February 5, 2010

    Great article! Color contrast is a key element in fashion, in house furnishing, in all areas of style and design… Why not be same even in webdesign?! :)

    Reply
  17. Luciana Nunes
    February 5, 2010

    Great article! I think that every design should read and use this tips. :D Thanks.

    Reply
  18. 9swords
    February 6, 2010

    Really nice, thank you.

    Reply
  19. Marcus Vinicius
    February 6, 2010

    Very awesome! Thank you

    Reply
  20. Derek
    February 7, 2010

    Thanks for covering the basics; it’s good to be reminded every so often. The simple stuff can be easily taken for granted.

    :)

    Reply
  21. Web Designers Philadelphia
    February 7, 2010

    Contrast is very important thing to consider when designing any website. I enjoyed reading this article and especially enjoyed viewing some of the examples you have posted. Great job on this article!!!

    Reply
  22. Mark
    February 8, 2010

    IMO the use of different alignments is a sure sign of an amateur.
    It creates conflict not contrast.
    Effective designs pick one alignment and stick to it.

    Reply
  23. Harry
    February 8, 2010

    Again a good article to read.

    Reply
  24. Jason Holland Design
    February 8, 2010

    Great Post!

    On sites that have a lot of information to digest, using contrast in size (not just in color) will help the viewer digest the content easier.

    Reply
  25. Kawika
    February 9, 2010

    Great post. Really makes me think about the contrast between all the elements on my webpages, and how to make the purpose of each element obvious through visual (contrast) cues. Thanks!

    Reply
  26. kadiks
    February 15, 2010

    That’s perfect.

    I was struggling with colors and you just gave me a good base to start.

    And with the link to “10 super useful tools for color choosing” you just made my day… and my next web design ;-).

    Thanks

    Reply
  27. Colin Hall
    April 21, 2010

    Contrast, Layout and Colour Choices are certainly three of the most important design elements for helping to guide your visitors eye to those areas that increase your ROI. The human brain is a fairly predictable thing and once you have an idea of what sparks it up it’s not hard to design with it in mind.

    Having said that, some of the best sites are built for content and sometimes they are so valuable that no amount of poor design would put me off them.

    Cheers

    Col :-)

    Reply
  28. adimaryanto
    April 22, 2010

    Nice post… thank’s……….

    Reply
  29. dani
    April 29, 2010

    Henry,
    there are contrast in sounds, foreground and background sounds. Especially for multimedia files. It is based on WCAG by W3C recommendation.

    Reply
  30. Web Design Las Vegas
    May 24, 2010

    Truly agree with what has been said here.

    Reply
  31. PopcornWebDesign
    June 12, 2010

    Great article. Thank you.

    Reply
  32. nikos lianeris
    July 26, 2010

    this was a very inspiring and useful post!Thank you for sharing! :)

    Reply
  33. DFW Web Design
    July 29, 2010

    Great stuff here. I like that we’ve seen articles on the principal of proximity in design, overall quality and now contrast in blogs lately. It’s a great refresher from “See 10 Great Blah Blahs” that we normally get. (We’re all guilty) :P

    Reply
  34. Cesar Castro
    August 30, 2010

    Oops, I always thought that the contrast was just about colors :p

    Thanks for clearing that up

    Reply
  35. Web Design Dallas
    October 4, 2010

    I think if a person doesn’t have some background in art, there is a big chance they won’t understand the principles involved with creating a good design. This is a great resource for people who are relatively new to web design.

    Reply
  36. Joseph Chambers
    February 12, 2011

    it all boils down to the designers taste and eye. However this is a good post for people who are coming from print design to web design.

    Reply
  37. Katherine A
    March 10, 2012

    I loved this article. I’m a Digital Media student, learning how to create GREAT websites, and all the elements therein. This gave me some good ideas that I had not thought of. Thanks

    Reply
  38. Edwin
    May 6, 2012

    It seems most of these designs look great on perfectly calibrated, high resolution 25″ and higher monitors. However, many users have vision deficiencies, bad monitors and/or bad lighting conditions, causing them to move away from sites using a low foreground/background contrast, using small fonts or those relying on a large monitor.

    When I visited a local studio, one of the first things I noticed was the technician using 4 different speakers to assess the quality of their mixing in different settings. Perhaps web designers should do something similar: step out of their comfort zone, purchase some cheap laptops and screens or ask their 80 yo grandma to assess their designs.

    Reply
  39. Ryan Key
    June 30, 2012

    A good web designer will pay close attention to contrast, this almost always is the first thing that the user sees. Contrast in color that isn’t too busy and is easy to read is key. Layout is the next most important, with all the different layout options in WordPress, you can really pick and choose what works best for the design.

    Reply
  40. Howard Steele
    June 25, 2013

    I think contrast and simplicity are crucial elements of any web design. Thanks fro great examples!

    Reply

Leave a Reply