Utilisation de la couleur

Ce que le critère demande

Chaque fois que la signification d’un élément d’interface dépend de sa couleur — un message d’erreur en rouge, un point vert « disponible », un lien bleu dans le corps d’un texte, une ligne colorée sur un graphique — cette signification doit également être transmise par autre chose que la couleur seule. Le critère n’interdit pas la couleur, il interdit le recours exclusif à la couleur. Environ 1 homme sur 12 et 1 femme sur 200 présentent une forme de déficience de la vision des couleurs ; à cela s’ajoutent les impressions en niveaux de gris, les écrans peu lumineux et les environnements très éclairés qui effacent régulièrement les distinctions de couleur.

Comment le respecter

• Souligner les liens dans les paragraphes de texte. Une couleur différente seule échoue — c’est le cas d’échec canonique du critère 1.4.1.
• Associer chaque couleur de statut à une étiquette ou une icône : rouge avec le texte « Erreur », vert avec une coche, jaune avec un triangle d’avertissement.
• Signaler les champs de formulaire obligatoires à la fois par une couleur (astérisque en rouge) et par un indicateur textuel (« obligatoire »).
• Pour les graphiques, utiliser des styles de lignes distincts (continu, tirets, pointillés) ou des symboles aux points de données, et non uniquement la couleur.
• Associer les indicateurs de statut « disponible / occupé / absent » à la couleur et à la forme de l’icône (cercle plein, cercle vide, tiret).
• Pour la validation de formulaire, l’état invalide doit comporter un message d’erreur en plus d’une bordure rouge.

Échecs courants

• Liens dans le corps du texte distingués uniquement par un bleu légèrement différent sans soulignement. Les utilisateurs ayant une déficience rouge-vert ne perçoivent aucune distinction.
• Astérisques de champs obligatoires affichés en rouge sans aria-required ni étiquette « obligatoire ».
• Graphiques avec cinq séries différenciées uniquement par la couleur — imprimez le graphique en niveaux de gris et les lignes deviennent indiscernables.
• États d’erreur stylisés uniquement par une bordure rouge, sans texte de message d’erreur.
• Indicateurs « en ligne / hors ligne » changeant uniquement de couleur, sans changement de forme ou d’étiquette.
• Graphiques en secteurs avec des tranches de luminance similaire étiquetées uniquement dans la légende par couleur.

Pourquoi c’est important

Il s’agit de l’échec 1.4.x le plus cité et l’un des plus faciles à corriger lors de la conception — ajouter un soulignement, une icône, une étiquette. La correction après coup est plus difficile, car la palette de marque est souvent construite autour d’une signalisation par couleur seule. Les règles Qualibooth / axe / Lighthouse ne détectent pas toujours cela automatiquement, de sorte que cela remonte lors de la revue manuelle.