Rendre vos graphiques accessibles aux daltoniens

Un graphique peut être techniquement juste et rester incompréhensible. Le coupable habituel : on demande à la couleur de tout porter. Une courbe rouge signifie une chose, une verte une autre, et la légende est la seule clé. Pour les personnes présentant un déficit de la vision des couleurs — et pour quiconque consulte un graphique en pleine lumière, sur un écran médiocre ou en noir et blanc — cela crée une gêne inutile.

La solution n’est pas de renoncer à la couleur, mais de l’employer comme un indice parmi d’autres. Ce guide traduit ce principe en décisions concrètes pour graphiques, tableaux de bord, cartes et infographies.

La règle fondamentale : la couleur ne peut être le seul indice

Le critère de succès WCAG 1.4.1 impose que la couleur ne soit pas le seul moyen visuel employé pour véhiculer une information, indiquer une action, solliciter une réponse ou distinguer un élément visuel. Pour un graphique de données, cela signifie que le lecteur doit pouvoir différencier catégories, séries, statuts ou significations sans identifier une teinte.

Bonnes alternatives :

• des libellés textuels et des valeurs directes ;
• des formes de marqueurs différentes sur les courbes ou les points ;
• des styles de trait pleins, tiretés et pointillés ;
• des motifs, textures ou contours dans les barres et les aires ;
• des icônes claires et des libellés de légende explicites ;
• un tableau de données ou un résumé textuel apportant la même information essentielle.

La meilleure combinaison dépend du type de graphique et du besoin du lecteur : vue d’ensemble rapide ou valeurs exactes.

Construisez le graphique autour de la question posée

Avant de choisir les couleurs, écrivez en une phrase le message clé du graphique. Par exemple : « Les ventes ont progressé dans toutes les régions, avec la plus forte croissance à l’ouest. » Vérifiez ensuite si un lecteur pourrait répondre à cette question en consultant le graphique en niveaux de gris.

Si la réponse est non, ajoutez un indice non chromatique. Ce simple test révèle l’erreur d’accessibilité la plus fréquente : une palette séduisante qui encode l’information uniquement par la teinte.

Préférez les libellés directs à une légende éloignée

Les légendes obligent à faire correspondre une petite pastille à un élément du graphique, parfois de manière répétée. C’est d’autant plus difficile que les couleurs se ressemblent ou que les courbes se croisent. Lorsque la place le permet, étiquetez la série en bout de courbe, placez les valeurs à côté des barres ou annotez directement le point important.

Ainsi, plutôt qu’une courbe bleue, une orange et une verte accompagnées d’une légende en bas, ajoutez le nom de la catégorie près du dernier point de chaque courbe. Gardez le libellé suffisamment proche pour éviter toute confusion avec une autre série. La couleur reste utile, mais c’est le texte qui identifie.

Adaptez les indices redondants au type de graphique

Graphiques en courbes

Combinez style de trait, forme de marqueur et libellés terminaux. Une courbe pleine à cercles, une tiretée à carrés et une pointillée à triangles restent distinguables même lorsque leurs couleurs se ressemblent.

Évitez de multiplier les séries sur un même graphique. Quand elles sont nombreuses, envisagez des « small multiples » — des graphiques séparés à échelle identique — plutôt que d’attendre du lecteur qu’il démêle une légende dense.

Diagrammes en barres

Utilisez des libellés de catégorie et des valeurs directes. Si les barres représentent des catégories à distinguer au sein d’un même groupe, ajoutez des motifs ou un contour net en plus de la couleur. La technique G111 du W3C décrit précisément l’usage conjoint de la couleur et du motif pour les barres.

Pour les barres empilées, étiquetez les segments directement quand c’est possible et proposez un tableau d’appui. Les segments fins sont difficiles à lire pour tout le monde, même avec une bonne palette.

Nuages de points et graphiques à bulles

Associez formes de marqueurs et couleur, et prévoyez une taille et un contraste suffisants pour que les marqueurs ne disparaissent pas. Ajoutez une bordure aux points lorsque le remplissage est clair ou le fond chargé. En cas de superposition, proposez un filtrage, un tableau de données ou une seconde vue séparant les groupes.

Cartes et cartes de chaleur

Ajoutez libellés, frontières, symboles ou motifs à la couleur de remplissage. Une carte de transport peut par exemple associer à la couleur de chaque ligne un marqueur d’arrêt distinctif. Sur une carte choroplèthe, ne faites pas reposer le message exact sur un simple dégradé clair-foncé : ajoutez une échelle visible, des valeurs et un tableau ou une conclusion en texte.

Concevez pour le contraste, pas seulement pour des teintes différentes

