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.
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.
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 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.
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 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.
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.
A List Apart is another great example of using centered heading with left aligned paragraphs.
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.
Related Posts
Here's some other articles that you will definitely find useful.
Usability Design for Online Web Forms
Arranging and Designing Synchronized User Interfaces
20 Design Blogs Worth Reading
10 Free Online Books for Web Designers
Whitespace: The Underutilized Design Element
40 comments
Neelakandan
February 3, 2010This is awesome. Great post.
Marco Barbosa
February 3, 2010I find contrast one of the best principles to design a good layout.
Great article!
Jordan Walker
February 3, 2010Great article, wish more designer would take this into consideration.
Jones
February 3, 2010Nice 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.
Alan
February 3, 2010Contrast 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.
honour chick
February 3, 2010very informative.
Brian Egan
February 3, 2010For 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!
Chris Thurman
February 3, 2010Contrast is considered one of the basics but along with proper color selection, it is sometimes misused or ignored. Great read!
Michael Locke
February 3, 2010Great article. A simple principle that’s overlooked by many beginners.
Anna
February 3, 2010Good contrast is essential for a great and successful website design. Thanks for bringing this to light.
Yvonne
February 3, 2010Great article look forward to more
Amit
February 4, 2010Very nice collection. Inspired, nw back to work
Harry
February 8, 2010Can’t you keep you mouth shut? You always drop such bad comments.
Website Design Sydney
February 4, 2010The 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.
john white
February 4, 2010Cool 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.
Taha
February 4, 2010Very 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. “
Iama Web Designer
February 5, 2010Great 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?!
Luciana Nunes
February 5, 2010Great article! I think that every design should read and use this tips.
Thanks.
9swords
February 6, 2010Really nice, thank you.
Marcus Vinicius
February 6, 2010Very awesome! Thank you
Derek
February 7, 2010Thanks for covering the basics; it’s good to be reminded every so often. The simple stuff can be easily taken for granted.
Web Designers Philadelphia
February 7, 2010Contrast 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!!!
Mark
February 8, 2010IMO 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.
Harry
February 8, 2010Again a good article to read.
Jason Holland Design
February 8, 2010Great 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.
Kawika
February 9, 2010Great 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!
kadiks
February 15, 2010That’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
Colin Hall
April 21, 2010Contrast, 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
adimaryanto
April 22, 2010Nice post… thank’s……….
dani
April 29, 2010Henry,
there are contrast in sounds, foreground and background sounds. Especially for multimedia files. It is based on WCAG by W3C recommendation.
Web Design Las Vegas
May 24, 2010Truly agree with what has been said here.
PopcornWebDesign
June 12, 2010Great article. Thank you.
nikos lianeris
July 26, 2010this was a very inspiring and useful post!Thank you for sharing!
DFW Web Design
July 29, 2010Great 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)
Cesar Castro
August 30, 2010Oops, I always thought that the contrast was just about colors :p
Thanks for clearing that up
Web Design Dallas
October 4, 2010I 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.
Joseph Chambers
February 12, 2011it 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.
Katherine A
March 10, 2012I 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
Edwin
May 6, 2012It 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.
Ryan Key
June 30, 2012A 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.