Intro to UI Wireframing > 4. Design Principles > 4.1. Contrast

4.1. Contrast


Contrast refers to the differences between things.

There are various ways to achieve contrast. A common way of adding contrast is to make things very different in size. Another way is to use contrasting colors.


When to Use Contrast

In interface design we use contrast to organize information and direct the eye.

A wall of text with no contrasting elements to break up the flow can be tiresome to read.

Contrasting font sizes and styles can indicate a heading that precedes a section of subordinate text. It breaks up the flow and gives the reader visual cues to pause and shift their focus and allows them to process the information in chunks.

The example below might be a layout for a website home page. Notice how typography helps add contrast in the headings.

You'll find examples like this in many traditional Newspapers. This is also an example of visual hierarchy, which we'll talk more about below.

We also use contrast to indicate important information.

Using different typography or colors can alert users when a warning or crucial message demands attention.

A red text block, for example, might make a user pause before a destructive action. This red dialog contrasts highly against the pale gray background.

You'll find examples like this is in application design, as with the warning that the Google Chrome browser shows if you are about to enter a site that contains malware.

Note how well the white text works against the red background. That's because the white also contrasts highly against the red background.

There are some caveats when using color. These are less of a concern when it comes to wireframes, but be aware of some the issues below as you move on to visual design.

  • Be careful not to use colors that don't contrast enough, because they may be difficult to read. Blue wouldn't work as well, for instance.
  • Be sure to consider cultural norms when it comes to color.
  • Colors have different meanings in different cultures.
  • Also be aware that users who have experience color deficiency in their eyesight may also have difficulty recognizing certain colors.

How to Use Contrast

Contrast works best when things are very different from each other.

In the form below, all of the text is too similar. The headings and labels show little contrast and it's subsequently more work for the user to parse the text to determine where one piece of information ends and another begins.

We can add more contrast so that the pieces of information contrasted with each other.

By making the title and headings stand out visually using scale and weight, they can be read at a glance, before continuing to the inputs below. This helps the user get through the information more easily.

Certain controls may help you to easily use contrasting text. In Balsamiq, a Title control is 40px by default and a text block, useful for body text, takes your default project setting (around 13 - 16px).

Remembering to use controls that are intentionally made for specific contexts like these will keep get you in the practice of using contrast effectively.


Mike AngelesBy Mike Angeles
Got questions or feedback? Email mike@balsamiq.com.