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ête média prefers-reduced-transparency de CSS Media Query 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.

Grâce à cette nouvelle requête mé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 média s'intègre bien aux autres requêtes média de préférence, ce qui permet 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 signifie souvent que des éléments d'opacité sont présents) avec les boîtes de dialogue modales, les notifications et les popovers. Dans ce cas, l'amélioration de l'opacité permet de respecter les préférences de l'utilisateur tout en permettant à une légère quantité de couleur de s'afficher 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

Le verre dépoli est un autre style courant de superposition d'image. Dans l'exemple suivant, l'image derrière la légende est un 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 page d'accueil comporte 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 beaucoup, 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 n'a pas de préférence pour le mouvement réduit, ce qui indique au code que l'utilisateur peut avoir 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 %. Désormais, le message peut être lu facilement sans distraction du mouvement ni contraste problématique.

En réunissant tous ces éléments, vous pouvez déployer un look d'UI de création 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érifie pas les préférences réduites dans ces préférences utilisateur, mais ne vérifie aucune préférence.

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

Les développeurs et les concepteurs "reposent" souvent 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 robuste 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.