I was already aware of the new media queries in CSS Media Queries Level 5 that aim to improve accessibility on the web - such as prefers-reduced-motion.
Today I learned about a new media query, which hasn't been widely written about yet: prefers-reduced-transparency.
"Reduce transparency" can be toggled in the macOS system preferences like other accessibility options. It's a system-wide option and when I turn it on, I immediately notice the macOS status bar changes from translucent to opaque. I find the menu options a lot easier to read like this, so maybe I'll keep it turned on.
Back to CSS: if the user has turned on "Reduce transparency" then we need to reduce, or even disable, the amount of transparency we're using on our pages and web apps.
When would people want to reduce transparency on a web page? The first example that came to my mind is text on top of images. I thought of the links to news articles on the BBC home page. Here, we can see text directly on top of an image:
The subtitle text in the example above is problematic, especially at busier parts of the article image.
It's possible but complicated to achieve a better contrast ratio between the article headline and the image beneath it.
Interestingly, on the same BBC page, we can also see an example of how the developers could style the above content for users that have prefers-reduced-transparency turned on. The text is directly beneath the image, rather than over it.
This solution results in the article headline on an opaque background which means there are no transparent elements.
Using the prefers-reduced-transparency media query will allow developers to show the first design to users that haven't set a "Reduce transparency" preference, and the design in the second image to users who have enabled it.
W3C Media Queries Level 5 - Detecting the desire for reduced transparency on the page