Lowering the contrast

Labels are not just words. Icons often play a similar role, although their function is more decorative than practical.

The problem with icons is that it's hard to modify their weight like we can with text.

However, we can still play with color. And to be precise - we will play with contrast using color.

The rule is - the lower the contrast, the less visible the element is.

In other words - the more the color of a given element will coincide with the color of the background on which it is located, the less conspicuous it will be.

This is a good tactic to use in secondary elements or to de-emphasize labels like icons.

By changing the color of the icons to a brighter one, we will effectively reduce the contrast between the icons and the background (of course, as long as the background is bright).

Thanks to this, icons (which are a secondary element here) do not compete for attention with text (which is of course primary).

Playing with contrast and weight at the same time

Sometimes one glance at a given element is enough to be sure that without reducing the contrast it cannot be accepted.

For example, the lines that divide the items in the list below are almost the same color as the text, making them compete with it for attention. This makes the UI look messy and "dirty".

However, if we simply reduce the contrast by making the lines lighter in color, they become almost invisible and lose their meaning.

But we can combine 2 things - use a lighter color to reduce the contrast, while increasing the weight of the dividers by changing their thickness from 1 pixel to 2 pixels.

This will compensate for the color change, so we can enjoy the lower contrast of the secondary element without losing its usability.