5 Examples of Effective Contrast in Web Design

Differences attract the eye, and contrast heightens differences. This is the operative principle behind using contrast for web design: subtly controlling the elements that attract your user’s eye by what you place around them.

Sounds black-and-white? The truth is actually a bit more colorful.

We can simplify the types of contrast in web design into three main categories:

Light and Dark Colors

The most easily recognizable form of contrast is black-and-white, but the light/dark contrast can be applied across the color spectrum. As the founder of Usaura Dmitry Fadeyev shows us, designers can use light and dark to show depth (as with pressed and unpressed buttons), in addition to generally accenting certain visuals.

UNLIMITED DOWNLOADS: 50+ Million Add-Ons & Design Assets

Clashing Colors

Every color has a distinct opposite, and placing those colors near each other will draw attention to them. Each color is a part of a trifecta that all complement each other.

Related reading: Beautiful Colorful Websites

Size

Bigger elements stand out more, but they take up a lot of screen real estate. Have the best of both worlds by shrinking other elements so that others stand out more. Alternatively, some strategic shifting of the existing elements in a layout encourages your users to perceive some as bigger or smaller.

While these are the main types of contrast, the uses for contrast can likewise be categorized:

Interactive Elements

Icons, buttons, and individual photographs can each contain meaningful color and size choices to combine into a rich visual hierarchy.

Background and Foreground

While similar elements can be contrasted to each other, all elements on the same plane can be contrasted with another plane. In fact, creating your background with care will do wonders for how your users interact with the foreground.

Typography

Text sizes and colors, as well as the fonts themselves, can contrast against each other, or even the background/foreground as a whole.

But why use words to describe visuals when we could just show you. Take a look below at five of the most beautiful examples of contrast in web design.

Examples of Contrast in Web Design

Le Printemps du Polar’s La Femme Fatale

You don’t need to speak French to appreciate the visuals of this interactive infographic detailing the history of the femme fatale character throughout noir films. (UPDATE: This website is no longer online.)

This page makes use of contrast in every way it can.

For starters, the mauve background forces the user’s attention forward to the deep blue femme fatale, while the soft green in the typography completes the trifecta. The change in light to dark takes enhances the background/foreground distinction. At the same time, the change in type size makes it clear that “Le Femme Fatale” takes center stage, while the border options seem less important.

HBM FiberSensing

While this page’s main allure is the animation in the background, there is an example of contrast we’d like to point out.

Clearly the text “Bringing light to measurement” is the focus of this page, as we can judge by its size. But the additional branding “FiberSensing is an HBM Brand” was not only included, but placed directly next to the main slogan. It’s much smaller text size adds extra weight to the slogan, while simultaneously suggesting that it itself is more of an optional message.

Most importantly, the use of contrast reflects on the purpose of the company. The site feels bright and luminescent, which matches perfectly with the headline message.

Joris Rigerl

Contrast isn’t always about being showy. Sometimes it’s used best when promoting minimalism.

There’s not much room for the eye to wander on Rigerl’s site, and it’s clear from the stark black/white contrast that he wants you to choose one of the six options to the left. There’s really no other choice.

Doing so reveals another use of contrast worth mentioning. A transparent background appears, but take a look at the project description. The description titles – Project, Type, Year, and Team – are all smaller and in a lighter shade than the descriptions themselves, bowing out to keep the focus on the H2 text. Notice also the contrast between all caps in the H2 and the use of lower-case in the H1.

The reversed text hierarchy is certainly unorthodox but works well to draw attention to the project names.

Vaughn’s V76

The V76 site by Vaughn showcases the importance of size and the power of diversifying it. (UPDATE: This website is no longer online.)

Each of the four clickable elements on the page is varied by size, showing a set hierarchy in a Fibonacci spiral of significance. The main left-hand option is made more impressive by its proximity to the lesser bottom-right corner ones.

Conclusion

Contrast comes in more styles than just black and white, so try experimenting in the different fields for the best results. Minimalistic sites may not want to use too much color or elements that are too big, but a more fun and entertainment-based site would be well to have contrasting colors and an assortment of sizes.

For Similar Articles, Be Sure to Check Out: