How Can You Boost Your Design Using Contrast
Contrast is one of the most effective tools for making certain elements in your design stand out. Contrast 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.
There are many types of contrast, such as shape, size, color, and texture. In this post, we’ll focus just on color contrast.
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.
Especially contrast is important in web design, because people don’t 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 theory applies into real case
Let’s check if heatmap proves the theory. Main header title “The grid” gets 37% attention. CTA button hasn’t enough contrast and it is relatively small size. Heatmap shows the results – only 1% reach.
We tried to use “contrast and size” – principle of design: increased call to action button contrast by changing color and made CTA button bigger. Results – CTA button visability increased by 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.