Qu'est-ce que le mode Contraste élevé ?

What is High Contrast Mode?

Le système d'exploitation Windows dispose d'un mode de contraste élevé natif qui remplace les couleurs par des valeurs par défaut ou définies par l'utilisateur. Il est populaire auprès des utilisateurs malvoyants ou photosensibles.

Les thèmes utilisent des arrière-plans noirs ou blancs et codent par couleur différents types d'éléments. Il convient de souligner tout de suite que les styles CSS qui utilisent la propriété **background** ne s'affichent pas dans ce mode. Nous apprendrons comment contourner ce problème sous peu.

Comment activer le mode Contraste élevé

Le mode Contraste élevé est intégré à Windows en tant que paramètre d'accessibilité natif. Il peut être activé de différentes manières dans Windows 10 et être personnalisé :

  • Left Alt gauche + Left Shift + Print Screen
  • À partir de l'écran de connexion : Facilité d'accès > Contraste élevé

Utilisez le mode Contraste élevé avec Edge ou Internet Explorer (ou d'autres navigateurs Microsoft qui sont publiés). Cela fonctionne avec Firefox, mais les effets ne sont pas toujours cohérents ou utilisables. Le contraste élevé ne fonctionne pas avec Chrome.

Consultez ce document de support Windows pour plus d'instructions et de conseils pour les autres versions de Windows .

Ce qu'il faut chercher

Tester avec un contraste élevé est un autre moyen de détecter les problèmes de couleur, car il vous permet de vérifier facilement :

  • Contenu, icônes ou autres indicateurs qui s'appuient uniquement sur la couleur pour transmettre des informations
  • Les éléments qui reposent uniquement sur les couleurs d'arrière-plan pour se distinguer des autres éléments, tels que les boutons ou les modaux
  • Styles de focus du clavier ou états d'erreur qui reposent uniquement sur la couleur ; courant lorsque ces états reposent uniquement sur un changement de couleur ou sur l'affichage et le masquage d'une bordure
  • Images transparentes ou SVG qui ne sont pas visibles sur des arrière-plans noirs ou blancs

Résolution du contraste élevé

Il existe généralement quelques améliorations simples qui peuvent être apportées pour mieux prendre en charge les utilisateurs du mode Contraste élevé.

  • Donnez aux éléments qui reposent sur une couleur d'arrière-plan une bordure transparente. Cela peut être fait avec une propriété CSS normale ( border: 1px solid transparent; ) et ne sera visible qu'en mode Contraste élevé.
  • Utilisez le outline de focus du navigateur par défaut pour afficher l'état de focus du clavier, au lieu de vous fier à une border .
  • Si une bordure CSS ne résout pas le problème, ou si l'affichage d'une couleur ou d'un style de mise au point spécifique en mode Contraste élevé est nécessaire, le préfixe de fournisseur -ms-high-contrast peut être utilisé pour appliquer des styles uniquement lorsqu'une personne utilise Contraste élevé. N'oubliez pas que les utilisateurs utilisent le contraste élevé pour réduire le nombre de couleurs et personnaliser l'interface. Utilisez donc les styles spécifiques au contraste élevé avec parcimonie. En savoir plus sur les limitations de -ms-high-contrast .
  • Pour les graphiques transparents, donnez aux fichiers graphiques clairs une bordure sombre et aux graphiques sombres une bordure claire afin qu'ils puissent être plus facilement distingués des arrière-plans noirs ou blancs.

Critères de réussite WCAG

Cela revient à 1.4.1 Utilisation de la couleur qui stipule :

"La couleur n'est pas utilisée comme le seul moyen visuel de transmettre des informations, d'indiquer une action, de susciter une réponse ou de distinguer un élément visuel."

Ressources:

Retour au blog