What is Contrast?

Contrast is an opposition of attributes. It can be present in any of the elements of design—not just value with which it is commonly associated—which is why it is not grouped with them as an element. You don’t always have to make objects be in high contrast to each other, though; low contrasting items can contribute to the sense of unity within a piece.

Contrast is used to…

• Add visual interest
• Create emphasis and set objects apart
• Build unity

Creating Contrast

Contrast is created by using the elements of design, which can be in high contrast or low contrast. High contrast items very greatly from each other, where low contrasting objects will blend together and create a more uniform appearance.

Complementary color palettes present a high contrast, where analogous color palettes will be more homogeneous.

Lines can contrast not only in weight (thin vs. thick), but also in style, like organic or geometric, handmade versus precise, curving opposing straight. You can even combine contrasting weights to make a far more interesting line that tapers, grows and shrinks to give the appearance of depth. Or combine contrasting styles to show something like a progression from analog to digital or handmade to factory produced.

Contrasting scale is easy to spot, it’s simply large items vs. small items. You can have a lot of fun with contrast and scale by playing with the viewer’s sense of normalcy; show a huge mouse (close in the foreground) next to a small elephant (far in the background).

Similar to line, shapes contrast with each other through being geometric or organic, round or angled, thin or thick, tapered into the distance or flat on the same plane.

Space that is dense with content will contrast significantly with negative, or purposefully empty, space.

Smooth textures contrast with rough textures, shiny surfaces counter matte finishes, soft appearances oppose hard ones.

Contrast in value is easiest to spot; high contrast would be black vs. white, low contrast would be similar shades of grey.

Examples of Contrast

Morning Paper provides an excellent example of high contrast in color and line. With the rest of the piece lacking the detail in color of the top of the man and the Coke Zero bottle, those two things really stand out. Notice how the illustrator didn’t choose to leave the background white, though; that would’ve been too typical and the colored parts probably wouldn’t have stood out so much.

A high contrast of value is especially important in a logo design because the logo must hold up against any marketing and promotional materials it is put on, no matter what the background color. In this identity system for Yoshi’s Jazz Club, the contrast in line comes through in the varying weights, some lines are thin, others thick and the logo itself is made to look like it was painted. There is a pleasant amount of textures present, from the patterns to the brushwork of the logo to the flecked paper used. Remember to consider your stock when designing! Generally the info and graphics are grouped tightly together so to emphasize themselves and also be emphasized by the negative space around them.

This is a great example of using low contrast in the elements to create a unified feel. The textures in this illustration are all very similar, creating a low contrast of textures, which gives unity to the piece. All the shapes are soft, even the ends of the hair and the edges of the stocking are not sharp and angled. The complementary colors of green and red (pink) make the red stand out. Overall tones are also similar (look at it in greyscale), which is a unifying element and provides a soft, cheerful presence to the illustration.

Plumb Media employs a high degree of contrast in almost every element of design. The line quality varies from dotted line at the top, to the semi-thick lines of their logo, the thick stroke line around the outside and the dashed line at the bottom for the content area titles. The texture is a little all over the place with it being created from the patterned background, the rays from behind the billboard, the paper texture and the smooth texture behind the Services bar. Perhaps to unify it more, the pattern could somehow relate to another one of the textures already established.

That Services bar stands out though, doesn’t it? That is because of its contrast in size, texture and value. “Services” is the second largest word on the page, it is one of the smoothest places in the layout, it is the lightest value (besides the white background) and it is against the largest shape with the darkest value. See how contrast really helps create the hierarchy here?

How You Can Improve Your Sense of Contrast

Be aware of how you are using the elements of design to create contrast.

• Are the colors all shades of a certain hue or are there some sharply different ones?
• Are all the lines a similar weight?
• Is each element the same size so that nothing stands out?
• Are all of the shapes angular on purpose?
• Does every part of the canvas have text and/or images?
• Does everything have a similar texture, or are there a couple of things that are different?
• Are all the values too similar? What does your design look like in grayscale?

Consider if low or high contrast is the effect you want. Remember that low contrast can create unity, but it can also be boring and nothing may stand out as the focus. Have too much contrast, though, and your design may start to feel disjointed. Consider where you can increase the contrast and try using contrast to create a focal point.

Be sure to grab the Creative Curio RSS feed (What is RSS?). If you need to review, we’ve been through balance, direction, economy, emphasis, proportion, rhythm and how to apply them in your designs.

If you’re interested in more applied design theory, take a look at the Elements of Design Real World Examples series.