Denis' Micro Blog

Okay...

For today I got a quick little design tip for you to share.

Usually, you want some grayish-colored text on white background. This way the text doesn't look so harsh to your eyes and de-emphasizes it a bit from more important elements.

But look what happens when we do that same thing on a colored background. 😅

Doesn't look that great, doesn't it? That's because the color contrast has been reduced between the colored background and the text color. It just barely passes the WCAG AA contrast rating for large texts (3,3:1). We can do better though... 😅 

The trick to solve this is to make the text color closer to the background color. Sounds counterintuitive? Right. But let me show you.

First, we take the background color and one trick is to take that color in the HSL color format. The hue stays the same but the trick is to adjust the luminosity and maybe the saturation value by a bit.

Now, look what happens... 🤔

Looks way better. It also has a contrast ratio of nearly 5:1 which is a lot better than the 3,3:1 from before. All of that came just from changing the text color to a lighter version of that green background color.

This approach also has the advantage that it doesn't look quite as faded compared to choosing a white text color with adjusted opacity. It looks even better when you have a colored background with some sort of additional pattern. I mean... Just look at that. 😁

Yeah... I just wanted to share this quick little tip with you for today. ❤

See ya