Design Principles: Contrast

One of the building blocks of visual design is contrast. Contrast occurs when two elements are different. Therefore, when you want two elements to be different from each other, you should ensure that those differences are obvious. Robin Williams eloquently reminds us that

When designing web pages, we often use contrast to add visual interest to a page and as a way to emphasize what is important. Contrast adds variety to the design and creates unity. When a page is without contrast, our eyes don't know where to look first or what is important. A design with too little contrast is often considered to be bland or uninteresting. If a design has too much contrast, the viewer will likely find it to be confusing.

Contrast captures our attention and forces our eyes to focus on the important elements of the design. Also, it can be used to make headlines and subheadings stand out, therefore, making them more readable. Above all, contrast plays an important role in establishing the visual hierarchy of the page.

How to achieve strong contrast

There are four common methods of creating contrast in a design by using differences in size, value, space and type. In the remainder of this post, I will explore how you can use these differences to achieve a strong contrast in your designs.

Use size to create contrast

Larger items are perceived to have more emphasis than smaller objects. Therefore, you can use the relative size of objects to lead your audience toward important information by making it larger than less important information.

Effectively use space to create contrast

Elements that are close together tend to be read as belonging together. You can give an item more emphasis by ensuring that it has more space around it than other elements.

Leverage type to create contrast

One of the simplest ways to achieve contrast in a design is through typography. You can achieve contrast in typography through font size, font wieght, and type face, although font size tends to be easiest and work best.

Another way to create contrast in type is by varying the font-weight. Changes in font weight (bold, italic) are more noticeable than changes in typeface. Using bold for emphasis is better than ALL UPPERCASE. Finally, you can also create contrast by changing typeface:

A Few Examples

It is important to remember that contrast often works in concert with other design principles such as proximity, repetition, and alignment to establish a visual hierarchy. As such finding stand alone examples in web designs has proven to be quite difficult. However, I have attempted to illustrate a few effective uses of contrast in our recent design work below.

Using size to highlight important features

When redesigning the Forum One web site, we want to ensure that when user landed on our homepage they could easily find our services. Therefore we ensured that the largest item in the header area was a link to Our Services.   

Similarly, when we identified that each of our user scenarios ended with contacting someone at Forum One, we wanted to make the Contact Us link immediately identifiable from any page on the site. Therefore, we attempted to use size and color to make this element stand out from the other navigation items.

Ensuring that the contrast between text and background is strong
In the example below, you will notice that the content type label (Featured School) and hyperlink (College of St. Scholastica) have good figure/ground relationship so that each stand out from the background. The body text; however, has a low figure ground ratio and therefore is more difficult to read than either the link or the content type label.

Usability research shows that many older people develop vision issues such as reduced contrast sensitivity and color perception,  making it difficult to read web pages.The contrast between typography color and background color becomes increasingly important as your target demographic increases in age. Therefore it is necessary to provide strong contrast between the text color and the background color; however, this does not necessarily mean black text on a white background. For example, the designers of The Gates Foundation web site created strong contrast between the background and body text by using a dark brown rather than black.   

Contrast is complicated and has many caveats. There's no hard and/or fast rule. Contrast aids in developing the hierarchy of information on a screen. As such, all uses of contrast must work in concert to have a beautiful, balanced design. When a design has the appropriate levels of contrast, the most important elements of the screen stand out from the items of lesser importance. Strong contrast demands our attention by attracting our eyes toward that area of the screen. You can achieve contrast in many ways including typography, line thickness, color, size, and space. However, one cautionary note: there is such a thing as "too much contrast."

Special thanks for Sophie Burns, Courtney Clark, and Colleen Gray for their help in creating this post.