Assurer un contraste suffisant entre les couleurs de premier plan et de fond

Cible : tout le monde, en particulier les utilisateurs sur mobile et tablette, les personnes malvoyantes, éprouvant des difficultés de lecture ou avec un déficit d’attention et les seniors.
Quand : dès la phase de conception et lors du développement.

Description :
Le niveau de contraste entre le premier plan et l’arrière-plan, même pour des éléments graphiques non-textuels porteurs de sens, doit être suffisamment élevé. Un niveau de contraste insuffisant sera préjudiciable pour les utilisateurs ayant des difficultés visuelles ainsi que pour les utilisateurs de mobiles et tablettes se trouvant dans un environnement très lumineux.

Exemple non valide :
Le texte « film | 20h40… » ne présente pas un contraste suffisant. Celui-ci ne sera pas lisible par tous les utilisateurs.

capture d’écran présentant du texte dont le contraste n’est pas suffisant

Les images suivantes sont porteuses d’information pour les utilisateurs. Elles doivent fournir un contraste de couleur de 3:1 minimum.

capture d’écran présentant des icônes et des graphiques dont le contraste n'est suffisant

À vérifier :

  • S'assurer que le contraste entre la couleur du fond et celle du texte et également pour du texte sous forme d’image porteur d’information, est :
    • De 4.5:1 minimum pour une taille inférieure à 24px CSS et 19px CSS en gras
    • De 3:1 minimum suffit pour une taille est supérieure à 24px CSS et 19px CSS en gras
  • Cas particulier des liens non soulignés :
    • Ces liens doivent avoir un rapport de contraste de 3:1 avec le texte qui les entoure
    • Ces liens doivent avoir un autre moyen que la couleur permettant de les distinguer au focus clavier ou au survol souris
  • S'assurer que Les objets graphiques porteurs d'information non-textuelle, les composants d’interface utilisateur et les états de l'interface (focus, hover...) ont un contraste de 3:1. Sont concernés, entre autres : les boutons, les boutons radios, les cases à cocher, les listes de sélection, les menus et volets de navigation, les barres d’outils, les onglets, les carrousels, les curseurs, les barres de progression, les bulles d’aides, les barres de progression, les graphiques…

On n’est pas tenus d’appliquer ce critère :

  • Si le composant graphique ne peut pas être représenté autrement : drapeau, logotype, photos réelles, captures d'écran, diagrammes d'informations médicales utilisant les couleurs de la biologie, dégradés représentant une mesure, cartes de chaleur…)
  • Si un texte, comme un label, un tableau de donnée…, apporte la même information que l’icône ou le graphique.
  • Si le manque de contraste de l’image n'empêche pas la compréhension du contenu ou d'identifier la fonction
  • Si un composant d'interface est inactif et donc peut être ignoré par l’utilisateur sans réelle perte d'information.
    • Attention  : pour des applications principalement utilisées en web mobile ou en mobilité, le niveau de contraste des principaux éléments doit être de 7:1 afin d’assurer une bonne lisibilité pour tous

Objectif utilisateur :

Faciliter la lecture à tous les utilisateurs, déficients visuels ou personnes dans un environnement lumineux défavorable (en mobilité).

Outil :
L’application Colour Contrast Analyser permet de mesurer rapidement des niveaux de contraste de couleurs (gratuit pour Mac et Windows). Comment utiliser Colour Contrast Analyser, quelques explications.

Référence WCAG :