forced-colors

Syntaxe

La caractéristique média forced-colors indique si le navigateur est actuellement en mode couleurs forcées ou non.

Valeurs

none

Le mode couleurs forcées n'est pas actif ; les couleurs de la page ne sont pas limitées à une palette restreinte.

active

Indique que le mode couleurs forcées est actif. Le navigateur fournit la palette de couleurs aux auteur·ice·s via les mots-clés de couleurs système CSS et, si nécessaire, déclenche la valeur appropriée de prefers-color-scheme afin que les auteur·ice·s puissent adapter la page. Le navigateur choisit la valeur de prefers-color-scheme en fonction de la clarté de la couleur système Canvas (voir la spécification de color adjust ^(angl.) pour plus de détails).

Notes d'utilisation

Propriétés affectées par le mode couleurs forcées

En mode couleurs forcées, les valeurs des propriétés suivantes sont traitées comme si aucune valeur définie par l'auteur·ice n'était spécifiée. Autrement dit, ce sont les valeurs définies par le navigateur qui sont utilisées. Ces valeurs imposées par le navigateur n'affectent pas la cascade des styles : elles sont appliquées au moment de l'affichage.

Ces valeurs imposées sont choisies parmi l'ensemble des couleurs système, ce qui garantit un contraste cohérent pour les éléments d'interface courants lorsque les utilisateur·ice·s ont activé les couleurs forcées.

• color
• background-color
• text-decoration-color
• text-emphasis-color
• border-color
• outline-color
• column-rule-color
• -webkit-tap-highlight-color
• L'attribut SVG fill
• L'attribut SVG stroke

De plus, les propriétés suivantes ont un comportement particulier en mode couleurs forcées :

• box-shadow est forcée à « none »
• text-shadow est forcée à « none »
• background-image est forcée à « none » pour les valeurs qui ne sont pas basées sur une URL
• color-scheme est forcée à « light dark »
• scrollbar-color est forcée à « auto »

Les couleurs système imposées pour les propriétés ci-dessus dépendent du contexte de l'élément. Par exemple, la propriété color sur un bouton sera forcée à ButtonText. Sur un texte normal, elle sera forcée à CanvasText. Voir la liste des couleurs système pour plus de détails sur les cas d'utilisation selon le contexte d'interface.

En plus de ces ajustements, les navigateurs aident à garantir la lisibilité du texte en dessinant des « plaques de fond » derrière le texte. Cela est particulièrement important pour préserver le contraste lorsque le texte est placé sur des images.

Il existe certains cas où l'agent utilisateur ne force pas les valeurs des propriétés ci-dessus :

Lorsque forced-color-adjust est défini à none sur un élément, aucune des valeurs de couleurs forcées ne s'applique et les styles auteur·ice sont utilisés normalement. De plus, la plaque de fond du texte est désactivée.

Lorsque forced-color-adjust est défini à preserve-parent-color sur un élément, et que la valeur de color sur l'élément n'est pas héritée de son parent, alors l'élément se comporte comme si preserve-parent-color était défini à none.

Lorsqu'une couleur système est spécifiée, elle sera utilisée à la place de la valeur qui aurait été forcée.

Vous pouvez également utiliser les couleurs système avec toute propriété autre que celles listées ci-dessus, afin de garantir que le reste de la page s'intègre à la palette de couleurs restreinte disponible en mode couleurs forcées.

Problèmes d'accessibilité

En général, les auteur·ice·s web ne doivent pas utiliser la caractéristique média forced-colors pour créer un design séparé pour les utilisateur·ice·s ayant activé cette fonctionnalité. Son usage est plutôt destiné à apporter de petits ajustements pour améliorer l'utilisabilité ou la lisibilité lorsque l'application par défaut des couleurs forcées ne fonctionne pas bien pour une partie donnée d'une page.

Le contraste élevé fourni par la palette réduite du mode couleurs forcées et les plaques de fond du texte est souvent essentiel pour que certain·e·s utilisateur·ice·s puissent lire ou utiliser un site web. Les ajustements qui affectent le contenu doivent donc être choisis avec soin et ciblés sur le contenu qui, autrement, ne serait pas lisible.

Préférences utilisateur

Cette caractéristique média n'est active que si l'utilisateur·ice a activé des préférences de schéma de couleurs dans son système d'exploitation. Un exemple de cette fonctionnalité est le mode contraste élevé de Windows.

Exemples

Cet exemple est un bouton qui obtient normalement son contraste via box-shadow. En mode couleurs forcées, box-shadow est forcé à none, donc l'exemple utilise la caractéristique média forced-colors pour s'assurer qu'il y a une bordure de la couleur appropriée (ButtonText dans ce cas).

HTML

<button class="button">Appuyez sur moi&nbsp;!</button>

CSS

.button {
  border: 0;
  padding: 10px;
  box-shadow:
    -2px -2px 5px gray,
    2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /* Use a border instead, since box-shadow is forced to 'none' in forced-colors mode */
    border: 2px ButtonText solid;
  }
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• @media
• Adapter l'affichage pour le contraste élevé de Windows avec les standards des couleurs forcées ^(angl.)
• forced-color-adjust