prefers-reduced-transparency

Syntaxe

no-preference

Indique qu'aucune préférence n'a été exprimée sur l'appareil. Cette valeur-clé est évaluée à faux dans un contexte booléen.

reduce

Indique qu'un·e utilisateur·ice a activé le réglage sur son appareil pour minimiser la quantité d'effets de calques transparents ou translucides.

Préférences utilisateurs

Différents systèmes d'exploitation proposent une préférence pour la réduction de la transparence, et les agents utilisateur·ice·s s'appuient généralement sur ces réglages système. Sur les plateformes qui ne proposent pas de réglage spécifique, les navigateurs peuvent également se baser sur des signaux moins explicites.

• Sous Windows 10/11 : Paramètres > Personnalisation > Couleurs > Effets de transparence.
• Sous macOS : Préférences Système > Accessibilité > Affichage > Réduire la transparence.
• Sous iOS : Réglages > Accessibilité > Affichage et taille du texte > Réduire la transparence.

Exemples

Cet exemple affiche une boîte translucide par défaut. Si le réglage pour réduire la transparence est activé dans les préférences d'accessibilité de votre appareil, la boîte devient plus opaque.

HTML

<div class="translucent">translucent box</div>

CSS

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• Requête média CSS prefers-reduced-motion
• Utiliser les requêtes média