CSS preferences-reduced-transparency

Optimisez et ajustez votre interface utilisateur pour les utilisateurs qui préfèrent une interface opaque.

Adam Argyle

À partir de Chrome 118, la nouvelle fonctionnalité de requêtes multimédias prefers-reduced-transparency de CSS Media Queries 5 est disponible. Les interfaces non opaques peuvent provoquer des maux de tête ou être difficiles à percevoir pour différents types de déficiences visuelles. C'est pourquoi Windows, macOS et iOS disposent de préférences système qui peuvent réduire ou supprimer la transparence de l'interface utilisateur.

Avec cette nouvelle requête multimédia dans le navigateur, le CSS peut adapter l'interface pour les utilisateurs qui souhaitent réduire la transparence:

.example {
  --opacity: .5;

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

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

Dans l'exemple de code précédent, une variable CSS contient une valeur d'opacité à 50%, qui est ensuite utilisée avec HSL pour créer un arrière-plan bleu semi-transparent. La requête multimédia imbriquée vérifie si l'utilisateur préfère une transparence réduite. Si c'est le cas, elle ajuste la variable d'opacité sur 95%, une valeur d'opacité presque opaque.

Cette requête multimédia s'intègre bien aux autres requêtes multimédias de préférences, qui permettent aux concepteurs et aux développeurs d'être créatifs tout en s'adaptant aux utilisateurs. Vous pouvez considérer ces requêtes multimédias comme une chaise dans une voiture qui ajuste automatiquement la position en fonction de l'utilisateur. Lorsqu'un utilisateur accède à votre site Web, il s'ajuste automatiquement à lui sans qu'il ait à le demander. C'est super.

Cas d'utilisation pour réduire la transparence

Les sections suivantes seront consacrées à montrer les moments et les opportunités de réduire la transparence de manière pertinente.

Sous-titres semi-transparents sur les images

Il est assez courant de superposer une miniature d'image ou de vidéo avec une légende ou un résumé semi-transparent. L'exemple suivant illustre une façon de gérer une préférence pour une transparence réduite. La superposition est entièrement supprimée, et le même contenu de légende s'affiche sous l'image au lieu d'être superposé.

Fenêtres modales, notifications et pop-ups transparents

Les éléments d'interface utilisateur superposent également le contenu (ce qui implique souvent la présence d'éléments d'opacité) avec les boîtes de dialogue modales, les notifications et les pop-ups. Dans ce cas, augmenter l'opacité peut respecter les préférences de l'utilisateur tout en laissant apparaître une quantité subtile de couleur derrière la superposition.

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

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

Verre dépoli adaptatif

Un autre style de superposition d'image populaire est le verre dépoli. Dans l'exemple suivant, l'image derrière la légende est le reflet de l'image du produit. Cela présente plusieurs avantages: l'image n'est pas recadrée et la préférence pour les tons clairs ou sombres peut ressortir un peu plus dans le résultat 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%;
  }
}

En-tête principal

Un élément courant de la page d'accueil est un message en gras superposé à une vidéo en boucle ou à une image animée. L'exemple suivant comporte une superposition de dégradé semi-transparent coloré et une image d'arrière-plan animée à l'infini. Bien que cela puisse attirer de nombreux regards, cela créera également des problèmes pour de nombreuses personnes en raison du faible contraste avec la transparence et du mouvement qui ne peut pas être contrôlé.

Pour résoudre ce problème, utilisez deux requêtes multimédias CSS : prefers-reduced-motion et prefers-reduced-transparency. Dans la requête multimédia à mouvement réduit, vous ne pouvez appliquer l'animation infinie que si l'utilisateur a défini "no-preference" pour le mouvement réduit, ce qui indique au code qu'il est acceptable que cet utilisateur ait du mouvement.

De plus, avec la requête multimédia à transparence réduite, vous pouvez réduire l'opacité afin que la couleur de superposition soit presque à 100%. Le message peut désormais être lu facilement, sans distraction liée au mouvement ni contraste problématique.

En réunissant tous ces éléments, vous pouvez déployer un look d'interface utilisateur créatif tout en vous assurant que l'audience cible peut le lire et comprendre le 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%)
    );
  }
}

Perspectives additive et soustractive sur les préférences utilisateur

L'exemple précédent ne vérifiait pas ces préférences utilisateur pour leur préférence réduite, mais vérifiait l'absence de préférence.

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

Les développeurs et les concepteurs "retombent" souvent sur l'expérience utilisateur en fonction de ces préférences, dans une mentalité soustractive. Dans les requêtes multimédias, cela se traduit par une vérification de "réduire", à quel point un élément de l'UI est supprimé. L'exemple montre une mentalité additive, où le mouvement et la transparence sont ajoutés si l'utilisateur est d'accord.

Cette approche vous aide à réfléchir à une expérience de référence saine qui est solide en soi. Ensuite, si l'utilisateur est d'accord, enrichissez l'expérience.

Outils de développement

Les outils pour les développeurs Chrome peuvent émuler cette préférence pour une transparence réduite (et plus encore) dans l'onglet Rendering (Affichage). Dans la vidéo suivante, découvrez comment activer et désactiver les requêtes multimédias prefers-color-scheme et prefers-reduced-transparency pour afficher les variantes claire, sombre, transparente et à transparence réduite de la carte en verre dépoli.