A webpage usually has some sort of order the designer tries to guide the user through. There are plenty of ways and elements involved in getting the user to read through the content, but I’ll focus on some pretty simple and standard ways to create contrast in order to push the message of the site and hopefully accomplish the company’s goals.

Contrast through Color

Color is probably the first thing that comes to mind when thinking about contrast. Especially important with typography, color contrast creates a visual distinction between elements and dictates what is “important” to read and what is “more important” to read.

Sure, the word “VIRGIN” will grab your attention, but there’s no doubt that hot pink stands out beautifully on that pure white.

You can’t get more contrast than black and white. A quick glance at the site and it’s very clear what the message is.

The color contrast created with the background makes the foreground content area well framed and easy to read.

Contrast through Size

Large fonts, images and elements are quickly noticed by users. While over sized elements are a more recent development in the web community, it operates on the basic principles of contrast: big things stand out when placed next to small things.

Text doesn’t get more readable than this. There’s a reason newspapers use large, black, serif fonts.

Quommunication carries it’s style of large bold fonts throughout the site. It becomes a clear indication of content sections.

With imagery as powerful as Jesus Christ, it’s no mistake that a huge space was dedicated to his portrait to tell the user exactly what the site is about and focus the user on the message.

Contrast through Depth

Depending on the style of a site, there can be many visual planes, but typically there’s a background, foreground and something beyond that for elements with drop shadows, indentations, grunge elements and more. These virtual layers are great because the designer can push elements closer to the user.

Campaign Monitor creates shadows and lighting to push their screenshot forward and present their product in a professional and elegant way.

Fun elements like these are one of the first things scanned by the user because they push past the foreground.

Those giraffes appear closer to the user even without a drop shadow. They may not have a message, but they do enforce the feeling and mood of the site.


There are many other ways to use these techniques, as well as other ways to create contrast in your pages. However, these techniques only work in moderation since they’re only effective through visual differentiation. If there’s nothing but 72pt gray text on a white background, nothing stands out and it becomes hard to read. Elements only look dark when they’re next to something light… elements only look big when they’re next to something small.

Helpful Resources