Lors d'un récent ajustement de conception de notre composant pas à pas, j'ai remarqué lors d'un examen de l'accessibilité que les lignes grises utilisées pour relier nos étapes incomplètes ne satisfaisaient pas aux exigences de contraste lorsqu'elles étaient placées sur un fond blanc.

Après l'avoir compris, c'était une solution simple d'utiliser un gris de notre palette de couleurs qui satisfaisait aux exigences de contraste de couleur 3: 1 pour les éléments graphiques. Et voici à quoi cela ressemblait :

Mise à jour de la couleur inaccessible

Maintenant, nous avions un stepper utilisant des couleurs qui satisfont aux exigences de contraste. Nous avons également eu des différences nettes entre les numéros d'étape terminés (remplacés par une coche), l'étape actuelle (remplie de noir) et les étapes incomplètes (l'inverse de l'étape actuelle).

Cependant, nous ne voulions pas nous arrêter là. Nous voulions aller au-delà de la conformité. Nous avons remarqué que les nouvelles lignes grises incomplètes étaient difficiles à différencier des lignes complètes. En gardant à l'esprit les conseils "Utilisation de la couleur", nous avons essayé de mettre à jour les lignes incomplètes pour les rendre plus faciles à distinguer. Voici ce que nous avons obtenu :

La conception finale

En fin de compte, nous avons utilisé une ligne pointillée (ou incomplète) pour indiquer les étapes incomplètes. Dans cette conception finale, nous ne comptons plus uniquement sur la couleur pour distinguer les différents états.

Prochaines étapes

Nous sommes convaincus que notre conception finale rend tout plus clair. Cependant, une personne a soulevé le fait que la ligne en pointillés peut amener les gens à penser que les étapes incomplètes sont facultatives. C'est quelque chose que nous allons mettre en recherche pour le découvrir avant de le mettre en ligne.

Qu'en penses-tu?

J'aimerais connaître votre avis sur les mises à jour que nous avons effectuées. Était-il nécessaire de franchir le pas supplémentaire ? Aurions-nous pu faire autre chose pour améliorer le design ?