Contrast

What is Contrast?

Contrast is

  • a term used in design to express how well an element of design (e.g., color, shape or size) compares to other design elements used in a composition, a text
    • Artists may use contrasting colors, sizes, shapes, and fonts to create a focal point–to draw in the reader’s attention
  • a powerful mode of thought. We compare and contrast experience, insights, texts—everything—in order to make sense of the world.

Key Concepts: Compare and Contrast; Literacy; Paragraphs


Examples of Contrast

In the Do Not Call Federal Registry, note the use of contrasting colors—blue, green, black, and white—to highlight and contrast information. The box below the black and then green line, the one that says “Do Not Call” is set off from the rest of the text, so users can quickly accomplish their goal: clicking the button necessary to begin the process of entering phone numbers in the do not call registry. The contrasting colors are used consistently throughout the site: blue and green are used to highlight hyperlinks. The left column is set aside from the text block on the right to also help with navigation. Even the visual—the phone over the house—uses all four colors.

Principles of Design

Contrast Principle of Design

Contrast is also an important element of design. From research on human-computer interaction, we know that contrast in an image attracts the eyes and attention of the viewer. People notice contrasting elements in texts. They use their sense of contrast—e.g., changes in shading, font, color, and layout, etc—to compose and interpret texts.

Artists, Designers, Symbol Analysts . . . use contrast when they want to create focus or a focal point in a composition. For example, at a very basic level, contrast is used in Page Design. Headings, Subheadings, Bullets—these sorts of textual elements enable readers to chunk information, to sort information into categories of similar and dissimilar items.

Recommended Readings on Contrast as a Principle of Design

  • Contrast in Graphic Design: The Complete Guide | CorelDRAW. (n.d.). Retrieved September 20, 2022, from https://www.coreldraw.com/en/tips/graphic-design-principles/contrast/
  • Design Principles: Contrast | The Paper Blog. (n.d.). Retrieved September 20, 2022, from https://blog.thepapermillstore.com/design-principles-contrast/
  • Lovett, John, Contrast, Principles of Design, https://www.johnlovett.com/contrast
    • Complementary Colors (red/green, yellow/violet)
    • Different Directions (horizontal/vertical)
    • Tonal Difference (black/white)
    • Textural Difference (rough/smooth)
    • Linear Contrast (thin and straight/heavy and curved)

Read More: