Harnessing contrast to draw attention

Contrast is the difference between two or more elements, like bits of text, imagery and backgrounds. Applying more contrast in some areas (or less contrast in others) tells people who visit your site about your priorities, even if they don’t realise it.

Like colours blend

If you want something to be legible against a light background, use dark colours. These examples use the same four shades of grey against black and white. Shades that almost match their background are harder to read. (Also notice how the dark block stands out more than the white block on this page’s light background.)

Visitors are natural scanners who skip from point to point. They correctly assume most information on a page is not immediately important to them. You can use this to your advantage by deliberately giving them something to skip over. How? Contrast.

Contrast by comparison

These examples have four elements: A title, a byline, a date and a block of text. Most people will decide at the title whether or not the content is worth reading. But we use three techniques to guide the reader from the title to the content instead of the title to… well, who knows where they’ll wander?

• Extra space underneath the large, dark title gives more blank background for it to contrast against. The title is noticable because it’s larger than the text around it. That extra gap helps emphasise its greatness.
• The low-contrast byline gives visitors something to skip. Credit to the author is important, but “low priority” isn’t the same as “unimportant.” By making it fade into the background, we tell the visitor that the other elements are more important.
• If necessary, starting the content with a bit more contrast (larger size, different style or a darker element) will lead visitors into reading the content. The last two examples (left) play up the date for two reasons: First, visitors may start naturally reading the first line of content; second, it creates a rhythm of dark and light elements that will appeal to visitors.

By themselves, none of these techniques is strong enough to make much difference. But many subtle cues contribute to the overall effect. The effect is cumulative.

1. Sample title

By firstname lastname 1 January 2009 Contrast in design can draw attention to the right content while putting lesser content in its place.

1. No contrast, aside from the title’s size, makes bland design.

2. Sample title

By firstname lastname 1 January 2009 Contrast in design can draw attention to the right content while putting lesser content in its place.

2. De-emphasising the byline and date make the title and content seem more important.

3. Sample title

By firstname lastname 1 January 2009 Contrast in design can draw attention to the right content while putting lesser content in its place.

3. Dark-light-dark-light rhythm adds visual interest, helps tell elements apart and fulfills visitors’ need to hop.

4. Sample title

By firstname lastname 1 January 2009 Contrast in design can draw attention to the right content while putting lesser content in its place.

4. But don’t go crazy. Too many gimmicks will draw interfere with the natural flow from title to content.

Localised contrast

Shadows can be a great at making elements stand out—but they can also distract visitors with clutter. The best shadows make the background more “background-ish” by adding contrast between the element and whatever it’s floating above.

1. When text is already dark, adding a dark shadow muddies the shapes.
2. Dark text on a dark background only gets worse with a dark shadow. But a light glow creates a “local” background colour for the dark text to stand against.
3. Dark shadows on dark backgrounds help similar or light colours to stand out.
4. But the best way to get contrast is to make the text different from the background. Effects that contrast against both the text and background, like the glow here, detract from legibility.

The colour of dark

Shadows work best when they match the background, not the items that they support. Each circle to the left is red, including the area behind their letters. Imagine a light cast on these circles. The light makes the circles brighter, not the shadow areas darker, so dark red looks more natural than black.

Of course, it depends on what you need. If you want more contrast, use a darker shadow. Just remember that it’s a shadow, not a beard.

1. This example starts with a dark letter on a dark background.
2. Add a light to create a shadow, but the dark shadow matches the letter better than the background. That’s not good.
3. Making the letter white helps it stand out against a dark background. But the shadow doesn’t match either.
4. Shadows don’t make things darker. Lights make backgrounds brighter.

It’s a tool

Contrast can also set a mood. High-contrast visuals blare energy across the screen, while low-contrast is soothing. Using the two together means choosing what you want your visitors to pay attention to first.