WebDesign Tutorial - Low contrast vs low aesthetics

This is part eleven. You can find the tenth part, Lowering the contrast, here

Low contrast vs low aesthetics

---

As we learned in the previous lesson, lowering the contrast is an important technique in UI design, but it should not mean lowering the aesthetics. Quite the opposite.

While in the case of a light background, the solution is quite simple (we just give the element a sufficiently light shade of grey), things get complicated when we have to deal with a coloured background.

---

Suppose we have a coloured card like the one below. Well, if that wasn't enough problems, it's not only colourful, it's also gradient 😩

But let's not panic. We will use the technique of reducing the contrast and give the secondary elements (i.e. the second and third lines of text in the card) a light gray color.

But uhh, now the card looks weird. Like it was washed out and lifeless. It hits the eyes especially hard when we have such an attractive navy blue gradient to use in the background.

I don't know about you, but I feel like we're wasting an opportunity for good design here.

Ok, here is a secret - it's not the colour change to a lighter grey that reduces the contrast.

Remember the sentence from the previous lesson?

"The more the colour of a given element will coincide with the colour of the background on which it is located, the less conspicuous it will be."

So if we want to reduce the contrast and limit the visibility of secondary elements, we need to change the colour to something more similar to the dark blue gradient in the background.

And voilà - we brought life back to our card 🎉

Let's not stop though. Since the second line of text is secondary, we can consider the third line (the little print) to be tertiary, so it should have even less visibility.

If we don't want to look for a new colour even more similar to the background, we can reduce the visibility of the tertiary element by making it a bit transparent.

For example, in the tab below, we set the CSS property for this text to opacity: 0.7

And now the final touch.

We have already achieved a very attractive and color-coherent composition. So let's add a final brushstroke on our little piece of art and gently change the colour of the primary element (first line of text) to a very soft blue.

This is a detail that does not change the contrast of the primary element (the text is still very light in colour), but thanks to this the whole composition is nicely consistent in colour.

So we achieved the right balance of contrast, but we did not compromise when it comes to aesthetics. Well done us!

Next part - Beyond borders

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!