Plan ahead when designing semi-transparent overlays

This is a web version of the common problem you see in subtitled films – white text on a white background is going to be very hard to read (see Gaîté lyrique). I always prefer automatically overlaid text to have a dark mask behind it to guarantee sufficient contrast.

White text on a black and white photo

Avoid poorly contrasting text

The consumerist website tries to avoid this with what looks like a CSS opacity fade on the background image so that the title at the bottom will have enough contrast to be seen.

The Consumerist - CSS opacity fade

The Consumerist – CSS opacity fade

This is perhaps a more elegant solution than a solid mask around the title itself, but it breaks down when viewed on a narrow mobile screen when the words bunch up across the whole image.

The Consumerist - CSS opacity fade on mobile

The Consumerist – CSS opacity fade on mobile