Imprimez-le en gris et voyez ce qu'il reste

Les quatre affichages qu’un graphique doit survivre

Un graphique de programme est composé une fois et lu sur des affichages que son auteur ne voit jamais.

Affichage	Ce qu’il fait	Ce qui lâche en premier
Une imprimante laser	Supprime toute teinte	Deux séries distinguées par la seule couleur
Un vidéoprojecteur en salle éclairée	Écrase les demi-teintes, relève les noirs	Gris clairs, traits fins, ombrages subtils
Un téléphone sur connexion facturée	Rétrécit tout	Corps sous 9 pt, étiquettes d’axe denses
Un lecteur daltonien	Fusionne rouge et vert	La palette de signal, et toute paire rouge/vert

Chacun de ces cas est le cas normal dans ce secteur, non un cas limite d’accessibilité. Le document est photocopié, le vidéoprojecteur est vieux, le lecteur est sur un téléphone dans un bureau de terrain, et la salle a une fenêtre.

Le test du niveau de gris, qui prend dix secondes

import matplotlib.pyplot as plt

fig.savefig("chart.png", dpi=150)
grey = plt.imread("chart.png").mean(axis=2)     # crude luminance
plt.imsave("chart-grey.png", grey, cmap="gray")

# ggsave(), then open it in any viewer and desaturate. Or just print it.

Faites-le sur chaque graphique avant qu’il parte. Si deux séries n’en font plus qu’une, le graphique encodait une distinction dans la seule teinte.

Le remède n’est jamais « choisir de meilleures couleurs ». C’est d’ajouter un second canal :

Distinguer	Comment
Deux lignes	Étiquettes directes au bout des lignes, plus trait plein et pointillé
Des barres dont une mise en évidence	Contraste de clarté, non de teinte
Des catégories	Petits multiples, ainsi rien n’a besoin d’être distingué
Des points d’un nuage	La forme autant que la couleur

La clarté survit au niveau de gris par définition. Les figures de la plateforme emploient un vert sapin foncé contre un gris ardoise moyen, qui sont deux gris distinguables avant d’être deux couleurs — et c’est pourquoi la mise en évidence de chaque figure de ce site se lit encore sur une photocopie.

La déficience de la vision des couleurs

Environ 8 % des hommes et 0,5 % des femmes d’ascendance nord-européenne en présentent une forme, et les plus courantes fusionnent le rouge et le vert.

La palette de signal est le cas problématique et il est incontournable, parce que vert, ambre et rouge sont la convention du secteur et ne peuvent pas être simplement remplacés.

SIGNAL = {"normal": "#2f8f5b", "moderate": "#d9a02b", "severe": "#c0442f"}

# Keep the hues. Add a second channel so the hue is not load-bearing.

Trois façons de garder la convention tout en restant lisible.

Ordonnez les catégories. Normal, modéré, sévère dans cet ordre signifie que la position porte la sévérité même quand la teinte ne le fait pas.

Étiquetez directement. Le mot « sévère » sur la barre ne coûte rien et supprime entièrement la dépendance.

Faites varier la clarté délibérément. Les trois couleurs de signal de cette plateforme ne sont pas également claires : le vert est plus foncé que l’ambre, si bien qu’ils se séparent en niveaux de gris autant qu’en teinte. Vérifiez-le ; une palette choisie pour la seule teinte comporte souvent deux couleurs de clarté identique, qui fusionnent en un seul gris.

Le corps, les traits et la taille à laquelle le graphique est réellement lu

plt.rcParams.update({
    "font.size": 10,          # 9 pt is the floor for a printed figure
    "axes.labelsize": 10,
    "axes.titlesize": 11,
    "xtick.labelsize": 9,
    "lines.linewidth": 1.6,   # 1 pt disappears on a projector
})
fig.set_size_inches(6.5, 4)   # the width of a text column, not of a monitor

theme_set(theme_minimal(base_size = 11))

Composez à la taille d’impression. Un graphique conçu sur 30 centimètres de large et déposé dans une colonne de 16 a un corps de moitié, et le remède n’est pas de redimensionner l’image — c’est de le redessiner à la largeur cible.

9 pt est le plancher pour l’impression et 18 pt pour une diapositive projetée. Les diaporamas de leçon que produit cette plateforme font 1280×720 ; en dessous d’environ 18 pt à cette taille, rien n’est lu depuis le fond d’une salle.

Les traits fins et les gris clairs sont les premières victimes d’un vidéoprojecteur. Employez 1,5 pt ou plus, et ne confiez aucune information à un gris plus clair qu’environ 40 %.

Tout ce qui peut être supprimé

La mesure d’accessibilité la plus forte consiste à avoir moins de choses sur le graphique.

Supprimez	Parce que
La légende, pour deux séries	Les étiquettes directes se lisent sur place
La plupart des lignes de grille	Quatre suffisent ; douze font une texture
Le cadre et les axes haut et droit	Ils ne portent rien
Les unités répétées à chaque graduation	« % » sur l’étiquette d’axe, non sur chaque nombre
Le titre, quand la légende le dit	Deux en-têtes se concurrencent
Les décimales	42,9 % et non 42,94 % ; l’intervalle est plus large que la décimale

plt.rcParams.update({"axes.spines.top": False, "axes.spines.right": False})
ax.grid(axis="x", alpha=0.3)
ax.set_axisbelow(True)              # gridlines behind the bars

theme(panel.grid.minor = element_blank(), panel.border = element_blank())

Les lignes de grille passent derrière les données. Une grille tracée par-dessus une barre se lit comme une division dans la barre, marque qui ne signifie rien.

Le texte alternatif, qui est une légende faisant un second travail

Chaque figure de cette plateforme porte une légende assez longue pour énoncer son constat, et c’est cette légende qu’annonce un lecteur d’écran.

![Malnutrition aigue globale par commune avec intervalles de confiance a 95 %.
Les trois communes mises en evidence sont les seules dont l'intervalle depasse
la mediane du district.](/figures/muac-gam-by-commune.fr.svg)

« Graphique de la MAG par commune » décrit le fichier, non le constat. Un lecteur qui ne voit pas le graphique n’en tire rien.

Une légende qui énonce le constat sert quatre lecteurs à la fois : l’utilisateur de lecteur d’écran, le lecteur du document imprimé, le formateur qui travaille depuis le PowerPoint où la figure est une légende et non un dessin, et la personne qui parcourt le rapport en quête du point.

C’est pourquoi la plateforme l’exige au lieu de le recommander. figures.test.ts fait échouer une figure dont la légende fait moins de vingt caractères, et la raison n’est pas le rangement.

Rapportez-le en entier

Figure accessibility conventions

  All figures are readable in greyscale: emphasis is carried by lightness
  contrast rather than hue, and series are labelled directly rather than
  through a legend.

  Signal colours (green/amber/red) are used only where the categories are
  ordered by severity, so position carries the meaning independently of hue.

  Figures are drawn at the width they are printed. Minimum type size is 9 pt
  in the report and 18 pt on slides.

  Every figure carries a caption stating its finding, which is also its
  alternative text.

Quatre lignes, et elles sont vérifiables par quiconque dispose d’une imprimante. Une déclaration d’accessibilité qu’on ne peut pas vérifier depuis l’artefact est une affirmation plutôt qu’une convention.

La suite

Une figure est rarement lue là où elle a été écrite. La leçon suivante porte sur la légende qui doit survivre à un collage dans un rapport de situation par quelqu’un qui n’a pas fait l’analyse.