Using Contrast in Graphic Design and Page Layout

Girl jumping in air at red wall

 Santiago Ba??n/Getty Images

Contrast is one of 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.


Large and small portions of spaghetti
Jose Luis Stephens/Getty Images

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.


Clouds of water drops in suspension on a colorful background

 Jose A. Bernat Bacete/Getty Images

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.


Green umbrella contrasting a sea of black umbrellas

 Filograph/Getty Images

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.


The word 'love' in red print blocks
seraficus/Getty Images

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

Obvious Contrasting Elements

headless girl with heels, upside down, hanging off edge of table
PeopleImages/Getty Images

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.