CSS prefers-reduced-transparency

Optimiza y ajusta la IU para los usuarios que prefieren una IU opaca.

Adam Argyle

A partir de Chrome 118, está disponible la nueva función de consulta de medios prefers-reduced-transparency de CSS Media Queries 5. Las interfaces no opacas pueden causar dolores de cabeza o ser un problema visual para varios tipos de deficiencias visuales. Esta es la razón por la que Windows, iOS y macOS tienen preferencias del sistema que pueden reducir o quitar la transparencia de la IU.

Con esta nueva consulta de medios en el navegador, CSS puede adaptar la interfaz para los usuarios que especifiquen el deseo de reducir la transparencia:

.example {
  --opacity: .5;

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

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

En el ejemplo de código anterior, una variable CSS contiene un valor de opacidad en 50%, que luego se usa con HSL para crear un fondo azul semitransparente. La consulta de medios anidada busca una preferencia del usuario para reducir la transparencia y, cuando es verdadera, ajusta la variable de opacidad a 95%, un valor de opacidad casi opaco.

Esta consulta de medios se ajusta bien a las otras consultas de medios de preferencia, que permiten a los diseñadores y desarrolladores ser creativos y, al mismo tiempo, adaptarse a los usuarios. Puedes pensar en estas consultas de medios como una silla en un automóvil que ajusta automáticamente la posición para el usuario. Cuando un usuario visita tu sitio web, se ajusta automáticamente a él sin que lo solicite. ¡Qué genial!

Casos de uso para reducir la transparencia

Las próximas secciones se dedicarán a mostrar los momentos y las oportunidades para reducir la transparencia de maneras significativas.

Leyendas semitransparentes en las imágenes

Es bastante común superponer una imagen o una miniatura de video con una leyenda o un resumen semitransparentes. En el siguiente ejemplo, se ilustra una forma de controlar una preferencia por una transparencia reducida. La superposición se quita por completo, y el mismo contenido de leyendas se muestra debajo de la imagen en lugar de superponerse.

Ventanas modales, notificaciones y ventanas emergentes transparentes

Otra forma en que los elementos de la IU se superponen con el contenido, lo que a menudo significa que hay elementos de opacidad, es con modales, notificaciones y ventanas emergentes. En estos casos, aumentar la opacidad puede respetar la preferencia del usuario y al mismo tiempo permitir que se muestre una sutil cantidad de color detrás de la superposición.

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

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

Vidrio esmerilado adaptable

Otro estilo popular de superposición de imágenes es el vidrio esmerilado. En el siguiente ejemplo, la imagen detrás de la leyenda es un reflejo espejo de la imagen del producto. Esto tiene algunas ventajas: la imagen no se recorta y la preferencia de luz o oscuridad puede destacarse un poco más en el resultado final.

.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%;
  }
}

Encabezado hero

Un elemento común de la página principal tiene un mensaje en negrita superpuesto en un video en bucle o una imagen animada. En el siguiente ejemplo, se muestra una superposición de gradiente semitransparente colorida y una imagen de fondo con animación infinita. Si bien esto puede atraer a muchos usuarios, también generará problemas para muchos debido al bajo contraste con la transparencia y el movimiento que no se puede controlar.

Esto se puede solucionar con dos consultas de medios de CSS: prefers-reduced-motion y prefers-reduced-transparency. Dentro de la consulta de medios de movimiento reducido, puedes aplicar la animación infinita solo si el usuario tiene la opción "no-preference" para el movimiento reducido, lo que le indica al código que está bien que el usuario tenga movimiento.

Además, con la consulta de medios de transparencia reducida, puedes disminuir la opacidad para que el color de superposición sea casi del 100%. Ahora el mensaje se puede leer fácilmente sin distracciones de movimiento ni contrastes problemáticos.

Si combinas todos estos elementos, podrás implementar un diseño de IU creativo y, al mismo tiempo, asegurarte de que el público objetivo pueda leerlo y recibir el mensaje.

.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%)
    );
  }
}

Perspectivas aditivos y sustractivas sobre las preferencias del usuario

En el ejemplo anterior, no se verificó si el usuario tenía una preferencia reducida, sino que se verificó si no tenía ninguna preferencia.

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

Los desarrolladores y diseñadores suelen “realizar un resguardo” de la experiencia del usuario en función de estas preferencias, con una mentalidad sustractiva. Esto se manifiesta en las consultas de medios como una verificación de "reduce", en cuyo caso se quita algo de la IU. En el ejemplo, se muestra una mentalidad aditiva, en la que se agregan movimiento y transparencia si al usuario le parece bien.

Este enfoque te ayuda a pensar en una experiencia de referencia saludable que sea sólida por sí sola. Luego, si está de acuerdo con el usuario, agrega información a la experiencia.

Herramientas para desarrolladores

Las Herramientas para desarrolladores de Chrome pueden emular esta preferencia para reducir la transparencia (y más) en la pestaña Renderización. En el siguiente video, obtén información para activar o desactivar las consultas de medios prefers-color-scheme y prefers-reduced-transparency para mostrar las variantes de la tarjeta de vidrio esmerilado en colores claro, oscuro, transparente y con transparencia reducida.