Differences attract the eye, and contrast heightens differences. This is the operative principle behind using contrast for web design: subtly controlling the elements that attracts 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 on 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.
Every color has a distinct opposite, and placing those colors near each other will draw attention to them. As discussed in the free e-book Web UI Design for the Human Eye, each color is a part of a trifecta that all complement each other.
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:
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.
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.
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.
This page makes use of contrast 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.
The Land Rover microsite tells the stories of the company’s driver, but also masters the contrasting aspects of light and dark.
While the colors may follow the same similar palette (accenting the rugged, outdoorsy feel of the brand), the shades are what we want to discuss. In the scrollable vertical navigation menu to the right, you’ll notice the center, selected option is brightest and most clearly visible. As we get farther from the selection, the other options get darker, creating a funnel effect focusing our attention on our main choice.
Click on one of the stories, and the above menu pops up. Notice how the new narrative has its own background, distinctly darker than the home page’s background. Again, the bright white text dominates our vision so we can focus on the words of the story.
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.
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.
The V76 site by Vaughn showcases the importance of size, and the power of diversifying it.
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.
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 more practical advice, check out the free ebook Web UI Design for the Human Eye: Colors, Space, Contrast. Visual case studies are included from 30+ companies including Medium, Intercom, Bose, and Etsy.