![thumb](https://www.webdesignerdepot.com/cdn-origin/uploads/2010/07/thumb2.jpg)
An Introduction to Contrast
Contrast can be defined as "the difference in visual properties that makes an object (or its representation in an image) distinguishable from other objects and the background." In plain English that could be described at its most basic level as "things which look different from one another." For designers in all walks of the practice, but particularly web designers, contrast is at the root of pretty much everything. We are constantly trying to establish hierarchies of importance, draw people to certain areas of a page and communicate a clear and concise message at the very heart of our work. Creating relationships between different elements of a design is just about the most important thing that you can do. You've probably been doing it a great deal already, consciously or not. Obvious examples of contrast are black and white, big and small, fast and slow, thick and thin. Opposites are the easiest way to grasp what contrast is, but when applying contrast to design work it's never quite as black and white. If you were wondering, that's where the saying about a situation being "black and white" comes from, which also leads to the saying of something being a "gray area". In design we are often comparing things which are different but not opposite, for example an H1 and an h1, or an "add to cart" button and a "check out" button. This is where greater levels of contrast come into play. Let's take a look at the different types of contrast and some examples of how they're used in web design.Color Contrast
The most common example of all, this is pretty much where it all starts. If two colors are different to each other (say, black and white) they have high contrast, whereas if they are very similar (red and orange) then they have low contrast.![tekroc](https://www.webdesignerdepot.com/cdn-origin/uploads/2010/07/tekroc.jpg)
![gowalla](https://www.webdesignerdepot.com/cdn-origin/uploads/2010/07/gowalla.jpg)
![envato](https://www.webdesignerdepot.com/cdn-origin/uploads/2010/07/envato.jpg)
Size Contrast
The next most common form of contrast is using size. Something big beside something small generally indicates that the bigger item is far more important. That's right, we're saying that size matters!![madebywater](https://www.webdesignerdepot.com/cdn-origin/uploads/2010/07/madebywater.jpg)
![28thiers](https://www.webdesignerdepot.com/cdn-origin/uploads/2010/07/28thiers.jpg)
![slidescreen](https://www.webdesignerdepot.com/cdn-origin/uploads/2010/07/slidescreen.jpg)
Shape Contrast
Shape contrast means making things notable in by their difference in physical shape compared to other things on the page. At its most basic level this can be used in things like adding rounded corners to buttons, but taken to more extreme levels it can attract a lot more attention.![anebstar](https://www.webdesignerdepot.com/cdn-origin/uploads/2010/07/anebstar.jpg)
![carbonmade](https://www.webdesignerdepot.com/cdn-origin/uploads/2010/07/carbonmade.jpg)
![wireframeplus](https://www.webdesignerdepot.com/cdn-origin/uploads/2010/07/wireframeplus.jpg)
Positional Contrast
Creating contrast in positioning is a very neat way to create a hierarchy of elements purely by using different alignments. In recent times this technique has been made popular by people like Elliot Jay Stocks, who used it to the extreme on his most recent portfolio site.![ejs](https://www.webdesignerdepot.com/cdn-origin/uploads/2010/07/ejs1.jpg)
![simplebits](https://www.webdesignerdepot.com/cdn-origin/uploads/2010/07/simplebits.jpg)
![squaredeye](https://www.webdesignerdepot.com/cdn-origin/uploads/2010/07/squaredeye1.jpg)
Contrast Conclusion
There is so much more to contrast than just "light and dark" - it's one of the most important principles in design and you can almost never have too much of it, provided that you use it properly. Taking your designs to the next level isn't about finding the next band-wagon to hop on using rounded corners and drop shadows for everything, it's about finding better and more efficient ways of communicating the message behind the design. Exploring contrast in detail and using it to its full potential is one of the best ways to do this. What do you think? How much attention do you pay to contrast within your designs? Is it something you think about all the time or is it something that comes naturally?John O’Nolan
Founder at Ghost.org. Writes about Open source, startup life, non-profits & publishing platforms. Travels the world with a bag of kites.
Read Next
15 Best New Fonts, July 2024
Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…
By Ben Moss
20 Best New Websites, July 2024
Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…
Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance
WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…
By WDD Staff
Exciting New Tools for Designers, July 2024
Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…
3 Essential Design Trends, July 2024
Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…
15 Best New Fonts, June 2024
Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…
By Ben Moss
20 Best New Websites, June 2024
Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…
Exciting New Tools for Designers, June 2024
In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…
3 Essential Design Trends, June 2024
Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!
15 Best New Fonts, May 2024
In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…
By Ben Moss
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…
By Simon Sterne
20 Best New Websites, May 2024
Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…