DEV Community

Cover image for Des couleurs accessibles pour LeMOT (Wordle français)
Michel
Michel

Posted on • Edited on • Originally published at blog.pagesd.info

Des couleurs accessibles pour LeMOT (Wordle français)

J'ai bien réfléchi et j'ai décidé de changer la couleur des indices dans ma version de Wordle en français.

Samedi, quand j'ai créé LeMOT, j'ai repris les couleurs utilisées par Josh Wardle.

Les couleurs d'origine

Dans le Wordle original, il y a aussi un "Color Blind Mode" avec des couleurs plus constratées pour les personnes qui sont daltoniennes (color blind en anglais).

'Color Blind Mode' dans Wordle

Je ne le retrouve pas, mais j'ai vu passer il y a quelques jours un tweet disant qu'il serait plus simple d'utiliser directement des couleurs adaptées pour tout le monde, plutôt que de les proposer via un paramétrage.

Comme mon jeu est encore récent, c'est ce que j'ai fait. Et désormais ma version de Wordle en français utilise directement des couleurs accessibles pour les personnes ayant des troubles de la vue.

Les nouvelles couleurs

Je suis parti de la palette de couleurs "IBM Design Library" trouvé dans l'article Coloring for Colorblindness de David Nichols. J'ai ensuite testé ce que ça donnait grâce aux outils d'accessibilité proposés par Firefox et j'ai pu constater que tout allait bien.

Démonstrations

Pas de rouge (protanopie)

protanopie

Pas de vert (deutéranopie)

deutéranopie

Pas de bleu (tritanopie)

tritanopie

Aucune couleur (achromatopsie)

achromatopsie

Note : J'ai aussi profité de ce changement de couleurs pour augmenter la taille des caractères pour les myopes comme moi, avoir moins de nuances de gris et utiliser un noir plus foncé pour le texte des caractères.

Impact sur la grille de résultat

J'ai bien entendu adapté la grille de résultat inventée par @irihapeta pour qu'elle adopte le même jeu de couleur. Même si je sais que cela ne change rien aux problèmes que tous ces émojis génèrent pour les logiciels de lecteur d'écran.

Grille LeMOT

Avantages des couleurs accessibles

En un, tout le monde peut directement jouer, sans avoir à chercher où et comment paramétrer le jeu.

En deux, c'est des couleurs aussi jolies que celles d'origine (si ce n'est plus jolies).

En trois, je n'ai pas besoin de coder un écran pour paramétrer ça, ni de sauvegarder ce réglage pour le réactiver à chaque visite.

Note : Même si les couleurs sont désormais accessibles pour les daltoniens, d'autres éléments du jeu ne sont pas accessibles.

Inconvénients de changer de couleurs

La couleur des émojis dans la grille de résultat va sans doute dérouter les gens, mais je ne sais pas trop quoi faire... A part bien sûr d'en générer une plus accessible, ce qui n'est pas un truc facile et donc réalisable dans l'immédiat. Mais normalement, en voyant que la dernière ligne est peinte en orange, les gens comprendront vite qu'il s'agit de la couleur des lettres bien placées.

Ce qui est un peu plus embêtant, c'est que les joueurs commencent à être habitués à ce que VERT = lettre bien placée et ORANGE = lettre mal placée. A part quelques débutants qui hésitent encore et doivent fréquemment afficher l'aide :). Sans parler de la confusion pour ceux qui jouent à Wordle en français et en anglais.

Mais pour ça, j'ai trouvé une super solution dont je suis fier comme un bar-tabac !

Quand une lettre est bien placée, je la répète en filigrane à la ligne suivante. Avec ça, on peut jouer immédiatement sans avoir à réfléchir au code couleur et concentrer tout son temps de cerveau humain disponible à trouver le bon mot.

A la 2ème case, la lettre E bien placée

C'est pas tout ça, il est temps d'aller jouer à Wordle en français :)


Billet publié à l'origine sur blog.pagesd.info.

Top comments (2)

Collapse
 
lomig profile image
Lomig

Motus avait une approche très accessible en différenciant les lettres à la bonne place (carrés) des lettres correctes mais mal placées (cercles).

Je trouve l’approche bien plus pertinente (quitte à cumuler les deux)

Collapse
 
michelc profile image
Michel

Effectivement, ce n'est pas une mauvaise idée.