A simple UX trick for blog pictures

This post was inspired while I was updating my portfolio site that has a list of blog posts, like this one! These posts have some white text sitting on top of the blog pictures, so the problem that I ran into, and many of you may have run into this before, is the disappearance of the white text when I chose a light picture to represent the blog post, like so (the date at the top left):

But I didn’t want to just change the text color or the picture, because eventually, I would run into this problem again.

So, here’s the trick, add a text-shadow. If we’re dealing with CSS, make the distance 0px and the blur about 5px. You’ll instantly notice that the text comes back! It’s not perfect, but it’s a quick fix for a problem that will keep coming back, no matter what.

The only caveat is that your shadow color should be the opposite of the text color. If you don’t know the opposite color of say #C500FF, you can go to Adobe’s color wheel website and select “Complementary” to see the opposite of that color.