Couleur

Aperçu : Couleur

La couleur améliore la conception du contenu Web en rehaussant son attrait esthétique, sa convivialité et son accessibilité. Aussi utile soit-elle, la couleur ne doit pas être la seule façon de transmettre l’information. La couleur transmet l’information lorsqu’elle met l’accent sur le texte, fait la distinction entre les éléments visuels et distingue les éléments interactifs des éléments statiques. Les personnes daltoniennes, malvoyantes ou aveugles doivent se voir offrir un équivalent textuel de l’information transmise par couleur. Il en va de même pour ceux qui utilisent uniquement du texte, des couleurs limitées ou des affichages monochromes.

Pour répondre aux besoins de tous, assurez-vous que la couleur n’est pas la seule façon de transmettre l’information. Assurez-vous également que les utilisateurs peuvent personnaliser la conception de vos CSS en ce qui a trait aux couleurs afin qu’ils puissent compenser celles dont les contrastes sont extrêmement vifs ou faibles au moyen du système d’exploitation ou du navigateur en appliquant une feuille de style personnalisée.

Information transmise au moyen de couleurs

Les renseignements transmis par des couleurs doivent avoir un équivalent textuel exact.

  Bon exemple : Erreur de champ du formulaire surlignée avec texte explicatif

Dans cet exemple, la validation met en évidence une erreur avec un fond coloré et un texte explicatif « Erreur 1 : Ce champ est obligatoire. »

L'exemple commence

L'exemple finit

L'exemple commence

Titre (obligatoire) Dr. Esq. Mr. Ms.

Prénom (obligatoire)

Nom de famille (obligatoire)

Adresse courriel (votrenom@domain.com)

L'exemple finit

---

Cet exemple est tiré du Guide de la BOEW

  Mauvais exemple : Seule la couleur communique l’information

Dans le mauvais exemple ci-dessous, la légende utilise uniquement la couleur pour différencier les colonnes de l’histogramme.

L'exemple commence

L'exemple finit

  Bon exemple : Information communiquée par la couleur et le motif

Dans le bon exemple ci-dessous, la légende utilise la couleur et les motifs pour différencier les colonnes de l’histogramme. Le texte de remplacement décrit adéquatement les données véhiculées dans le diagramme.

L'exemple commence

Texte de remplacement : Histogramme illustrant les ventes de console de jeu au cours du premier trimestre de 2021 : en janvier 84 Nintendo, 66 PlayStation; en février 48 Nintendo, 22 PlayStation; en mars 25 Nintendo, 57 PlayStation

L'exemple finit

  Mauvais exemple : Information codée par couleur non communiquée par un texte de remplacement

Dans le mauvais exemple ci-dessous, la légende utilise la couleur et les motifs pour différencier les colonnes de l’histogramme. Toutefois, il n’existe pas de texte de remplacement pour les utilisateurs de lecteurs d’écran.

L'exemple commence

L'exemple finit

HTML

Début du code

<img src="images/ventes-a-mars-2021.png" alt="">

Fin du code

Distinguer les liens et les contrôles du texte

Les utilisateurs malvoyants et daltoniens ont besoin de distinguer les liens du texte voisin. La façon la plus simple de le faire consiste à souligner le lien et à doter une commande d’une bordure.

Lorsqu’un lien est identifié uniquement par une couleur (ce qui signifie que le soulignement a été supprimé), deux conditions doivent être remplies:

• Contraste de 3:1 entre le corps du texte et le texte du lien.
• Un « indice visuel » (pas seulement un changement de couleur) qui apparaît lorsqu’on survole avec la souris ou qu’on le sélectionne avec le clavier. Pour ce faire, le plus souvent, le lien apparaît souligné lorsqu’on le survole ou qu’on le sélectionne, mais vous pouvez aussi ajouter une couleur d’arrière-plan, une bordure ou un contour.

Notez que cela pose problème uniquement lorsque le lien et le corps du texte apparaissent ensemble. Cela ne s’applique pas aux liens dans l’en-tête ou superposés dans un menu, où ils sont interprétés comme des liens par leur position sur la page.

Ces exigences s’ajoutent à l’exigence minimale de contraste de 4,5:1 entre le texte original et le fond. Il peut être difficile de trouver une couleur de lien qui présente un contraste de 3:1 avec le corps noir et un contraste de 4,5:1 avec un fond blanc. La technique G183 des WCAG énumère les valeurs de couleur qui satisfont aux critères de l’exemple 1.

  Bon exemple : Contraste élevé avec un effet visuel en cas de survol ou de sélection

Cet exemple évite un soulignement statique en:

• Utilisant le bleu (#3333FF) comme couleur de lien, qui offre
  • un contraste de 3,1:1 par rapport au texte noir voisin (dépasse tout juste le minimum de 3:1);
  • un contraste de 6,9:1 avec le blanc de fond (bien supérieur au minimum 4,5:1).
• En tant qu’indice visuel supplémentaire sur le survol ou à la sélection, le texte du lien est réglé avec un contraste de blanc très élevé (21:1) par rapport au fond noir.

L'exemple commence

Le Bureau de l’accessibilité des TI (BATI) demeure un fournisseur de technologies d’adaptation et un défenseur de l’inclusion des personnes handicapées en milieu de travail.

L'exemple finit

Résultats de l’application Colour Contrast Analyser

Après sélection à l’aide du clavier ou survol par le pointeur de la souris

Personnalisation de la couleur et du contraste de l’interface

Certains utilisateurs sensibles à la luminosité ou malvoyants s’attendent à pouvoir modifier les couleurs. Dans la mesure du possible, utilisez des fonctions et des contrôles natifs de HTML. Cela permet aux utilisateurs de personnaliser la couleur et le contraste de l’interface pour les composants visibles de l’interface utilisateur.

.button-ex {
   background-color: #0065CB; 
   border: none;
   color: white;
   padding: 10px 25px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 36px;
   margin: 4px 2px;
   cursor: pointer;
}

  Mauvais exemple : Bouton utilisant une image de texte

Lorsque les boutons utilisent une image de texte, les feuilles de style utilisateur ne peuvent pas personnaliser les propriétés du texte, notamment les couleurs d’avant et d’arrière-plan. En grossissant le texte, il est pixélisé et devient flou dans les images, ce qui diminue la lisibilité.

L'exemple commence

L'exemple finit

HTML

Début du code

<button style="border: none; background: none;">
   <img src="images/image17-fr.jpg" alt="Suivant" class="img-responsive"/>
</button>

Fin du code

Ressources WCAG connexes