Rendre ses graphiques accessibles à tous

Contraste, daltonisme, alternatives textuelles : les bonnes pratiques pour que vos graphiques restent compréhensibles par tout le monde, y compris à l'écran et à l'impression.

Vous passez une heure à peaufiner un graphique, il est parfait sur votre écran… et pourtant une partie de vos lecteurs n’y comprendra rien. Le collègue daltonien ne distingue pas vos deux courbes. La version imprimée en noir et blanc écrase toutes vos couleurs. Le lecteur sur mobile, en plein soleil, ne voit qu’un aplat gris. L’utilisateur de lecteur d’écran, lui, n’entend qu’un mot : « image ». Rendre un graphique accessible, ce n’est pas cocher une case réglementaire : c’est éviter que tout votre travail se perde en chemin.

I. Pourquoi l’accessibilité des graphiques compte  

On imagine souvent l’accessibilité comme une préoccupation de niche. En réalité, les situations où un graphique devient illisible sont le quotidien de millions de lecteurs. Quelques cas très concrets :

• Le manager daltonien. Environ un homme sur douze (8 %) et une femme sur 200 sont daltoniens. Sur un tableau de bord où le rouge signifie « en retard » et le vert « dans les temps », il ne voit que des barres identiques. L’information la plus importante lui est invisible.
• Le rapport imprimé. Un comité de direction reçoit le rapport photocopié en noir et blanc. Vos cinq séries colorées deviennent cinq nuances de gris quasi identiques : le graphique ne veut plus rien dire.
• La présentation au vidéoprojecteur. En réunion, dans une salle éclairée, un projecteur délave les couleurs pâles. Le jaune clair et le blanc fusionnent, les libellés gris disparaissent.
• Le lecteur sur mobile. En déplacement, écran en plein soleil, luminosité réduite : les faibles contrastes s’évanouissent.
• L’utilisateur de lecteur d’écran. Une personne aveugle ou malvoyante navigue à la voix. Si vous n’avez rien prévu, son logiciel annonce « image » — ou pire, le nom du fichier — et passe au paragraphe suivant.

Le point commun de tous ces cas ? Une correction faite pour l’un profite à tous. Renforcer le contraste aide autant le daltonien que le lecteur au soleil ; c’est ce qu’on appelle l’effet « bateau-passeur » (curb-cut effect) : la rampe pensée pour les fauteuils sert aussi aux poussettes et aux valises.

II. Le contraste : lisible pour tous les yeux  

Le problème réel : vos libellés d’axe sont en gris clair « pour faire discret ». À l’écran, dans votre bureau, ça passe. Mais projetés en réunion, imprimés, ou lus par une personne âgée dont la vision baisse, ils deviennent illisibles — et un graphique dont on ne peut pas lire les axes ne sert à rien.

Le contraste, c’est l’écart de luminosité entre deux couleurs. S’il est trop faible, les éléments se fondent l’un dans l’autre. Le référentiel d’accessibilité WCAG fixe des seuils mesurables :

• 4,5:1 minimum pour le texte courant (titres, libellés, annotations) ;
• 3:1 minimum pour le gros texte et les éléments graphiques (traits, barres, lignes d’axe).

Concrètement, ces chiffres veulent dire : un gris à peine plus foncé que le fond échoue au test, un gris franc le réussit. Ce qui coince le plus souvent :

• Les libellés et axes en gris trop clair. C’est l’erreur la plus fréquente. Un axe doit être lisible sans effort.
• Les couleurs adjacentes trop proches. Deux parts voisines d’un camembert, ou deux courbes, doivent se distinguer nettement — pas seulement pour vous, mais après projection ou impression.
• Le texte posé sur une zone colorée. Une étiquette blanche sur un jaune clair est illisible ; utilisez une teinte foncée de la même famille.

Le test de dix secondes : plissez les yeux devant votre graphique. Si deux éléments se confondent ou si un libellé s’efface, le contraste est insuffisant. Un vérificateur de contraste (voir liens en bas) donne le chiffre exact en cas de doute.

III. Le daltonisme : ne jamais coder par la couleur seule  

Le problème réel : vous publiez un graphique boursier où les hausses sont en vert et les baisses en rouge. Pour un lecteur atteint de deutéranopie — la forme la plus courante — le rouge et le vert se ressemblent énormément. Il ne peut littéralement pas savoir si l’action monte ou descend. Toute votre information repose sur une distinction qu’il ne perçoit pas.

Le daltonisme n’est pas « voir en noir et blanc » (ça, c’est extrêmement rare). C’est surtout une confusion entre certaines teintes :

