CSS prefers-reduced-transparency

From Chrome 118 the new media query feature
prefers-reduced-transparency
from CSS Media Queries
5 is
available. Non-opaque interfaces can cause headaches or be a visual struggle for
various types of vision deficiencies. This is why Windows, macOS and iOS have
system
preferences
that can reduce or remove transparency from the UI.

With this new media query in the browser, CSS can adapt the interface for users
specifying a desire for reduced transparency:

.example {
--opacity: .5;

background: hsl(200 100% 50% / var(--opacity));

@media (prefers-reduced-transparency: reduce) {
--opacity: .95;
}
}

In the preceding code example, a CSS variable holds an opacity value at 50%
which is then used with HSL to create a semi-transparent blue background. The
nested media query checks for a user preference for
reduced transparency, and when true, adjusts the opacity variable to 95%, a
nearly opaque opacity value.

This media query fits in well with the other preference media queries, which
enable designers and developers to be creative while also adjusting for users.
You can think of these media queries like a chair in a car that automatically
adjusts the position to the user; when a user visits your website, it
automatically adjusts to them without them asking. So cool.

# Use cases for reducing transparency

The next few sections will be devoted to showing moments and opportunities for
reducing transparency in meaningful ways.

# Semi-transparent captions on images

It’s fairly common to overlay an image or video thumbnail with a
semi-transparent caption or summary. The following example illustrates one way
to handle a preference for reduced transparency. The overlay is entirely
removed, and the same caption contents displayed below the image instead of
overlaid.

# Transparent modals, notifications and popovers

Another way that UI elements overlay content, which often means elements of
opacity are present, is with modals, notifications and popovers. In these cases,
boosting the opacity can respect the user preference while also still allowing a
subtle amount of color from behind the overlay to peek through.

.card {
background: hsl(none none 100% / 20%);

@media (prefers-reduced-transparency: reduce) {
background: hsl(none none 0% / 80%);
}
}

# Adaptive frosted glass

Another popular image overlay style is frosted glass. In the following example,
the image behind the caption is a mirror reflection of the product image. This
has a couple advantages: the image is not cropped and the light or dark
preference can come through a bit more in the end result.

.adaptive-glass {
--glass-lightness: 100%;
--glass-alpha: 50%;

background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
backdrop-filter: blur(40px);

@media (prefers-color-scheme: dark) {
--glass-lightness: 0%;
}

@media (prefers-reduced-transparency: reduce) {
--glass-alpha: 85%;
}
}

# Hero header

A common homepage element has a bold message overlaying a looping video or
animated image. The following example has a colorful semi-transparent gradient
overlay and an infinitely animating background image. While this may attract
many eyes, it will also create issues for many, due to low contrast with
transparency and motion that can’t be controlled.

This can be fixed with two CSS media queries:
prefers-reduced-motion
and prefers-reduced-transparency. Within the reduced-motion media query you can
apply the infinite animation only if the user has «no-preference» for reduced
motion, signaling to the code that it’s ok for this user to have motion.

Furthermore, with the reduced-transparency media query, you can decrease the
opacity so the overlay color is nearly 100%. Now the message can be read easily
without a motion distraction or problematic contrast.

Put it all together and you can deploy a creative UI look while also ensuring
the target audience can read it and get the message.

.Hero img {
@media (prefers-reduced-motion: no-preference) {
animation: zoom 30s ease infinite;
}
}

.Hero .overlay {
background: hsl(none none 0% / 95%);

@media (prefers-reduced-transparency: no-preference) {
background: linear-gradient(
      to top right in oklab,
oklch(40% 0.3 340 / 70%),
oklch(40% 0.4 200 / 70%)
);
}
}

# Additive versus subtractive perspectives on user preferences

The previous example didn’t check these user preferences for their reduced
preference, instead it checks for no preference.

@media (prefers-reduced-transparency: no-preference) {
  …
}

Developers and designers often «fallback» the user experience based on these
preferences, in a subtractive mentality. This manifests in the media queries as
a check for «reduce,» at which point something from the UI is removed. The
example shows an additive mentality, where motion and transparency are added if
the user is ok with it.

This approach helps you to think about a healthy baseline experience that’s
sturdy on its own. Then, if it’s ok with the user, add to the experience.

# Devtools

The Chrome DevTools can emulate this preference for reduced transparency (and
more) in the Rendering tab. In the following video
see how to toggle the prefers-color-scheme and prefers-reduced-transparency
media queries to showcase the light, dark, transparent and reduced transparency
variants of the frosted glass card.