Comprendre la couleur et l’accessibilité

Lorsqu’il s’agit de rendre vos applications accessibles, les couleurs que vous choisissez jouent un rôle énorme !

Des rapports de contraste à la communication d’informations en passant par l’offre de thèmes optionnels aux utilisateurs, examinons comment optimiser vos choix de couleurs pour qu’ils soient aussi accessibles que possible !

Contraste des couleurs

Lorsque vous choisissez des couleurs pour vos différents éléments d’interface utilisateur, il est important de vous assurer que vous respectez une norme accessible pour le contraste des couleurs. La WCAG (Directives pour l’accessibilité du contenu Web) définit trois niveaux de rapports de contraste des couleurs—défaillant, AA et AAA. Le niveau AA signifie que vos couleurs ont suffisamment de contraste pour être lisibles, mais peuvent néanmoins présenter des problèmes pour certains utilisateurs. Le niveau AAA signifie que vous avez atteint un contraste extrêmement élevé qui devrait être lisible pour la grande majorité de vos utilisateurs. Vous devez toujours viser la conformité AAA, mais vous assurer que vous n’échouez pas est un bon point de départ.

Le texte, en particulier, est incroyablement difficile à lire lorsqu’il n’y a pas assez de contraste entre elle et la couleur d’arrière-plan, et cela n’est qu’exacerbé pour l’un de vos utilisateurs avec une vision 20/20 moins que parfaite. Sans oublier qu’il existe de nombreux ajustements qu’un utilisateur peut apporter à son affichage – quart de nuit, luminosité, étalonnage du moniteur, etc. – qui peuvent tous avoir un impact sur vos couleurs d’une manière totalement indépendante de votre volonté. L’une des meilleures façons de permettre à votre application de rester accessible à travers tout cela est de faire attention à vos rapports de contraste des couleurs et de vous assurer qu’ils sont conformes aux normes WCAG, afin que vous ayez une certaine marge de manœuvre pour vous adapter à ces circonstances atténuantes.

Heureusement, c’est une chose très facile à faire, car les analyseurs de contraste de couleur se trouvent facilement en ligne simplement en recherchant « vérificateur de contraste de couleur » sur Google. Mon préféré est le Outils d’accessibilité Adobe Colorqui fait un excellent travail en montrant des exemples pour différentes situations de contraste de couleurs, ainsi qu’en vous permettant de simuler différentes versions de daltonisme pour voir à quoi ressemblerait votre palette de couleurs pour des utilisateurs voyants différents.

Évaluer

Vous connaissez peut-être déjà les rapports de contraste des couleurs et comprenez même pourquoi ils sont si importants, mais connaissez-vous la théorie des couleurs derrière leur fonctionnement ?

Lorsque nous parlons de contraste de couleurs, nous parlons principalement d’une comparaison de valeurs. La valeur est la luminosité ou l’obscurité d’une teinte – c’est ce qui crée la différence entre le bleu ciel et le bleu marine. Vous pouvez modifier la valeur d’une couleur de trois manières : en ajoutant du blanc pour créer une teinte, en ajoutant du gris pour créer un ton ou en ajoutant du noir pour créer une nuance. Lorsque les valeurs de deux couleurs différentes sont trop similaires, c’est alors que vous rencontrez des problèmes de contraste. Certaines couleurs (comme les oranges ou les rouges vifs) seront particulièrement difficiles à obtenir avec un contraste élevé car leurs valeurs se situent en plein milieu du spectre – il est difficile d’aller suffisamment clair ou foncé pour contraster efficacement avec elles.

Un excellent moyen rapide de vérifier votre contraste (et de le voir en action) consiste à convertir votre affichage en niveaux de gris, ce qui supprime la teinte de l’équation et ne vous montre que la valeur. Si vous ne pouvez pas facilement lire le texte ou comprendre la mise en page lorsqu’il est en niveaux de gris, il y a de fortes chances que vous ayez un problème d’accessibilité des couleurs qui doit être résolu.

Communiquer des informations via la couleur

Un autre aspect important de l’accessibilité et de la couleur est de s’assurer que vous êtes ne communiquant aucune information uniquement par la couleur. Il s’agit malheureusement d’un piège dangereusement facile à tomber, en particulier avec des éléments tels que les formulaires, la visualisation des données et les boîtes de dialogue de confirmation/annulation.