• Deutéranopie et protanopie — confusion rouge/vert, de loin les plus répandues. C’est pourquoi le duo rouge/vert, pourtant si intuitif (« bien/mal »), est le pire choix possible.
• Tritanopie — confusion bleu/jaune, beaucoup plus rare.

D’où la règle d’or de toute la data viz accessible : l’information ne doit jamais reposer sur la couleur seule. La couleur peut renforcer un message, jamais le porter à elle seule. Comment s’y prendre :

• Doublez toujours la couleur d’un second indice. Une courbe se distingue aussi par un style de trait (plein, pointillé, tirets), une part par un motif (hachures, points), un point par une forme de marqueur (rond, carré, triangle).
• Étiquetez directement. Plutôt qu’une légende colorée à mettre en correspondance, écrivez le nom de la série au bout de sa courbe. C’est plus rapide à lire pour tout le monde, daltonien ou non.
• Choisissez une palette sûre. Évitez le rouge/vert critique ; le duo bleu/orange est un classique bien perçu par la plupart des daltonismes. Vérifiez toujours le rendu avec un simulateur (il existe des outils qui montrent votre graphique « vu » par chaque type de daltonisme).
• Pour une échelle de valeurs, misez sur la luminosité. Une palette séquentielle (une seule teinte, du clair au foncé) reste parfaitement lisible même en cas de daltonisme, car elle joue sur le clair/foncé et non sur la teinte. C’est souvent plus sûr qu’un dégradé multicolore.

IV. Les alternatives textuelles  

Le problème réel : une personne aveugle suit votre article avec un lecteur d’écran. Arrivée à votre graphique, la synthèse vocale annonce « image ventes-2024-final.png ». Toute l’analyse que le graphique portait vient de disparaître pour elle. Le même problème touche, plus banalement, n’importe quel lecteur quand l’image ne se charge pas.

Un graphique est une image : un logiciel ne « voit » pas les tendances qu’il contient, il lit uniquement le texte que vous fournissez autour. Il faut donc traduire l’information visuelle en mots, sur trois niveaux :

1. Le texte alternatif (alt). Court, il doit livrer la conclusion, pas décrire des pixels. Mauvais : « graphique en barres ». Bon : « Les ventes ont doublé entre 2021 et 2024, portées par le dernier trimestre. » Ce alt sert aussi au référencement et s’affiche si l’image échoue à charger.
2. Le message dans le texte de l’article. Énoncer en toutes lettres le point clé (« la croissance s’accélère à partir de 2023 ») profite à tous les lecteurs, pas seulement à ceux qui utilisent une aide technique. Un graphique ne devrait jamais être le seul endroit où vit une information essentielle.
3. Les données sous-jacentes. Pour qui veut vérifier ou explorer, proposez un tableau de données ou un lien de téléchargement. C’est aussi un gage de transparence.

Règle simple : si vous deviez décrire votre graphique au téléphone à quelqu’un qui ne le voit pas, que diriez-vous ? Cette phrase-là est votre texte alternatif.

V. Ne pas enfermer l’information dans le survol  

Le problème réel : votre graphique interactif est superbe — il suffit de passer la souris sur une barre pour voir sa valeur exacte. Sauf que sur mobile, il n’y a pas de survol. À l’impression, il n’y a pas de survol. Pour un lecteur au clavier ou au lecteur d’écran, il n’y a pas de survol non plus. Toute l’information « cachée » dans l’infobulle est perdue pour eux.

Les graphiques interactifs multiplient ce piège : on range les chiffres, les libellés ou les explications dans des infobulles au survol, en oubliant que le survol est le mode d’interaction le moins universel qui soit.

Les bons réflexes :

• L’essentiel doit être visible sans interaction. Le message principal, les valeurs clés et les libellés doivent figurer directement sur le graphique, pas seulement au survol.
• Traitez l’infobulle comme un bonus, jamais comme le seul support d’une information nécessaire à la compréhension.
• Vérifiez que le graphique reste complet une fois figé : une capture d’écran, une impression ou un PDF doivent suffire à tout comprendre.

VI. Aider les lecteurs dys et alléger la charge cognitive  

Le problème réel : votre graphique est techniquement lisible — bon contraste, palette sûre — mais il est dense : légende à décoder, texte en italique, chiffres partout. Pour une personne dyslexique, chaque aller-retour entre la légende et les données coûte un effort ; pour une personne dyscalculique, une grille de nombres bruts est un mur ; pour un lecteur fatigué ou distrait, le message se noie dans le bruit.

