Create Contrast by Creating Obvious Differences

01
of 06
How Contrast Works

Contrast
Use size, value, color, and type to create contrast. Graphic © J. Bear

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.

  1. this page
  2. Contrast With Size
  3. Contrast With Value
  4. Contrast With Color
  5. Contrast With Type
  6. Use Obvious Contrasting Elements

02
of 06
Contrast with Size

Contrast
Contrast with Size. (Hot Dog Cart Design by jmrichte1)

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.

  1. How Contrast Works
  2. this page
  3. Contrast With Value
  4. Contrast With Color
  5. Contrast With Type
  6. Use Obvious Contrasting Elements

03
of 06
Contrast with Value

Contrast
Contrast with Value. (Calendar Design byPMacLaird)

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.

  1. How Contrast Works
  2. Contrast With Size
  3. this page
  4. Contrast With Color
  5. Contrast With Type
  6. Use Obvious Contrasting Elements

04
of 06
Contrast with Color

contrast
Contrast with Color. Graphic © J. Bear

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.

  1. How Contrast Works
  2. Contrast With Size
  3. Contrast With Value
  4. this page
  5. Contrast With Type
  6. Use Obvious Contrasting Elements

05
of 06
Contrast with Type

contrast
Contrast with Type. Graphic © J. Bear

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.

  1. How Contrast Works
  2. Contrast With Size
  3. Contrast With Value
  4. Contrast With Color
  5. this page
  6. Use Obvious Contrasting Elements

06
of 06
Use Obvious Contrasting Elements

contrast
The key to effective contrast is substantial difference. Graphic © J. Bear

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.

  1. How Contrast Works
  2. Contrast With Size
  3. Contrast With Value
  4. Contrast With Color
  5. Contrast With Type
  6. this page