🌈 🧐 Un sélecteur de couleurs avisé

(20 mars 2020)

Sur le Web, les concepteurs et les ingénieurs saméliorent dans la conception de leur accessibilité. Chez Wistia, la mise à jour la plus récente de notre lecteur vidéo a été un grand pas en avant, avec des améliorations pour le rendre convivial pour le lecteur décran, la navigation au clavier et capable de prendre en charge les descriptions audio.

Un sélecteur de couleurs avec une case à cocher qui indique

Mais aussi fantastique et talentueuse que soit léquipe ici, il y a certains aspects de laccessibilité vidéo que nous ne pouvons tout simplement pas résoudre dans les coulisses. Il appartient toujours aux créateurs de vidéos de commander des sous-titres, dajouter un texte alternatif descriptif à leurs images miniatures et de choisir la couleur de leur lecteur qui conviendra à leur marque. Et ce choix a un impact important sur laccessibilité, car une couleur darrière-plan claire peut rendre le texte et les icônes peu contrastés, au point dêtre illisibles.

Le contrôle de lapparence et de la convivialité du lecteur est lun des les fonctionnalités que nos clients mentionnent le plus comme étant la raison pour laquelle ils ont choisi Wistia, mais cest aussi un choix qui peut gravement affecter laccès sans quils se rendent compte de lenjeu.

Pour résoudre ce problème, pour concevoir un sélecteur de couleurs qui facilite le choix de laccessibilité.

Mettre un numéro dessus, cest faire un choix éclairé en aussi peu de clics que possible. À la recherche dune interface utilisateur simple et à faible friction pour la sélection des couleurs, nous avons fait le point sur les millions (?) De façons différentes de faire un choix de couleur. Pourquoi tout cela est-il différent? Pourquoi ny a-t-il pas de norme de sélection de couleurs? Et quelle est la différence entre « Luminosité » et « Luminosité »?

De nombreux sélecteurs de couleurs différents, affichant différentes dispositions et structures despace colorimétrique

La réponse réside dans lespace de couleurs tridimensionnel. Autrement dit, pour représenter avec précision toutes les couleurs possibles, vous avez besoin dune forme en trois dimensions. Le modèle qui correspond le plus directement à nos instincts de couleur est HSV: Teinte (la tache sur larc-en-ciel), Saturation (pureté de cette teinte par rapport à la boue de celle-ci se transformant en gris), Valeur (clarté de cette teinte par rapport à sa fusion en blanc ou noir). Chacune de ces trois variables est une dimension nécessaire pour définir une couleur affichée sur un écran.

Formes tridimensionnelles représentant lespace de couleur: a colonne, cône, cube et sphère
Fait amusant: les valeurs hexadécimales des couleurs ne correspondent pas à HSV, mais (le moins intuitif) RVB. Chacune des trois paires de caractères représente un canal de couleur rouge, bleu ou vert en hexadécimal (base 16), donc #FF FF FF est blanc, car tous les trois sont au maximum comme le 👆middle de limage de ce cube, alors que #FF 00 00 est rouge, car seul le canal R est au maximum. Ainsi, la face gauche de ce cube correspond à toutes les couleurs que vous pourriez obtenir si vous ne changiez que le canal R et que les quatre derniers caractères de votre code hexadécimal restaient FF FF.

Aussi simple que cela puisse être de demander aux utilisateurs de choisir leur couleur en naviguant dans un monde en trois dimensions vers la coordonnée (x, y, z) qui correspond le mieux à leur marque, cela ne se traduirait pas par quelques clics et des choix rapides et judicieux. La raison pour laquelle il y a tant de sélecteurs de couleurs est quil faut un certain degré dabstraction pour prendre cet espace colorimétrique tridimensionnel et le réduire à une interface utilisateur bidimensionnelle . C’est pourquoi tous les sélecteurs de couleurs ont au moins deux (parfois trois) axes de choix – l’utilisateur doit choisir leurs x, y et z; leur teinte, saturation et valeur. Et pour notre équipe de conception, ces choix signifient des clics supplémentaires. Pour minimiser ces clics, nous nous sommes demandé lesquels étaient les plus et les moins importants.

Choisir une teinte est le clic le plus important; choisir la saturation est le clic le moins important.

La teinte est la première chose à laquelle nous pensons lorsque nous pensons au choix dune couleur. Et dans le contexte de la mise en correspondance dun lecteur vidéo avec une couleur de marque, la saturation est la dernière chose à laquelle nous pensons. En effet, la plupart des couleurs de la marque sont saturées et même lorsquelles ne le sont pas, vous pensez probablement toujours à elles de cette façon. Cela signifie que de nombreux utilisateurs ne voudront jamais que la saturation soit autre chose que 100, et si cest son propre clic, cest un clic que nous pouvons potentiellement éviter. Cela ne laisse que la teinte et la valeur à choisir, qui peuvent être les axes dun champ bidimensionnel, et sélectionnables en un seul clic.

Un sélecteur de couleurs affichant deux sections, la première une matrice de teinte et de luminosité, la seconde un spectre étiqueté Saturation
En un seul clic, lutilisateur sélectionne la teinte et la luminosité. Le deuxième clic, pour réduire la saturation, nest souvent pas nécessaire.

Voici! A choix de couleur en un seul clic. Mais quen est-il de laccessibilité? Nous pouvons ajouter un texte daide qui explique pourquoi le contraste est important (nous faisons cela) et montrer le rapport de contraste calculé et si cela répond à la norme (nous le faisons aussi), mais le travail à faire reste le choix . Nos utilisateurs doivent comprendre ce quils ont à choisir, sans perdre le contexte de léventail complet des options. Après tout, les sélecteurs de couleurs sont assez compliqués et il est plus facile de comprendre ce qui se passe avec une animation montrant ce qui est enlevé.

Un gif animé du sélecteur de couleurs passant du spectre complet à un spectre limité de couleurs à contraste élevé uniquement

Notre solution ajoute un clic, mais juste une. Lorsque vous cochez la case, le sélecteur masque toutes les valeurs qui ne créent pas un contraste suffisamment élevé par rapport aux commandes du lecteur blanc pour être considérées comme accessibles. Si votre paramètre précédent ne se situe pas dans la plage acceptable, la teinte reste la même et la luminosité descend au niveau acceptable le plus élevé.

Le calcul est basé sur les calculs fournis par Web Content Accessibility Guild , dont la norme AA sur laquelle nous basons notre travail daccessibilité. À partir de là, nous intégrons un facteur de légèreté supplémentaire pour tenir compte de lopacité de 80\% du lecteur Wistia. Cela signifie que le scénario de contraste le plus faible, lorsque le lecteur est superposé sur du blanc pur, donne toujours un contraste suffisant.

Ce sélecteur de couleur nest quune petite partie de notre outil daccessibilité, qui comprend une liste de contrôle pour chaque vidéo et info-bulles utiles tout au long du processus de personnalisation expliquant limpact de différents choix sur laccessibilité. Une grande partie de ce travail est effectuée par Wistia dans les coulisses, mais guider les utilisateurs à travers les paramètres quils doivent ajuster est la façon dont nous travaillons pour faire de laccessibilité un choix facile à faire.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *