Choisir le codage avant les teintes
Déterminez d’abord si la couleur représente des catégories, une quantité ordonnée ou un écart autour d’un milieu significatif. Une palette catégorielle attribue des identités et ne doit pas suggérer un ordre absent des données. Une échelle séquentielle évolue du faible au fort. Une échelle divergente suit deux directions autour d’un centre déclaré. Mélanger ces rôles induit en erreur malgré des teintes agréables. Limitez les catégories simultanées à ce qui peut être libellé et distingué dans le graphique.
- Employez des teintes distinctes pour les catégories non ordonnées et gardez leur correspondance entre vues.
- Employez une progression de clarté pour les quantités, avec direction et unités dans la légende.
- Réservez l’échelle divergente à un milieu défendable tel que zéro ou une cible.
Ne jamais faire de la couleur la seule clé
Les WCAG 2.2 interdisent que la couleur soit le seul moyen visuel de communiquer une information. Une légende de carrés colorés impose encore une correspondance chromatique. Ajoutez des libellés directs et utilisez formes, styles de ligne, motifs ou groupement spatial comme canaux redondants. C’est crucial pour lignes fines, petits points, zones voisines, impressions et captures. L’indice alternatif doit rester visible à la taille et à la densité réelles du graphique, pas seulement dans une maquette agrandie.
- Libellez directement les lignes ou régions importantes afin de limiter les allers-retours vers la légende.
- Associez couleur, tirets ou formes de marqueur en gardant chaque motif simple.
- Exposez les noms en texte accessible et dans des aides utilisables sans souris.
Mesurer le contraste en contexte
Pour les objets et états graphiques nécessaires à la compréhension, le contraste non textuel WCAG demande généralement 3:1 face aux couleurs adjacentes. La comparaison dépend du contexte : barre sur le fond, régions en contact ou focus face aux deux côtés. Les libellés suivent le contraste textuel, couramment 4,5:1 pour le texte normal et 3:1 pour le grand texte admissible. Testez le rendu, l’anticrénelage et l’épaisseur, car une paire numériquement conforme peut rester introuvable si la marque est minuscule.
- Mesurez chaque marque essentielle face à la couleur qui l’entoure dans le graphique final.
- Testez les libellés séparément : une barre contrastée ne corrige pas un texte pâle.
- Retestez survol, sélection, atténuation, focus et autres états plutôt que la seule image initiale.
Construire un ensemble de catégories maintenable
Commencez par une surface et un texte neutres, puis choisissez des catégories qui diffèrent sur plusieurs canaux. Réservez les couleurs sémantiques comme le rouge d’erreur si le produit les emploie déjà ainsi. Nommez les jetons par rôle, documentez le fond prévu et fournissez forme ou motif de repli. Si les catégories dépassent l’ensemble testé, réunissez les petites valeurs sous « Autres » ou utilisez filtres et interaction plutôt que des couleurs presque identiques. Une limite déclarée vaut mieux qu’une palette prétendument infinie.
- Nommez les jetons par rôle, par exemple chart-category-1, et conservez la paire premier plan/fond testée.
- Gardez une catégorie liée au même jeton dans panneaux, filtres, tableaux et exports.
- Définissez un débordement déterministe au lieu de recycler les couleurs.
Concevoir ensemble légende et interaction
La légende doit expliquer la correspondance sans cacher les données. Préservez l’ordre source s’il est significatif ; sinon appliquez un ordre stable documenté. Permettez de surligner une catégorie depuis la légende et le graphique, avec un fonctionnement clavier équivalent et un focus visible. Ne signalez pas la sélection par saturation ou opacité seules : ajoutez contour, forme, libellé ou isolement. Les infobulles complètent les étiquettes, mais ne doivent pas contenir seules les valeurs ou noms essentiels.
- Faites des entrées interactives de vrais contrôles focalisables dotés de noms accessibles.
- Montrez la sélection par une limite ou une forme en plus de la couleur ou de l’opacité.
- Fournissez les valeurs exactes dans un tableau ou un équivalent accessible.
Tester avec des données et sorties réalistes
Testez des données denses, rares, extrêmes, manquantes et superposées plutôt qu’un exemple idéal. Examinez taille cible, zoom, couleurs forcées et niveaux de gris ; simuler les différences de vision colorée complète le contrôle sans prouver l’accessibilité. Imprimez ou exportez si ces usages comptent. Demandez d’identifier catégories et valeurs sans indice, consignez les échecs par marque et contexte, puis conservez jeu d’essai et paires de contraste afin de répéter l’évaluation après une modification du thème.
- Testez le maximum de catégories et la plus petite marque sur chaque fond prévu.
- Vérifiez données manquantes, négatives, alertes, focus et sélection sans dépendre d’une teinte.
- Documentez les limites et choisissez un autre graphique lorsque les données les dépassent.
Sources primaires
Les affirmations factuelles de cet article sont vérifiées dans ces spécifications publiées.