Mes couleurs sont-elles accessibles ?

Dans cet article, vous aurez une compréhension de l'accessibilité des couleurs et des outils qui vous aideront à prendre de bonnes décisions en matière de contraste des couleurs.

Table des matières

• Qu'est-ce que le contraste des couleurs
• Qu'est-ce que l'accessibilité des couleurs
• Comment améliorer l'accessibilité des couleurs
• Outils pour vérifier manuellement l'accessibilité de vos couleurs

Le contraste des couleurs est mesuré comme un rapport de deux couleurs. La différence de « luminance » ou de luminosité de deux couleurs est appelée contraste de couleur.

Nous sommes principalement concernés par la distinction entre le contenu principal et son arrière-plan dans une application Web typique (la différence des textes ou des boutons en arrière-plan). Le texte, les icônes, les liens, les éléments de formulaire, les boutons et autres contrôles personnalisés sont des composants communs du contenu principal

Ainsi, si le contraste est trop faible, de nombreux utilisateurs seront incapables de faire la distinction entre le contenu de premier plan et d'arrière-plan.

Lors de la conception, vous devez comprendre qu'une partie particulière de votre utilisateur peut avoir des défauts oculaires, y compris les daltoniens ou les aveugles qui utilisent le brail ou l'assistance audio (ce qui entraîne l'utilisation de texte alternatif dans les images.

Par conséquent, le sujet de l'accessibilité est important pour la conception, car tout ce que vous concevez doit être suffisamment inclusif pour s'adapter à tous ceux qui ont un défaut. Comme il serait impoli/très injuste de créer une application ou un site uniquement pour les personnes ayant une vision parfaite.

Le daltonisme ne signifie pas seulement que les gens ne voient qu'en noir et blanc, plus de 99 % des daltoniens peuvent voir la couleur. Il existe différents types de daltonisme ;

• Deutéromalie ; rend tout fané
• protanopie ; qui rendent les choses vertes
• Verdâtre; faire en sorte que les choses aient des tons roses
• Monochromatie ; souffrez de daltonisme total, les choses sont en monochrome

https://www.boredpanda.com/different-types-color-blindness-photos/?utm_source=uxdesign&utm_medium=referral&utm_campaign=organic

Qu'est-ce que l'accessibilité des couleurs

WCAG {directive pour l'accessibilité des couleurs du site Web} est considéré comme la référence en matière d'accessibilité des sites Web créée par le consortium World Wide Web (w3c). Il s'agit essentiellement de la référence en matière de meilleures pratiques d'accessibilité Web.

Les normes WCAG comportent 12 à 13 lignes directrices. Les lignes directrices sont organisées selon 4 principes : perceptibles, exploitables, compréhensibles et robustes .

Pour chaque ligne directrice, il existe des critères de réussite testables . Les critères de réussite se situent à trois niveaux : A, AA et AAA .

Les critères de réussite déterminent la « conformité » WCAG. En d'autres termes, pour répondre aux WCAG, le contenu doit répondre aux critères de réussite. Les détails sont dans la section Conformité des WCAG .

Voir Présentation des directives pour l'accessibilité du contenu Web (WCAG)

En plus d'être une bonne pratique éthique, le non-respect des exigences réglementaires en matière d'accessibilité peut entraîner des conséquences juridiques.

En 2017, les plaignants ont déposé au moins 814 poursuites fédérales concernant des sites Web prétendument inaccessibles, y compris plusieurs recours collectifs.

article 508 de la loi de 1973 sur la réhabilitation ;

Déclare que lorsque les agences développent, achètent ou entretiennent des technologies de l'information et de la communication (TIC), elles sont accessibles aux personnes handicapées. .

Le W3C décrit ses lignes directrices pour l'accessibilité du Web dans les WCAG 2.1 .

Comment améliorer l'accessibilité des couleurs

1. Ajoutez suffisamment de contraste :

2. Utiliser les bons outils :

Comment vérifiez-vous cela, vous pouvez demander, les outils suivants peuvent être d'une grande aide pour accéder et ajuster le contraste des couleurs de l'arrière-plan et du contenu principal

• Colorable
• A11y pour les utilisateurs du logiciel open source Figma ; a11y est un excellent plugin pour le plugin d'accessibilité des couleurs Figma.
• Phare qui est une extension chromée pour détecter ce qui ne va pas avec le contraste des couleurs du site.
• https://colourcontrast.cc/tient compte de la taille et de la couleur du texte

Ne comptez pas uniquement sur les couleurs pour transmettre des messages efficaces, utilisez également les icônes correctes pour indiquer clairement ce qui se passe comme dans les états d'erreur.

L'image ci-dessous est une représentation d'image qui explique le mélange des couleurs et une bonne iconographie pour faire passer un message.

3. Documenter et socialiser le système de couleurs.

Un système de conception aidera à créer une référence en cas de besoin afin que tout le monde soit clair sur l'utilisation, ce qui réduit la confusion.

https://www.w3.org/TR/WCAG21/pour vous donner plus de détails sur l'accessibilité des couleurs.

Pour plus de détails, Web Content Accessibility Guidelines (WCAG) 2.1 (w3.org)