En fait, regardons quelques formulaires pour voir un exemple. Combien de fois avez-vous vu un formulaire qui change la couleur de la bordure d’un élément d’entrée en rouge afin de signifier l’échec de la validation ? Ce n’est pas une si mauvaise chose à faire … tant que vous
aussi assurez-vous d’inclure une sorte d’icône, de texte ou un autre élément pour indiquer à l’utilisateur que quelque chose ne va pas. Si vous comptez uniquement sur la couleur de la bordure rouge, un grand pourcentage de vos utilisateurs auront du mal à comprendre pourquoi leur formulaire ne sera pas soumis.

Mauvais exemple

Bon exemple

Thématisation

De nos jours, il devient de plus en plus populaire d’offrir plusieurs options de thème dans votre application et de permettre à vos utilisateurs de choisir celui qu’ils préfèrent. Presque toutes les applications incluent désormais des thèmes clairs et sombres, mais certaines vont au-delà pour proposer toutes sortes de palettes de couleurs ! Ce n’est pas seulement une touche agréable pour vos utilisateurs, mais cela peut aussi être un outil d’accessibilité pour eux.

Si vous utilisez l’interface utilisateur de Kendo, vous avez également accès au Échantillon de thème Ocean Blue, spécialement conçu pour l’accessibilité. Alors que les composants de l’interface utilisateur Telerik et Kendo adhèrent déjà à un niveau élevé de conformité en termes de navigation au clavier et de fonctionnalités générales, l’utilisation de cet échantillon contribuera à améliorer encore plus la conformité en matière d’accessibilité en garantissant que la palette de couleurs est également conforme aux WCAG AA – une chose de moins dont vous vous souciez lorsque vous codez !

Mode sombre

Offrir un mode sombre est en fait une très bonne chose que vous pouvez faire pour soutenir vos utilisateurs… même si vous n’y avez peut-être pas pensé comme une fonctionnalité d’accessibilité avant maintenant ! Le mode sombre est important pour les personnes souffrant de migraines, de sensibilité à la lumière, de fatigue oculaire, etc. La plupart des gens le savent déjà, mais n’y voient peut-être pas vraiment une fonctionnalité d’accessibilité réelle, mais je parierais que la majorité des développeurs ont leur éditeur de code défini sur un thème sombre afin de réduire la fatigue oculaire du regard devant leur ordinateur toute la journée.

Cependant, le mode sombre (et d’autres thèmes de couleurs alternatifs) sont souvent oubliés lorsque vous exécutez des vérifications d’accessibilité. Pouvez-vous vraiment garantir que votre contraste de couleur est toujours suffisamment bon en mode sombre ou que votre surbrillance de mise au point est toujours clairement visible ? Il ne suffit pas d’être uniquement accessible dans le thème par défaut ! Si vous proposez plusieurs thèmes de couleurs mais qu’un seul d’entre eux est accessible… alors vous n’offrez pas vraiment plusieurs thèmes de couleurs à tout le monde.

Thèmes à contraste élevé

Une autre chose à considérer est les thèmes à contraste élevé. Vous les avez peut-être déjà vus auparavant; ils utilisent généralement une couleur de fond noire pure, puis des couleurs néon pour le reste de la palette. Vous pourriez le trouver visuellement discordant ou désagréable, mais l’agrément n’est pas le but, c’est purement un exercice de lisibilité. L’exemple ici est l’un des thèmes à contraste élevé du système d’exploitation Windows, et vous pouvez voir que les couleurs qu’ils ont choisies se détachent nettement du fond noir. Si vous créez des thèmes de couleurs pour une interface utilisateur d’application, il vaut la peine d’envisager d’ajouter un thème comme celui-ci en plus des thèmes standard que vous prévoyez d’inclure.

Conclusion

Une fois que nous reconnaissons la réalité que l’accessibilité est une partie requise de la fonctionnalité complète du produit, cette vérité peut éclairer chaque décision que nous prenons concernant la planification, la conception, le développement et les tests. Travailler en tant que développeur, par nature, implique d’apprendre constamment de nouvelles choses et d’ajuster notre façon de penser les logiciels et le Web. Plus vous en apprendrez sur l’accessibilité et commencerez à mettre en œuvre ces connaissances dans votre travail, plus vos utilisateurs en bénéficieront !