Using Contrast in Graphic Design and Page Layout

01
of 06

How Contrast Works

Girl jumping in air at red wall
Getty Images/Santiago Ba??n

Contrast is one the principles of design. Contrast occurs when two elements are different. The greater the difference the greater the contrast. The key to working with contrast is to make sure the differences are obvious. Four common methods of creating contrast are by using differences in size, value, color, and type.

Contrast adds interest to the page and provides a means of emphasizing what is important or directing the reader's eye. On a page without contrast, the reader doesn't know where to look first or what is important. Contrast makes a page more interesting so the reader is more apt to pay attention to what is on the page. Contrast aids in readability by making headlines and subheadings stand out. Contrast shows what is important by making smaller or lighter elements recede on the page to allow other elements to take center stage.

However, contrast can be overdone. Choose carefully. If everything contrasts highly with everything else you end up with competing elements and once again the reader won't know where to look first.

02
of 06

Contrast with Size

Large and Small Portions of Spaghetti
Getty Images/Jose Luis Stephens

Big and small elements of the same type, such as big and small images and big and small type are the most obvious uses of size to create contrast. Contrasting white space or the physical size of the piece with another element of the design is another method.

03
of 06

Contrast with Value

Fresh Cranberries gradient
Getty Images/Juj Winn

The relative lightness or darkness of two elements to each other can create a contrast in value. Whether with shades of gray or tints and shades of a single color, the further apart the values the greater the contrast.

04
of 06

Contrast with Color

Color contrast
Getty Images/Filograph

Use harmonizing, complementary, and opposite colors to create contrast. Be careful with the value of the colors as well. For example, harmonizing colors (adjacent to each other on the color wheel) can appear washed out if there is not enough difference in the values of each color.

05
of 06

Contrast with Type

Love in red
Getty Images/seraficus

Type contrast can utilize size, value, and color to create contrasting typographic treatments.

  • Add bold or italics to create contrast.
  • Mix large type with small type.
  • Combine serif with sans serif type to create type contrast.
  • Set portions of text in contrasting colors or varying values.
  • Changes in type alignment create contrast as does type spacing such as extreme kerning for headlines.
06
of 06

Use Obvious Contrasting Elements

Falling for fashion
Getty Images/PeopleImages

Other methods of creating contrast include using texture, shape, alignment, direction, movement. Remember, the key is to use a substantial difference. A font size change that is barely noticeable and colors that are too close in value looks more like a mistake than an attempt to provide emphasis or interest.

Some Ways to Use Contrasting Elements

  • Add visual interest to a layout of tall skinny columns of text by using wide or irregularly shaped photos.
  • A series of static images with a single picture showing movement will draw the eye to the contrasting image.
  • Align text to the left but set subheads right-aligned in an adjacent column.
  • Typically, a layout may employ a combination of 2 or more contrasting elements.​