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:

1_Fp7IWE5kGlxO0Ui4DBazpQ

1_fm3pl2iCb9CEtos1xVTvxQ

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

1_pcYMHKMN7tPHUR7gpa7z-g

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:

1_nYaBjasC7qWVM8UaDvYIuQ

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:

1_tga6JHJKMBE4fk5Tz3OQQg

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:

1_E_FsV8lRics-FgHDKAvOOg

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.

1_H8nMBmq1Twunb_gb6GJaMw

An example of background and button contrast:

1_jNFPkVZJzDWSYlo6PwC7lw

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.

1_HCRT83MCduesCvdy7sQ6Gw

Example of select fields:

1_1i8oyEL8rFMBO3J6qgT_PQ

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

1_h7L90dbdLo5wqZb7XJmFkw

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:

1_aChF2TfIauDJH_3qMbmmrg

Outcome

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 *