Couleur

La règle d’accessibilité est de veiller à ce que vous n’utilisez pas uniquement la couleur pour transmettre une information. Cette phrase est un peu nébuleuse pour certaines personnes. Qu’est-ce que cela signifie de transmettre un message uniquement avec la couleur ? Jetons un œil à cette carte du métro de Londres :

Une personne qui peut voir les couleurs n’a aucune difficulté à distinguer les lignes rouge, bleue foncée, bleue claire, etc. Une personne qui ne peut pas voir la couleur, parce qu’elle est daltonienne ou avec une basse vision, ne sera probablement pas capable de distinguer les différentes lignes de métro aussi facilement. Quelqu’un qui est aveugle ne pourra pas du tout les voir. Regardons à présent en noir et blanc cette image :

Comment pourriez-vous savoir quelle ligne prendre pour vous rendre à Waterloo ? Avant d’aller plus loin, vous devez savoir que les personnes qui sont daltoniennes peuvent voir des couleurs (à l’exception de quelques rares cas), de sorte que le dessin en niveaux de gris ci-dessus n’est pas représentatif du daltonisme. Il s’agit simplement d’un exemple d’une image dans laquelle la couleur est utilisée pour transmettre une information. Quand les couleurs sont supprimées, les différentes lignes de métro sont presque impossibles à distinguer.

Examinons ci-après un exemple de comment contourner ce problème potentiel. Le CD WebAIM de formation utilise des onglets de couleur pour désigner les catégories de liens dans la barre de navigation supérieure.

Si une couleur plus claire avait été utilisée pour l’arrière-plan des onglets de ressources, le texte aurait été difficile à lire.

La méthode utilisée sur le site WebAIM de formation afin d’éviter la confusion a été de mettre les titres des catégories entre parenthèse au-dessus des onglets de même catégorie. Les crochets ordonnent les onglets en fonction des ateliers et des ressources. Même quand il n’y a pas de couleur du tout sur cette page, l’information est toujours accessible.

Testez vos pages Web pour vous assurer qu’aucune information n’est perdue lorsque vous supprimez les couleurs. Vous pouvez le faire en imprimant la page avec une imprimante noir et blanc (assurez-vous que votre préférences d’impression sont définies pour imprimer les couleurs de fond). Vous pouvez aussi le faire comme nous l’avons fait sur cette page, en prenant une capture d’écran de la page, puis en supprimant toutes les couleurs dans un programme de graphisme tels que Corel PhotoPaint ou Adobe PhotoShop. Pour cela, dans Windows, ouvrez la page que vous souhaitez vérifier, puis cliquez sur le bouton d’impression écran (souvent étiqueté Prnt Scrn). Ensuite, ouvrez un nouveau fichier dans votre programme graphique et utilisez la commande Coller (Ctrl + V). Enfin, changez l’image en une image en niveaux de gris.

Contraste

Regardez de nouveau la version en noir et blanc de la page du site de formation.

Outre le fait qu’il ne s’agisse que d’une copie d’écran de la page dans laquelle le texte est beaucoup plus petit et un peu plus flou que sur la page d’origine, vous remarquerez que tout le texte est facilement distinguable des couleurs de fond autour de lui. Là où il y a un fond clair, il y a un texte sombre. Là où il y a un fond sombre, il y a un texte clair. Les personnes avec une basse vision n’auront pas de la difficulté à faire la différence entre les niveaux de contraste du texte et des arrière-plans.

Si une couleur plus claire avait été choisie pour l’arrière-plan des onglets des ressources, le texte aurait été plus difficile à lire.

Faites en sorte quand vous choisissez les couleurs d’arrière-plan qu’elles ne réduisent pas les niveaux de contraste jusqu’à rendre le texte illisible.