🌈 Viz Palette : l’outil pour des dataviz aux couleurs accessibles

Un outil pensé pour les dataviz. Même s’il reste du chemin à parcourir, l’accessibilité est enfin devenue un sujet abordé lors des projets web. Offrir une palette de couleurs accessible à vos internautes est donc LE minimum. 👁️ C’est là qu’entre en scène Viz Palette, outil né d’une frustration de Susie Lu et Elijah Meeks, tous deux data designer chez Netflix. Il offre un rendu “live” de vos gammes de couleurs sur de faux graphiques pour les différentes déficiences visuelles !

Le petit plus (et pas des moindres). Son atout maître est le “Color report”. Pour chaque déficience, il identifie les conflits de couleurs potentiels entre les teintes de votre gamme. L’outil vous montre, en outre, si ce conflit va concerner des lignes et des points, des aplats de moyenne ou de grandes surfaces.

Comment l’utiliser ? Vous éditez vos couleurs dans la partie “Edit”. L’outil propose même des variantes de teintes dans une mini palette.

🎨 Essayons de corriger le problème de couleur sur les deux teintes “Magenta” : cliquez sur la teinte #9d02d7 et choisissez une couleur plus sombre dans ses variantes. Cliquez sur “Update Color”. Le conflit est corrigé et l’exemple avec les graphiques est remis à jour pour apprécier le résultat. Naviguez dans les déficiences visuelles pour vous assurer que ce changement n’a pas généré de nouveaux conflits.

Pour conclure. Il est très difficile d’obtenir 0 conflit de couleurs sur toutes les déficiences, notamment si vous avez plus de 5 couleurs dans votre gamme.

⚠️ L’idée est plutôt de chercher à minimiser ces conflits en jouant sur la saturation et la luminosité de chacune des teintes (et en veillant à conserver une cohérence visuelle).

POUR ALLER ENCORE PLUS LOIN

• Pour savoir si votre texte est compatible RGAA/RGAAA, activez le plugin Contrast sur Figma.
• Lisa Charlotte Muth guide sur l’usage de la couleur dans la dataviz : tous ses articles sur le sujet sont regroupés ici [🇬🇧].