Contrast creates space and difference between components in your design. A good design that wants to draw focus to a certain element has a background color considerably different from the element that seeks attention. This is significantly important when it comes to type and the ability for your type to be readable and pass accessibility. The element that pops from the screen is usually the element that has the highest contrast. Source
Contrast: Source
Contrast: Online
Contrast: Real life
Contrast is definitely one of the most powerful principles. However, there are more ways outside of just color to show contrast. Texture is a good example (rough vs. smooth).
I’ve noticed business cards now have a different surface feeling on one side as opposed to the other.
http://www.vermillionsilkcards.com/blog/suede-business-cards-vs-silk-business-cards-which-finish-best
Hey Amit,
That is a great point. Texture is a great way of showing contrast which I didn’t even think about. I like your examples of business cards and this also reminds me of those old school Echō t-shirts that had their logo in velvet on the shirt. It had depth and stood out from the cotton shirt it was sitting on. Thanks for sharing!
I’m going to stick my neck out a bit and offer an example that I believe fits within the framework described by Amin and the others who have commented, while also building in additional meaning through high-contrast subject matter, specifically very young children holding high power firearms. Full disclosure: I used this same image in my “highlighting” example, but I think it works here as well from a typeface treatment point of view and from a subject matter point of view: https://momsdemandaction.org/wp-content/uploads/2013/04/Ridinghood.jpg
Hi Katherine,
I’m glad that you used this image on multiple posts. It’s such a powerful image and so captivating. There is a stark “contrast” in this photo. Feels like two different images in one. Really great and valid example. This reminds me of those weight loss before and after photos that are side by side. You get shocked on the difference. This is even more shocking of course. Thanks for sharing.
It is true that contrast will draw focus to different elements, just like what you have mentioned earlier. However, this is not only limited to type and readability. Contrast is one of the most important strategies for designing a website. Nearly all well-designed websites have an action color which is a color that has the most contrast with other colors that were used in that website. Primarily, this is used to draw user’s attention to a specific element and to provoke them to take an action such as filling a form among other things.
An example of action color can be found in the following link:
https://conversionxl.com/wp-content/uploads/2017/07/Screen-Shot-2017-07-03-at-10.25.39-AM.jpg
Hi Shirin,
I agree that contrast is not only applicable to type. That’s why I said it’s significantly important not the only thing that’s important. Also, the online example I used has no type on it. I like the point that your making about how call to actions have a high contrast ratio. That is a great example of bringing attention to a certain element on the page. An example that comes to mind is Pinterest call to action.
Contrast is very powerful, and I like using this principle/technique. By accentuating the differences between the (design) elements, it brings more attention to each element. The example here shows more images, but I can create by words too. https://www.noupe.com/wp-content/uploads/trans/wp-content/uploads/2011/06/whatfontshouldiuse.jpg
Hi Miyuki,
Thanks for your great example! You gave a great example of how a dark background can help improve the readability of type. I would also love to hear what you thought about the example I gave and what other time do you think using the principle of contrast can improve a design. Thanks!
I enjoyed reading this post, but it seems that you focused on the type only? Maybe that’s just one of many examples, but I would agree about making the background color considerably different from the foreground to make it stand out, or create a visual focus.
Contrast is so powerful, that brands like “Apple” have created campaigns around the contrast design principle that creates an emotion, and offers a visual focal point, in this case, the iPod.
http://blog.visme.co/wp-content/uploads/2015/09/slides.056.jpg
Hey Jonatan,
Thanks for your feedback. I didn’t want to focus strictly on type but that was a big example that I did use. The “online” example that I used had no type on it and the “real life” example I used has other elements other than a type face. I really like your example of Apples add campaign. The contrast of different colors side by side really make this add “pop”. Apple did a great job using contrast in this ad and also used negative space even better. Here is another great ad that Verizon launched that used contrast and did really well. They also got sued for it lol.
https://www.blogcdn.com/www.engadget.com/media/2009/10/mapforthat.jpg
I believe contrast works well alongside the “less is more” strategy, since contrast can quickly guide the user’s eyes to an important feature, such as a call to action, but it is also important that the design is not cluttered. I think it is also employed heavily in the world of health and safety, with a lot of safety designs being heavily contrasted for visibility. OSHA floor markings example: “https://i.imgur.com/ID6F6kH.jpg”
Hey Paul,
Your right, I never thought about that. Having less to look at with a high contrast ratio brings a lot of attention and is super powerful. I agree that if theres too much on the screen the noise will drown out any contrast you have. Great example of how contrast is used in the real world. With bright yellow lines signifying cut of points and the red screaming to the user where to stop. This reminds me of traffic signs.
Coming from a photography background I’ve always found contrast to be an underused principle by many designers. The masters like Saul Bass and Tibor Kalman understood the power of contrast to evoke emotion and control the hierarchy of information delivery. And, like the example below, contrast can create the opportunity to tell two different stories at the same time:
https://designcontest-com-designcontest.netdna-ssl.com/blog/wp-content/uploads/2016/06/daily_picdump_684_640_08-576×557.jpg
Hi Michelle,
I learned a lot from your comment, thank you so much. I looked up some of the work from Saul Bass and Tibor Kalman and it was inspiring. I love how you mentioned that you can control emotions and hierarchy based off the use of contrast. The example you used shows how you can change the meaning of words with different colors and how contrast can bring different meaning and importance to it. After looking at Tibor Kalmans work one example of contrast that I found inspiring was his AIDS Color cover. Thanks for sharing.
http://www.designishistory.com/files/gimgs/95_tibor00.jpg