More useful UI/UX stuff on my Twitter:

@ascensus_mdb

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 😩

Do not miss
any updates

We will write rarely and only high-quality content.

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.

Do not miss
any updates

We will write rarely and only high-quality content.

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?

"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."

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 🎉

Do not miss
any updates

We will write rarely and only high-quality content.

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

Do not miss
any updates

We will write rarely and only high-quality content.

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.

Do not miss
any updates

We will write rarely and only high-quality content.

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!

High contrast vs low contrast

Do not miss
any updates

We will write rarely and only high-quality content.

Do not miss
any updates

We will write rarely and only high-quality content.



John Doe

About author

Michal Szymanski

Co Founder at MDBootstrap and Tailwind Elements / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.