September 18, 2020

The Principle of Contrast in Web Design

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.

Share

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

43 Comments

  1. Jones Reply

    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.

  2. Alan Reply

    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.

  3. Website Design Sydney Reply

    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.

  4. john white Reply

    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.

  5. Taha Reply

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

  6. Mark Reply

    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.

  7. Kawika Reply

    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!

  8. kadiks Reply

    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

  9. Colin Hall Reply

    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 🙂

  10. dani Reply

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

  11. DFW Web Design Reply

    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) 😛

  12. Web Design Dallas Reply

    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.

  13. Katherine A Reply

    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

  14. Edwin Reply

    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.

  15. Ryan Key Reply

    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.

  16. Krishna&JesusisLove001 Reply

    Hey I doing an assignment on web analysis is this a good overview of contrast

    Contrast
    is making a difference in the page, elements, meaning making the fonts size
    color everything different, everything in your site, so what I mean is the user
    knows when to look first, because there are big and small elements contrast is the difference between elements in your websites
    this can be, size color etc.. Like if
    there is a website where everything would be same colour same size same style
    there will be no organisation flow or hireacy

    Let me know thanks

Leave a Reply

Your email address will not be published. Required fields are marked *