prefers-contrast
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mai 2022.
La caractéristique média CSS prefers-contrast permet de détecter si un·e utilisateur·ice a demandé à ce que le contenu web soit présenté avec un contraste plus faible ou plus élevé.
Syntaxe
no-preference-
Indique qu'aucune préférence n'a été exprimée par l'utilisateur·ice dans le système. Cette valeur-clé est évaluée à faux dans un contexte booléen.
more-
Indique que l'utilisateur·ice a signalé au système qu'il·elle préfère une interface avec un contraste plus élevé.
less-
Indique que l'utilisateur·ice a signalé au système qu'il·elle préfère une interface avec un contraste plus faible.
custom-
Indique que l'utilisateur·ice a signalé au système l'utilisation d'un jeu de couleurs spécifique, et que le contraste impliqué par ces couleurs ne correspond ni à « more » ni à « less ». Cette valeur correspond à la palette de couleurs définie par les utilisateur·ice·s de
forced-colors: active.
Préférences utilisateur
Les différents systèmes d'exploitation prennent en charge des réglages de contrastes et les agents utilisateurs peuvent utiliser les valeurs de ces réglages pour déterminer la valeur de cette caractéristique.
Exemples
Par défaut, cet exemple présente un contraste trop faible pour la lisibilité.
HTML
<div class="contrast">Une boîte avec un contraste faible.</div>
CSS
.contrast {
width: 100px;
height: 100px;
outline: 2px dashed black;
}
@media (prefers-contrast: more) {
.contrast {
outline: 2px solid black;
}
}
Résultat
Spécifications
| Specification |
|---|
| Media Queries Level 5 # prefers-contrast |
Compatibilité des navigateurs
Chargement…
Voir aussi
- La caractéristique média
forced-colors