O CSS prefere-reduzir-transparência

Otimizar e ajustar para usuários que preferem uma interface opaca.

Adam Argyle

No Chrome 118, o novo recurso de consulta de mídia prefers-reduced-transparency das Consultas de mídia do CSS 5 está disponível. Interfaces não opacas podem causar dores de cabeça ou ser uma dificuldade visual para vários tipos de deficiência visual. É por isso que o Windows, o macOS e o iOS têm preferências do sistema que podem reduzir ou remover a transparência da interface.

Com essa nova consulta de mídia no navegador, o CSS pode adaptar a interface para usuários que especificam um desejo de transparência reduzida:

.example {
  --opacity: .5;

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

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

No exemplo de código anterior, uma variável CSS contém um valor de opacidade em 50%, que é usado com HSL para criar um plano de fundo azul semitransparente. A consulta de mídia anexada verifica se o usuário prefere uma transparência reduzida e, quando verdadeiro, ajusta a variável de opacidade para 95%, um valor de opacidade quase opaco.

Essa consulta de mídia se encaixa bem nas outras consultas de preferência de mídia, que permitem que designers e desenvolvedores sejam criativos e se ajustem aos usuários. Você pode pensar nessas consultas de mídia como uma cadeira em um carro que se ajusta automaticamente à posição do usuário. Quando um usuário visita seu site, ela se ajusta automaticamente sem que ele precise pedir. Muito legal.

Casos de uso para reduzir a transparência

As próximas seções serão dedicadas a mostrar momentos e oportunidades para reduzir a transparência de maneiras significativas.

Legendas semitransparentes em imagens

É bastante comum sobrepor uma miniatura de imagem ou vídeo com uma legenda ou um resumo semitransparente. O exemplo a seguir ilustra uma maneira de processar uma preferência para reduzir a transparência. A sobreposição é totalmente removida, e o mesmo conteúdo de legenda é exibido abaixo da imagem, em vez de ser sobreposto.

Modals, notificações e pop-ups transparentes

Outra forma de elementos da interface sobrepor o conteúdo, o que geralmente significa que elementos de opacidade estão presentes, é com modais, notificações e pop-ups. Nesses casos, aumentar a opacidade pode respeitar a preferência do usuário e, ao mesmo tempo, permitir que uma quantidade sutil de cor apareça por trás da sobreposição.

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

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

Vidro fosco adaptável

Outro estilo de sobreposição de imagem popular é o vidro fosco. No exemplo abaixo, a imagem atrás da legenda é um reflexo da imagem do produto. Isso tem algumas vantagens: a imagem não é cortada e a preferência por luz ou escuro pode aparecer um pouco mais no 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%;
  }
}

Cabeçalho do conteúdo principal

Um elemento comum da página inicial tem uma mensagem em negrito sobreposta a um vídeo em loop ou imagem animada. O exemplo a seguir tem uma sobreposição de gradiente semitransparente colorido e uma imagem de plano de fundo animada infinitamente. Embora isso possa atrair muitas pessoas, também vai criar problemas para muitas delas devido ao baixo contraste com transparência e movimento que não podem ser controlados.

Isso pode ser corrigido com duas consultas de mídia CSS: prefers-reduced-motion e prefers-reduced-transparency. Na consulta de mídia de movimento reduzido, é possível aplicar a animação infinita somente se o usuário tiver "sem preferência" para movimento reduzido, sinalizando para o código que não há problema em que esse usuário tenha movimento.

Além disso, com a consulta de mídia de transparência reduzida, é possível diminuir a opacidade para que a cor da sobreposição seja quase 100%. Agora a mensagem pode ser lida com facilidade sem distrações de movimento ou contraste problemático.

Ao juntar tudo isso, você pode implantar uma aparência de interface criativa e garantir que o público-alvo possa ler e entender a mensagem.

.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 aditivas e subtrativas sobre as preferências do usuário

O exemplo anterior não verificava essas preferências do usuário para a preferência reduzida, em vez disso, verificava a ausência de preferência.

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

Desenvolvedores e designers costumam "regredir" a experiência do usuário com base nessas preferências, em uma mentalidade subtrativa. Isso aparece nas consultas de mídia como uma verificação de "redução", em que algo da interface é removido. O exemplo mostra uma mentalidade aditiva, em que o movimento e a transparência são adicionados se o usuário aceitar.

Essa abordagem ajuda você a pensar em uma experiência de referência saudável que seja robusta por si só. Em seguida, se o usuário concordar, adicione à experiência.

Devtools

O Chrome DevTools pode emular essa preferência para reduzir a transparência (e mais) na guia Rendering. No vídeo a seguir, confira como alternar as consultas de mídia "prefers-color-scheme" e "prefers-reduced-transparency" para mostrar as variantes de transparência reduzida, transparente, clara e escura do cartão de vidro fosco.