Deux couleurs peuvent différer par la teinte tout en ayant une clarté voisine : elles se confondent alors en niveaux de gris ou sous un déficit de la vision des couleurs. Le contraste importe particulièrement pour les traits fins, les petits marqueurs, les bordures du graphique et le texte.

Pour les objets graphiques non textuels nécessaires à la compréhension, les recommandations WCAG sur le contraste non textuel retiennent généralement un seuil de 3:1 par rapport aux couleurs adjacentes. Le contexte compte, et un libellé ou un tableau équivalent peut parfois transmettre l’information sans exiger de distinguer le graphique seul. Traitez la vérification du contraste comme une étape de la revue de conception, non comme un substitut aux libellés et aux indices redondants.

Utilisez le vérificateur de contraste pour explorer le contraste premier plan/arrière-plan du texte d’interface et des éléments visuels simples. Examinez ensuite le graphique complet : les mises en page réelles introduisent adjacences, traits fins, états de survol et superpositions qu’une simple vérification de paire de couleurs ne peut capturer.

Donnez accès aux données derrière l’image

Les graphiques sont des synthèses, non des substituts à l’accès aux données. Lorsqu’un graphique porte une décision ou une affirmation importante, prévoyez au moins l’un des éléments suivants :

• un tableau à proximité, avec catégories et valeurs ;
• un résumé écrit et concis de l’enseignement principal ;
• un téléchargement accessible, par exemple en CSV ;
• une description longue pour les relations visuelles complexes ;
• des info-bulles accessibles au clavier ou une vue de données focalisable pour les graphiques interactifs.

Cela améliore l’expérience des personnes utilisant un lecteur d’écran comme de celles qui ne distinguent pas tous les encodages visuels. Cela permet aussi de vérifier le message sans estimer des hauteurs de barres ou des parts de camembert.

Check-list pratique de revue

À utiliser avant de publier un rapport, une présentation, un tableau de bord produit ou un article :

• Le titre indique-t-il le sujet du graphique et la période ?
• Chaque série ou catégorie est-elle identifiable sans recourir à la couleur seule ?
• Les valeurs essentielles sont-elles libellées, disponibles dans un tableau ou décrites dans le texte voisin ?
• Les courbes, marqueurs, barres et éléments de légende ont-ils assez de contraste là où ils se touchent ou se chevauchent ?
• Les libellés sont-ils lisibles à un zoom ordinaire et sur petit écran ?
• Le graphique évite-t-il des statuts rouge/vert ambigus comme « bon » et « mauvais » sans texte ni icône ?
• Une personne naviguant au clavier peut-elle atteindre l’information d’un graphique interactif ?
• Une revue en niveaux de gris ou sous simulation de vision des couleurs révèle-t-elle des éléments ambigus ?

Testez avec du contenu réel et de vraies personnes

Les contrôles automatisés et les simulations sont d’utiles signaux d’alerte, mais ils ne prouvent pas qu’un graphique fonctionne pour chacun. Testez le graphique final à sa taille réelle, dans le produit ou le document où il apparaîtra. Demandez à un participant d’identifier la série la plus importante, la valeur la plus élevée et l’enseignement à retenir, sans l’aiguiller.

Notre simulateur de vision des couleurs aide les concepteurs à explorer le rendu d’une image sous plusieurs différences courantes. Considérez-le comme une étape de revue supplémentaire, non comme un substitut à la recherche utilisateur ou à une évaluation WCAG.

Pour des conseils d’interface plus larges, voyez concevoir pour le daltonisme.

Exemple : améliorer un graphique de statut

Imaginons un tableau de bord avec cinq services : barres vertes pour « objectif atteint », rouges pour « en retard », jaunes pour « à risque ». Une version plus accessible pourrait :

1. ajouter le mot correspondant au statut sur chaque barre : « Objectif atteint », « À risque » ou « En retard » ;
2. utiliser une icône dans le libellé — coche, triangle d’alerte ou flèche — accompagnée d’un texte explicatif ;
3. employer des motifs ou des contours comme second indice visuel ;
4. afficher le pourcentage réel et la valeur cible ;
5. proposer sous le graphique un tableau avec service, valeur actuelle, cible et statut.

La couleur continue d’accélérer la lecture pour beaucoup d’utilisateurs. Elle cesse simplement d’être la seule voie vers la compréhension.

En résumé

Un graphique accessible rend son message robuste. Libellés directs, motifs, styles de trait, contraste et données équivalentes permettent aux personnes présentant un déficit de la vision des couleurs de comprendre la même information que les autres — et rendent votre travail plus clair pour tout votre public.