Concepts

forced-colors

Voir aussi : High Contrast Mode, HCM, Windows High Contrast, Forced Colors Mode

Requête média CSS détectant les modes de contraste élevé configurés par l'utilisateur — principalement le mode Contraste élevé de Windows. Les auteurs l'utilisent pour adapter le rendu lorsque les préférences système remplacent les couleurs du site.

forced-colors est la requête média CSS qui détecte quand l’utilisateur a activé un mode de couleurs forcées — typiquement le mode Contraste élevé de Windows (HCM), qui remplace les choix de couleurs du site par une petite palette système choisie par l’utilisateur (blanc sur fond noir, noir sur fond blanc, jaune sur fond noir, ou une palette personnalisée).

Le mode de couleurs forcées est très utilisé par les personnes malvoyantes, en particulier celles souffrant de photosensibilité ou ayant besoin d’un contraste extrême. Il est également utilisé par des utilisateurs sans handicap déclaré qui préfèrent simplement le contraste élevé.

Ce que fait réellement le mode HCM

Quand le mode Contraste élevé de Windows est activé, le système d’exploitation remplace les couleurs du site par un petit ensemble de couleurs système :

  • Canvas — l’arrière-plan de la page.
  • CanvasText — la couleur du texte par défaut.
  • LinkText — la couleur des liens.
  • VisitedText — la couleur des liens visités.
  • ButtonText — le texte des boutons.
  • ButtonFace — l’arrière-plan des boutons.
  • HighlightText / Highlight — les couleurs du texte sélectionné.
  • GrayText — le texte désactivé.
  • Mark / MarkText — le texte mis en évidence.

Les navigateurs en mode couleurs forcées remplacent la plupart des couleurs définies par l’auteur par ces couleurs système. Ils suppriment également les images d’arrière-plan et réinitialisent plusieurs propriétés visuelles aux valeurs système par défaut.

C’est voulu : l’utilisateur a choisi une palette de contraste qui lui convient, et il ne veut pas que le site remplace ce choix. Le rôle du site est de coopérer, non de résister.

La requête média CSS

L’auteur détecte le mode couleurs forcées avec :

@media (forced-colors: active) {
  /* l'utilisateur est en mode HCM ou équivalent ; adapter le CSS ici */
}

La valeur associée prefers-color-scheme est indépendante — un utilisateur peut être en mode couleurs forcées sombres (palette système blanc sur fond noir) et sa requête prefers-color-scheme peut quand même retourner light parce qu’il n’a pas explicitement choisi le « mode sombre ».

Ce qui échoue en production

  • Les images d’arrière-plan deviennent invisibles. Le mode couleurs forcées supprime les images d’arrière-plan. Si le chevron « cliquer pour développer » est un SVG en image d’arrière-plan sans texte de secours, l’utilisateur ne voit rien. Solution : utiliser <svg> ou des icônes en ligne avec currentColor pour qu’elles reprennent CanvasText ; ou fournir un texte de remplacement.
  • Les bordures disparaissent. Certaines bordures sont supprimées ou remplacées par des bordures de couleur CanvasText. La hiérarchie visuelle qui reposait sur des couleurs de bordure subtiles disparaît. Il faut auditer les bordures des composants en mode HCM.
  • Les indicateurs de focus cessent de fonctionner. Les anneaux de focus personnalisés dessinés avec box-shadow perdent leur couleur. Il faut utiliser outline (qui est préservé) ou détecter le mode couleurs forcées et fournir une alternative utilisant les couleurs système.
  • Les éléments visibles uniquement au survol disparaissent définitivement. Les composants de type infobulle qui reposent sur des états de survol en image d’arrière-plan échouent.
  • forced-color-adjust: none. Certains designers utilisent cette propriété CSS pour désactiver le traitement des couleurs forcées sur un élément spécifique. C’est presque toujours le mauvais choix — cela signifie que l’utilisateur perd les couleurs qu’il a explicitement demandées. À utiliser avec parcimonie, uniquement pour les éléments vraiment décoratifs dont l’identité de conception est essentielle (logos, icônes propres à la marque), et jamais sur du texte ou des contrôles interactifs.

Comment tester

Sous Windows : Paramètres → Accessibilité → Thèmes de contraste → choisir une des palettes intégrées (Aquatique, Désert, Crépuscule, Ciel nocturne) et recharger la page. Chrome et Edge récupèrent le réglage système ; Firefox utilise son propre bouton de couleurs forcées dans les paramètres du navigateur.

La plupart des problèmes sont détectés à la première inspection : icônes manquantes, bordures invisibles, anneaux de focus cassés. Il faut les corriger avec un CSS utilisant les couleurs système à l’intérieur de la requête média forced-colors: active.