• MYP
  • Introduction
  • overview
  • design cycle
    • Introduction
    • investigate
    • design
    • plan
    • create
    • evaluate
  • AoI
  • assessment
  • descriptors
• curriculum
  • Grade 6
    • welcome
    • time is ticking
    • safety first
    • pet food
  • Grade 7
    • overview
    • logo
    • toy
    • animation
  • Grade 8
    • overview
    • T-shirt
    • Game Design
    • catapult
  • Grade 9
    • overview
    • poster
    • flash
  • Grade 10
    • overview
    • open project
    • reason
• resources
  • colour
  • design notes
    • elements
    • principles
    • brainstorming
    • the client
    • images
  • glossary
  • research
  • planning tips
    • Gantt chart
    • Basics
    • links
  • Grade
    • Grade 6
    • Grade 7
    • Grade 8
    • Grade 9
    • Grade 10
• software
  • Dreamweaver
  • flash
  • Illustrator
  • InDesign
  • Photoshop
  • Premier
  • ProDesktop
  • Reason
• gallery
  • Grade 6
  • Grade 7
  • Grade 8
  • Grade 9
  • Grade 10

CONTRAST

The Principle:Contrast works in several different ways. Perhaps the most obvious example of contrast is the colour of text against a background. It is much easier to read text that contrasts highly with the background.

Can You Read The Text Below?

This is an example of poor contrast. The colour of this text is not different enough from the background colour. Higher contrast is far easier to read.

Experiment with boldness. Use visual contrast in your type and images to achieve clarity and add interest to your designs. Try juxtaposing larger, heavier type or images with light subtle ones.

How Contrast Works

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 centre stage.

	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.
	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 colour., the further apart the values the greater the contrast.
	Use harmonizing, complementary, and opposite colours to create contrast. Be careful with the value of the colours as well. For example, harmonizing colours (adjacent to each other on the colour. wheel) can appear washed out if there is not enough difference in the values of each colour.
	Type contrast can utilize the previously discussed methods such as size, value, and colour. 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 colours or varying values.

More Contrast

Other methods of creating contrast include using texture, shape, alignment, direction, movement. Remember, the key is to use a substantial difference. 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.
See how contrast is used in each of these examples:

• Create Contrast with Bold Type
• Create Contrast with Italics
• Use Large Size to Create Contrast
• Use Large White Space and Small Size to Create Contrast
• Use Type, Size, Colour., and Alignment to Create Contrast