L’accessibilité ne concerne pas que la vue : les troubles dys (dyslexie, dyscalculie) et, plus largement, la charge cognitive touchent une part importante des lecteurs. On ne les aide pas avec de la couleur, mais en réduisant l’effort de lecture et de traitement.

• Pour la dyslexie — limiter la lecture et les allers-retours du regard. Préférez l’étiquetage direct (le nom au bout de la courbe) à une légende à mettre en correspondance. Des phrases courtes, un texte aligné à gauche (jamais justifié ni en majuscules), une police simple et lisible en taille suffisante, avec un interlignage généreux.
• Pour la dyscalculie — faire parler la forme, pas les chiffres. Laissez le graphique montrer la comparaison au lieu d’imposer la lecture de nombres. Arrondissez, limitez le nombre de valeurs affichées, ajoutez des repères parlants (une ligne d’objectif, une annotation « ×2 »), et traduisez en mots (« a doublé ») plutôt qu’en pourcentages complexes.
• Pour la charge cognitive (TDAH, fatigue, stress) — un message, un graphique. Supprimez le bruit décoratif, mettez en avant l’élément important et laissez le reste en retrait. Un graphique qui pose une seule question et y répond clairement soulage tous les cerveaux.

VII. À l’écran ET à l’impression  

Le problème réel : votre tableau de bord coloré est validé, envoyé, puis imprimé en noir et blanc pour la réunion. Vos cinq séries deviennent cinq gris presque identiques ; personne ne sait plus quelle courbe est laquelle. Le même effet se produit à la photocopie, sur une liseuse e-ink, ou quand un lecteur force le mode sombre.

La couleur est fragile : elle ne survit ni à la désaturation, ni au noir et blanc, ni à certaines conversions. Un graphique robuste doit rester lisible même sans couleur.

Le test décisif : passez votre visualisation en niveaux de gris. Si les séries deviennent impossibles à distinguer, c’est que la couleur faisait tout le travail — et qu’une simple impression suffira à casser votre graphique.

Les parades, cumulables :

• Motifs et hachures sur les aplats (barres, parts) pour les différencier sans couleur.
• Styles de trait distincts pour les courbes (plein, pointillé, tirets) : ils survivent à toutes les conversions.
• Étiquetage direct, encore et toujours : un nom écrit à côté d’une courbe résiste au noir et blanc comme au daltonisme.
• Couleurs contrastées en luminosité : choisissez des teintes qui restent différentes une fois désaturées (un bleu foncé et un orange clair se distinguent en gris ; un rouge et un vert de même intensité fusionnent).

VIII. La checklist accessibilité  

Avant de publier, passez ces huit points en revue :

• Contraste suffisant pour le texte (4,5:1) et les éléments graphiques (3:1).
• Aucune information portée par la couleur seule (trait, motif ou libellé en renfort).
• Palette testée pour le daltonisme (pas de rouge/vert critique).
• Texte alternatif qui énonce le message, et point clé répété dans le texte.
• Rien d’essentiel caché dans le survol ou l’interaction.
• Charge de lecture réduite : étiquetage direct, peu de texte, message unique.
• Données disponibles sous forme textuelle ou tabulaire.
• Test réussi en niveaux de gris (écran et impression).

Huit cases, et votre graphique parle à tout le monde.

Conclusion  

Derrière chaque bonne pratique d’accessibilité, il y a une personne réelle.

Et la vraie bonne nouvelle, c’est que ces réflexes ne servent pas que les personnes en situation de handicap. Un graphique lisible sans couleur, compréhensible sans interaction et résumé en une phrase claire, c’est tout simplement un meilleur graphique — pour absolument tout le monde.

Ressources utiles  

• WebAIM — Contrast Checker
  Outil en ligne pour mesurer le rapport de contraste entre deux couleurs et vérifier qu’il respecte les seuils WCAG (4,5:1 et 3:1).

• Coblis — Color Blindness Simulator
  Simulateur qui affiche votre image « vue » par chaque type de daltonisme : idéal pour tester un graphique avant publication.

• Datawrapper — How to make your charts colorblind-safe
  Guide pratique et illustré pour concevoir des graphiques lisibles par les personnes daltoniennes, avec des exemples de palettes sûres.

• WCAG — Comprendre le contraste (W3C)
  Référence officielle du W3C expliquant les critères de contraste minimum et la logique derrière les seuils recommandés.

• W3C WAI — Complex images (textes alternatifs détaillés)
  Tutoriel du W3C sur la rédaction d’alternatives textuelles pour les images complexes comme les graphiques et les diagrammes.