fbpx
Tips for designers

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. 

Contrast, water pool
Example of a high contrast
Nature
Example of a low contrast

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.

GRID website
Grid heatmap  1

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%.

GRID website
grid heatmap 2
Low contrast button - only 1% attention
Hight contrast button - 5% attention

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.

Leave Your Comment

GET HEATMAP