Today, I want to write about a CSS feature, that is still experimental. But it can make a difference for users who have difficulties reading text on transparent elements.

On many websites, you will find some elements that place text on an image. This is very often a huge issue for the readability of that text.

Text on an image

Let’s use a little example. WordPress offers the “Cover” block. When you use it, the image becomes a background image. The block has a control for the “overlay opacity”. If it is set to a value 21 or lower, the text is black by default. If you set the value to 22 or higher, the text color switches to white.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

As you can see in the example above, the text is hard to read in the upper part, even if you usually don’t have issues reading text on images. For a dyslexic person like me, it can get extremely frustrating.

Using a preference to reduce the transparency

The new CSS property I want to write about is prefers-reduced-transparency and just as for the reduced motion preference, it would use the reduce value. Here is an example for the Cover block:

@media (prefers-reduced-transparency: reduce) {
    .has-background-dim {
        opacity: .7;
    }
}

In a previous blog post, I’ve explained how you can simulate such preferences. If you would simulate the render setting, the Cover block would look like this after the “opacity” change:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Isn’t that a lot better to read? Changing the opacity when someone prefers a reduced transparency is quite obvious. But as with any other media query, you can have any CSS properties inside of it. So instead of changing the opacity, you can also change the element.

How about moving the text below the image without any transparency and with black text on white? Or you align the text next to the image. Be creative and make your content readable for people with different preferences and needs.

Conclusion

There are so many CSS properties that are unknown or not yet widely available. This specific one can be used in Chromium browsers already, and Firefox users can set a flag to use it. If you are using Windows 10/11, macOS or iOS, you can also already active this setting, as explained in the documentation. Given that OS support, I would be surprised if this new media feature will be experimental for much longer.