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 gray), things get complicated when we have to deal with a colored background.

Suppose we have a colored card like the one below. Well, if that wasn't enough problems, it's not only colorful, 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 color change to a lighter gray that reduces the contrast.

Remember the sentence from the previous lesson?

So if we want to reduce the contrast and limit the visibility of secondary elements, we need to change the color 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 color 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 color 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 color), but thanks to this the whole composition is nicely consistent in color.

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