February 19, 2016

Contrast: It’s more than Black & White

Contrast is one of the most important principles in design.

It is defined as “the difference in visual properties that make an object distinguishable from other objects and the background”. It is used in every discipline of design and is particularly important in web design as we are constantly seeking to establish hierarchies of importance to draw and direct attention, create visual interest and communicate a clear and concise message. The use of contrast is so influential due to the human tendency to compare everything and the psychological effect of contrast.

We are constantly assessing, shifting our focus and making determinations. Contrast in the world helps us to make sense of things, compare and evaluate them, and respond.

Creating a layout using size, shape and colour is what gives a page impact and legibility. The relationships between different elements of the design are crucial to its functional and aesthetic success.

Let’s take a brief look at the different ways to achieve contrast in web design.

Color Contrast

This is most common form of contrast. If two colors are different to each other they have high contrast, if they are similar they have low contrast. The use of contrasting colors can make the most important parts ‘pop’ and catch attention. Though it is important to work with complementary colors so as to not cause strain on the eyes.

Size Contrast

Placing something big beside something small generally indicated that the bigger item is more significant and therefore attracts more attention. Size contrast adds visual interest and helps establish key elements in the layout so you can guide the viewers’ focus.

Shape Contrast

Shape contrast is where you make something comparatively more notable by its difference in physical shape. It can be used to great effect, particularly in web layout. For example, most things on the web are rectangular, so an easy way to achieve contrast is to use a circle. Or on a busy page with lots of elements you could put an odd shape behind a button to make it stand out.

Positional Contrast

Contrast in positioning creates a hierarchy of elements simply by using different alignments. Attention is directed toward specific areas by their indentation or placement. Such as a title indented left of body content or having a sticky logo and navigation. This creates strong contrast between sections and visual interest without being distracting.

Type Contrast

When it comes to type contrast color, size and shape can all be applied. You also don’t want to use the same font across the whole layout, look for areas where you can create variation. Experiment with emphasis, through bold and light variations you can maintain unity and create contrast. Different fonts carry certain characteristics too so can be used to enhance communication.


All these elements of contrast should work together in a layout. You don’t have to use extremes to create contrast; in fact this can be overly complex and distracting. Subtle use of the various forms of contrast will lead to a much more effective design. It’s all about finding better and more efficient ways of communicating the message behind the design and contrast is a powerful tool.