Contrast - Basic Principles of Design

What is Contrast in Design:

Contrast in design is an accentuation of the differences between elements in a design. Most people think of contrast only as it applies to colors, but contrast can work with any design element. For example, if you have a group of lines that are all the same size, there is no contrast. But if one is a lot longer than the others, it contrasts with them.

Use of Contrast in Design:

When applying contrast to Web designs, think beyond color. Color contrast can easily be overdone. But by using more subtle differences in contrastin font sizes, layout shapes, images, and text styles (like lists versus long blocks of prose) you can take advantage of contrast without blasting your readers with a loud contrasting color scheme.

How to Include Contrast in Web Designs:

Contrast in Web design can be implemented in many ways:

  • Change the fonts. The font size, font weight, or font family can all provide contrast to your text. Headlines provide a lot of contrast to surrounding text.
  • Links provide great contrast in text. The color change and the addition of an underline work well to contrast from the surrounding text.
  • Use different sized images and elements. If you have a section of text that is the primary focus of a page, you might make it large and all the surrounding elements and images small.
  • Use contrasting colors or change the darkness and lightness of your colors.