WebDesign Tutorial - Lowering the contrast

This is part ten. You can find the ninth part, Size matters, here

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 colour. And to be precise - we will play with contrast using colour.

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

In other words - the more the colour of a given element will coincide with the colo 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 colour 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 colour 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 colour, 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 colour change, so we can enjoy the lower contrast of the secondary element without losing its usability.

Next part - Low contrast vs low aesthetics

Material Minimal, which is basically Material Design on steroids can be found here on Figma.
Material Design for Bootstrap is a UI Kit, that uses Material Minimal, check it out here.
And TW Elements, our newest child is based on Tailwind CSS. Check it out!