Aujourd'hui, le besoin pour les concepteurs de rendre les interfaces accessibles à absolument tous les utilisateurs augmente. Naturellement, il est très important d'adapter les utilisateurs handicapés à l'utilisation de telles interfaces, mais en même temps, suffisamment de mythes naissent concernant les bases de la disponibilité du contraste des couleurs et ces mythes sont perpétués par des personnes mal informées. Ils répètent et relaient souvent ces mythes afin de discréditer le design, ne comprenant pas dans quelles situations l'une ou l'autre norme de contraste de couleur est appliquée. De plus, ils suggèrent que l'interface n'est pas disponible lorsque le contraste des couleurs est utilisé pour transmettre des informations.
Pour cette raison, les concepteurs se concentrent souvent sur les options d'accessibilité de conception pour les personnes handicapées. Ils induisent les autres en erreur en leur faisant croire que leur interface n'est pas disponible lorsqu'elle répond réellement aux exigences d'accessibilité. Les thèses contenues dans cet article tenteront de démystifier les mythes courants sur la disponibilité du contraste des couleurs.
Mythe numéro 1. Les exigences des WCAG sont toujours optimales
Le Web Content
Accessibility Guide (
WCAG ) est utilisé comme norme pour déterminer le contraste de couleur disponible. Cependant, ces recommandations ne sont pas toujours réalisables. Au lieu de le suivre comme un dogme, vous devez utiliser les directives pour prendre des décisions de conception et ne pas les exécuter aveuglément.
L'un des cas où les normes WCAG ne sont pas applicables dans la pratique est le contraste de la luminosité du texte blanc. Les deux boutons ci-dessous ont un fond bleu, mais l'un a du texte blanc et l'autre est noir. Lorsque vous demandez aux utilisateurs quel bouton est plus facile à lire, la plupart vous diront qu'un bouton avec du texte blanc est plus lisible (
source ). Mais les rapports de contraste des couleurs disent autre chose.
Le rapport de contraste pour le texte noir est de 5,41, ce qui répond à l'exigence WCAG. Cependant, le rapport de contraste pour le texte blanc est de 2,94, ce qui n'est pas un indicateur normal. Conformément aux exigences de contraste, un bouton avec du texte blanc doit être moins lisible, mais plus lisible.
Une étude similaire comparant le texte blanc et noir d'un bouton confirme cette conclusion. Non seulement les utilisateurs ayant une vision normale trouvent le texte blanc plus facile à lire, mais les personnes daltoniennes ont pris la même décision (
source ).
Cette imprécision de contraste semble se produire avec du texte blanc sur un fond bleu et orange. Les rapports de contraste WCAG ne prennent pas toujours en compte le contraste de luminosité élevé du texte blanc. Le blanc est une luminosité pure sans teinte ni saturation, et la luminosité est la forme de contraste la plus forte. Par conséquent, il devient clair pourquoi un bouton avec du texte blanc est plus facile à lire.
La raison pour laquelle le paramètre de contraste n'est pas passé avec du texte blanc est qu'il a une luminosité élevée et est en arrière-plan avec une luminosité élevée. Le texte clair sur un fond clair semble à faible contraste de calcul. Votre conception doit correspondre à ce que les gens voient, pas aux algorithmes de calcul. C'est pourquoi le look du designer joue un rôle important dans la "formule finale".
WCAG est un guide pour aider les concepteurs à sélectionner les bons contrastes de couleurs. Ici, la célèbre expression du fondateur de la discipline de la sémantique générale Alfred Korzybski est applicable - «La carte n'est pas un territoire». Ne confondez pas le modèle de réalité directement avec la réalité elle-même.
Mythe numéro 2. Le texte doit être conforme aux exigences de l'AAA, sinon il est inaccessible
WCAG a différents niveaux de conformité pour la disponibilité. Certains estiment que tout texte doit respecter le plus haut niveau d'exigences (AAA), sinon il ne sera pas disponible pour une partie importante de leurs utilisateurs. Ce concept est incorrect et devient apparent lorsque vous comprenez comment l'exigence AAA a été formée.
L'exigence AAA indique un rapport de contraste de 7: 1 pour compenser la perte de sensibilité au contraste chez les utilisateurs malvoyants (avec une perte de vision de 20/80 ou plus). Beaucoup de ces utilisateurs utilisent des technologies d'assistance dotées de fonctions d'amélioration du contraste. Ils ont besoin de cette technologie car ils ne visualisent pas seulement le contenu sur une seule interface, mais sur plusieurs à la fois. L'exigence AAA ne s'applique qu'aux utilisateurs ayant une perte de vision de 20/80 qui n'utilisent pas de technologies d'assistance, et il y a très peu d'utilisateurs de ce type (
source ).
La perte de vision de 20/80 est rare dans la population générale et affecte principalement les personnes âgées souffrant de maladies oculaires liées à l'âge. L'étude a montré que la vision la plus faible chez l'homme est associée au vieillissement (
source ). Si la plupart de votre base d'utilisateurs est âgée de plus de 70 ans, il est logique de répondre aux exigences AAA et de plus, cela doit être mis en œuvre. Une norme de 70 ans ou plus en est une parce que l'acuité visuelle commence à décliner chez les utilisateurs ayant des yeux sains à cet âge (
source ).
La conformité AA est suffisante pour la plupart des utilisateurs. L'exigence AA est un rapport de contraste de 4,5: 1 pour compenser la perte de sensibilité au contraste des utilisateurs avec une perte de vision de 20/40. L'étude a montré que «la plupart des gens conservent au moins une acuité visuelle (20/40 ou plus) jusqu'à 80 ans» (
source ). Cette conclusion signifie que le respect de l'exigence AA rendra votre texte accessible à la plupart des utilisateurs de l'interface.
Mythe numéro 3. Les composants d'interface ont le même standard de contraste que le texte.
Beaucoup font l'erreur de prendre en charge les composants d'interface dans la même norme de contraste que le texte, bien que leurs normes soient différentes. Les composants de l'interface ont un rapport de contraste de 3: 1 et le texte est de 4,5: 1. Le texte nécessite un contraste plus élevé car les utilisateurs doivent le lire. Les composants d'interface ne nécessitent souvent pas de lecture de texte et ont un standard inférieur (
source ).
Le contraste du texte est affecté par de nombreuses nuances, telles que la taille de la police et l'audace. Les grandes tailles de police (18 pt) et le texte avec un poids de police élevé (14 pt en gras) nécessitent des rapports de contraste inférieurs (
source ). De plus, certains composants d'interface peuvent être exemptés de cette exigence. Avant de lier un composant d'interface ou du texte à une norme de rapport de contraste, assurez-vous de l'appliquer correctement.
Mythe numéro 4. Les boutons inaccessibles et le texte gris ressemblent à des fonctionnalités désactivées
Un autre mythe courant est que le texte gris est un texte inaccessible. Beaucoup de gens pensent que les utilisateurs ne peuvent pas lire le texte gris car il a un faible contraste. Parfois, cela peut être vrai, mais parfois c'est une fausse hypothèse. Par exemple, le bouton ci-dessous a du texte gris, bien que certains utilisateurs pensent qu'il n'est pas disponible. Cependant, son lancement via le vérificateur de contraste montre qu'il est non seulement conforme à la norme AA, mais dépasse également de manière significative la norme.
Un autre mythe que vous pouvez entendre est que le bouton gris n'est pas disponible car il ne répond pas à la norme du rapport de contraste. Il s'avère que les critères de réussite des boutons ne nécessitent pas de bordure visuelle indiquant la zone d'impact. Si le bouton avec le texte a un cadre, il n'y a aucune exigence de contraste à l'exception du contraste du texte (
source ). Ainsi, le bouton gris, que la plupart considèrent comme inaccessible, répond à l'exigence de contraste.
Ce critère de réussite signifie également que les icônes à côté des boutons n'ont pas d'exigence de contraste si l'étiquette de texte correspond à un rapport de contraste de 4,5: 1. Cependant, si l'icône n'a pas d'étiquette de texte, une exigence de rapport de contraste de 3: 1 s'applique à l'icône.
Il y a aussi le mythe selon lequel les boutons gris semblent désactivés, ce qui est souvent répandu par des observateurs biaisés qui ne comprennent pas le but correct des composants inactifs. Les boutons désactivés sont indiqués par un manque de contraste au-dessus de l'étiquette de texte. Lorsqu'un bouton est difficile à lire, les utilisateurs ne s'en inquiètent pas, ce qui est essentiellement l'objectif d'un bouton désactivé. Sans parler du fait que l'exigence de contraste ne s'applique pas aux composants inactifs.
Mythe numéro 5. Les personnes daltoniennes ne peuvent pas distinguer les couleurs contrastées
Une hypothèse courante est que si une conception utilise un contraste de couleurs pour transmettre des informations, les personnes daltoniennes ne remarqueront pas la différence. La tonalité et le contraste des couleurs sont deux dimensions différentes. Les utilisateurs daltoniens ont du mal à distinguer certaines nuances, mais ils n'ont pas de difficulté à percevoir les différences de contrastes de couleurs (
source ).
Par exemple, de nombreuses personnes pensent que les boutons ci-dessous ne sont pas disponibles pour les daltoniens, car il utilise le contraste des couleurs pour indiquer différents états. Mais l'essentiel est que les personnes daltoniennes peuvent distinguer très clairement les couleurs contrastées. Les boutons n'utilisent qu'une seule nuance de couleur sans les autres concurrents et ont un contraste suffisant.
En utilisant le simulateur de daltonisme, vous pouvez simuler la perception des couleurs des personnes daltoniennes et ce qu'elles voient. Les utilisateurs avec un déficit de couleur rouge-vert et un déficit de couleur bleu-jaune voient facilement la différence de contraste de couleur.
Les utilisateurs daltoniens peuvent à peine remarquer le contraste des couleurs lorsque le vert et le rouge ont presque la même obscurité (
source ). L'exemple ci-dessous montre quelle couleur les utilisateurs daltoniens verront si les boutons sont rouges et verts avec la même obscurité.
Si vous utilisez des tons de couleurs concurrents pour distinguer les états, vous avez besoin d'un autre repère visuel que la couleur. Mais si vous utilisez le contraste des couleurs uniquement pour distinguer les états, il est susceptible d'être acceptable et accessible pour les daltoniens.
Il existe différents types de daltonisme, mais ceux sur lesquels vous devez vous concentrer le plus sont le rouge-vert. Le daltonisme rouge-vert affecte plus de 99% de tous les daltoniens dans le monde (
source ). Il existe plusieurs simulateurs daltoniens que vous pouvez utiliser pour les tests, par exemple, cette extension pour Google Chrome est
Colorblindly .
Mythe numéro 6. Un signal couleur ne suffit pas à lui seul pour transmettre des informations
Ce mythe est probablement celui dans lequel les designers se trompent le plus souvent. Ils se réfèrent souvent à l'exigence
«Utilisation de la couleur» , ne comprenant pas quand cette norme est appliquée. Il y a des nuances dans ces normes que vous devez comprendre avant de commencer à les utiliser.
L'exigence d'accessibilité stipule que «la couleur ne doit pas être utilisée comme seul moyen visuel pour transmettre des informations, indiquer une action ou distinguer un élément». Cependant, cette norme s'applique uniquement lorsque des couleurs spécifiques sont affectées de valeurs spécifiques pour informer l'utilisateur (
source ). En d'autres termes, si vous utilisez des différences de couleur pour transmettre des informations, vous avez besoin d'un signal supplémentaire. Mais si vous utilisez le contraste pour transmettre des informations, vous n'avez pas besoin d'un signal supplémentaire si la différence de contraste est suffisamment élevée.
Par exemple, les
boutons à bascule ci-dessous utilisent du bleu pour indiquer un état actif. Mais il n'y a pas de signification particulière pour le bleu. L'état actif est transmis par le contraste des couleurs et non par la dominante des couleurs.
La dominante de couleur pour l'état actif est arbitraire. Vous pouvez utiliser n'importe quelle autre teinte de couleur, et cela suffira si elle maintient un niveau de contraste élevé par rapport à un état inactif. Par conséquent, l'exigence «Utilisation de la couleur» ne s'applique pas à ce scénario.
Un exemple dans lequel la couleur a un objectif spécifique est un exemple d'état d'erreur dans les champs d'un formulaire de saisie. Le rouge est souvent utilisé pour indiquer une erreur dans un champ de texte. Dans ce cas, le rouge ne suffit pas pour indiquer l'état d'erreur, car les personnes daltoniennes ne le verront pas. Le rouge leur apparaîtra noir. Par conséquent, vous avez besoin d'un signal supplémentaire, tel que du texte ou une icône, pour indiquer l'état de l'erreur.
Un autre exemple est l'utilisation de la couleur pour indiquer l'état d'un système sur une page. Des nuances de couleur de vert et de rouge sont souvent utilisées pour indiquer la gravité des messages système. Dans ce cas, l'exigence d '«utilisation de la couleur» s'applique car il existe un objectif spécifique pour les nuances de couleur. Des icônes sont nécessaires ici pour aider les personnes daltoniennes à distinguer chacun des états du système.
Le contraste des couleurs n'est pas toujours le seul signal lorsqu'il s'agit de conditions. La profondeur visuelle est également un indice que les utilisateurs ressentent. Cela se produit lorsque des objets contrastant avec l'arrière-plan apparaissent plus proches et dominent, tandis que des objets sans contraste apparaissent encore plus loin et dominent. Le bouton bleu dans cet exemple semble le plus proche des utilisateurs. En conséquence, l'accent et sa domination signifient un état actif.
C'est cette manipulation du contraste avec l'arrière-plan, qui crée de la profondeur dans les boutons et permet aux utilisateurs de distinguer l'état actif. Si les deux boutons avaient le même niveau de contraste, les utilisateurs ne pouvaient pas percevoir la profondeur comme un signal visuel.
Mythe 7: le design abordable répond aux besoins de chaque utilisateur de la planète.
Dans un monde idéal, tout designer souhaite satisfaire les besoins de tout utilisateur. Cependant, c'est une situation très idéale, et donc inaccessible. Même si vous utilisez pleinement WCAG, il y aura toujours un utilisateur qui trouvera votre conception difficile à travers le prisme de sa perception du design par la vision.
Au lieu de chercher un idéal basé sur un fantasme inaccessible, efforcez-vous d'un idéal basé sur une réalité réalisable. La réalité est qu'une conception abordable ne peut pas satisfaire les besoins de chaque utilisateur, mais elle peut satisfaire les besoins du plus grand nombre possible d'utilisateurs.
Comprendre cette vérité signifie reconnaître le fait qu'une minorité d'utilisateurs n'obtiendra pas la même bonne expérience que la plupart. Mais, heureusement pour la minorité, il existe des technologies d'assistance avec des modes à contraste élevé. Les concepteurs qui comprennent vraiment l'accessibilité s'efforceront d'atteindre un idéal réaliste et non pas fantastique.
Les nuances de la disponibilité du contraste des couleurs
L'accessibilité doit toujours être une priorité de conception pour les utilisateurs. Les recommandations des WCAG sont un outil efficace pour vous aider à créer une conception abordable du plus haut niveau. Les mythes décrits ci-dessus ne sont pas déclenchés par les directives des WCAG. Ils sont causés par des personnes qui interprètent, dénaturent et appliquent mal les directives.
Comprendre les nuances de la disponibilité du contraste des couleurs vous aidera à répondre exactement aux normes WCAG. Si d'autres personnes commencent soudainement à projeter ces mythes sur la disponibilité du contraste des couleurs sur votre conception, vous pouvez toujours les corriger. Vous resterez fidèle à la simplicité visuelle et à l'esthétique, tout en la conciliant avec l'accessibilité. Et surtout, le résultat sera une interface significative qui satisfera presque tous ses utilisateurs.