Contrast is one of the most effective tools for making certain elements in your design stand out. This design principle occurs when an element looks different from its surrounding elements or background. Dark text contrasts against a light background, for example.
Our brains are wired to notice differences in our environment, which causes contrasting elements to jump out at us. As a result, if you design is not performing as well as you expect, think no more and try to boost it with contrast.
There are many types of contrast, such as shape, size, color, and texture. In this post, we will focus just on color.
By nature, we tend to group similar objects together and differentiate between those that are dissimilar. Our eyes are immediately drawn first to the object that stands out the most.
Contrast is especially important in web design, because people don not read, they scan. They will notice highlighted text, shapes and objects – and it is your job to design these objects in a way you want readers to see.
How does a theory apply into the real case?
Let’s check if the following heatmap proves the theory. Main header title “The grid” gets 37% attention. CTA button has not enough contrast and it is relatively small size. Heatmap shows the results – only 1% reach.
We used color and size design principles to improve visual hierarchy. To achieve that, we increased call to action button contrast by changing color and made the CTA button bigger. Results – CTA button visibility increased to 5%. Main header “The grid” and the logo – the same results: 37% and 1%.
To sum up
As human beings, one of the first things our eyes notice is difference, whether this be a difference in color, shape, texture, size or position, among other things. So, do not afraid to use contrast to highlight the element you want visitors to focus on.
