How to enhance attention with color contrast

Contrast – the fundamental foundation of web design. The difference between two or more elements is called contrast. Contrast can be created using the following techniques:

Today we will focus specifically on technology color contrast. The combination of different colors will help to visually divide the page into blocks and create a contrast of the key elements of the site.

The main purpose of color contrast– user attention management. Color will help enhance important elements, and at the same time muffle minor.

It is important to make it a rulehighlight only those elements on which we want to focus the site visitor s attention.

If you select many elements, then defocusing will occur, and your eyes will have nothing to catch. Thus, the user will start to get lost in the information provided.

As an important element, you can highlight the call to action button:



Color contrast allows you to build a hierarchy on the site and helps to switch attention between blocks:


What results in poor color contrast?

  1. Deteriorating site perception
  2. Loss of visual hierarchy
  3. Difficulty reading page content
  4. Loss of focus on key elements

Let s consider the problem of insufficient contrast with a real example:


In this example, an aspiring designer decided to make a website in calm, neutral colors. As you can see, due to poor contrast, the site s responsiveness has worsened and attention has been lost on the main elements.

What can be done?

First, let s highlight the important elements of the site on which you need to focus.

In our case, these are the menu, text links, and a call to action button. It is these elements that should contrast with the main background.

In this screenshot, I have highlighted the points that can be improved:


The main contrast must be created between background menu (1) and main screen background (2), that is, visually separate these blocks.

Alternatively, you can darken the background of the home screen and lighten the menu. Thus, we will improve the readability of the text in two blocks. Another option is to make a dark menu with white text.

An example of good contrast between menus and main content:


Button color (3) and text links (5) you need to make them bright in order to create maximum contrast with the background and make them stand out from other elements of the site.


An example of background and button contrast:


Selection fields (4) in this case, they create the same contrast with the background and take all the attention, although these are secondary elements. Therefore, it is better to dim the color towards gray or try to make the margins a stroke.


Example of select fields:


Concerning header (6), then here you can also add contrast, and change the color to white.


Concerning header (6), then here you can also add contrast, and change the color to white.

An example of the contrast of the header and the main background:



Color can be a great tool for achieving various web design goals. Thanks to the correct placement of color accents, you will be able to control attention and build in the user s head a correct understanding of which elements are important and which are secondary.

Source: Medium

Leave a Reply

Your email address will not be published. Required fields are marked *