Les sites Web aux couleurs accessibles: que sont-ils et comment pouvons-nous les maîtriser?
Un de nos points focaux ici à Maze est d’être inclusif; et l’accessibilité aux couleurs nous aide à atteindre cet objectif. L’ajout de couleurs accessibles dans le processus UI / UX de notre site Web n’aide pas seulement les personnes à difficultés permanentes, mais également les personnes qui ont des limitations temporaires et situationnelles.
Avec la possibilité de rendre vos produits et services accessibles à tous, indépendamment de toute difficulté visuelle, vocale, auditive, physique ou cognitive, avoir une conception inclusive devrait être considéré comme une nécessité plutôt qu’un luxe en 2021 et au-delà.
La déficience visuelle des couleurs (MCV) peut être génétique ou résulter de plusieurs maladies comme la sclérose en plaques (SEP), le diabète ou même due à des médicaments ou au vieillissement.
“Il y a environ 300 millions de personnes dans le monde souffrant de daltonisme, soit presque le même nombre de personnes que l’ensemble de la population des États-Unis!”
– Color Blind Awareness
MEM est le moyen le plus simple et rapide de lancer votre site Web de commerce électronique. 0% commission. Panneau de Configuration Avancé. Application Mobile et plus. Réservez votre démo gratuite maintenant!
Table de matières
- Les 4 types d’outils de vérification de la déficience de la vision des couleurs (MCV) et du simulateur
- Importance juridique en matière d’accessibilité
- Comment nos créations peuvent-elles être accessibles en couleur?
1. Assurez-vous d’avoir un contraste suffisant
2. Ajouter des textures et des motifs
3. Utiliser les états de mise au point - Résumé
Les 4 types d’outils de vérification de la déficience de la vision des couleurs (MCV) et du simulateur:
Source: https://www.drtavel.com/blog/perks-being-colorblind/
Comprendre les types de MCV vous aidera à mieux combiner les couleurs. L’image ci-dessous est un exemple de la façon dont les personnes atteintes d’un déficit en protanopie voient les couleurs:
| Mauvaises Combinaisons de Couleurs | Ce qu’une personne à vision normale voit | Ce qu’une personne atteinte de Protanopie voit |
|---|---|---|
| Rouge avec Vert |  |  |
| Vert Clair avec Jaune |  |  |
| Bleu avec Violet |  |  |
| Bleu avec Gris |  |  |
| Vert avec Gris |  |  |
| Vert avec Bleu |  |  |
| Vert avec Marron |  |  |
| Vert avec Noir |  |  |
Le tableau ci-dessus contient de mauvais exemples de combinaisons de couleurs. Les personnes atteintes de Protanopie auront des difficultés à différencier une couleur de l’autre.
Le tableau ci-dessous est un meilleur exemple de solution qui peut les aider à détecter la différence de chaque couleur.
| Meilleures Combinaisons de Couleurs | Ce qu’une personne à vision normale voit | Ce qu’une personne atteinte de Protanopie voit |
|---|---|---|
| Orange avec Bleu |  |  |
| Cyan avec Jaune |  |  |
| Violet avec Jaune |  |  |
| Bleu avec Magenta |  |  |
Afin de réussir à atteindre l’accessibilité des couleurs dans vos conception, vous devez voir dans les yeux des personnes atteintes de MCV. Vous trouverez ci-dessous la liste des outils et des simulateurs qui peuvent vous aider à y parvenir:
Importance juridique de l’utilisation de l’accessibilité des couleurs
En plus de vous permettre de rendre votre site Web et vos produits ou services accessibles à tous, ce qui est une bonne chose d’un point de vue éthique, vous devez savoir qu’il existe plusieurs implications juridiques potentielles pour les entreprises qui ne respectent pas les lois relatives à l’accessibilité.
Voici les normes d’accessibilité aux États-Unis, qui devraient vous donner une idée de vos obligations en matière d’inclusivité:
- Section 508. Cette conformité exige que votre site doit être accessible si vous êtes ou créez des sites pour le compte d’une agence fédérale.
- Norme internationale, le W3C est essentiellement l’étalon-or et comprend un large éventail de recommandations pour rendre le contenu Web plus accessible.
Comment nos créations peuvent-elles être accessibles en couleur?
Vous pouvez prendre plusieurs mesures en tant que concepteur Web, développeur ou même en tant que propriétaire d’entreprise avec certaines capacités techniques pour vous assurer que votre produit est aux couleurs accessibles. Ceux-ci inclus:
1. Assurez-vous d’avoir un contraste suffisant
Votre rapport de contraste entre l’arrière-plan et le texte doit être d’au moins 4: 5: 1 pour le rendre accessible à tous. Assurez-vous de vous concentrer sur chaque aspect de votre site et en particulier sur les principaux outils promotionnels et de navigation tels que les boutons, les cartes et les bannières.
En ce qui concerne les normes W3C, le niveau minimum de contraste est AA.
AA (Conformité d’acceptation) signifie que le produit est utilisable et clair pour la plupart des personnes, à difficultés ou non.
Les motifs contrastés sont principalement utilisés pour les boutons, les tiroirs de navigation et la couleur de la page d’arrière-plan. Il y a 2 choses à prendre en compte lors de la vérification des couleurs de contraste:
- La taille de police normale est de 16 px, ce qui est considéré comme la taille minimale du texte du corps.
- La grande taille du texte peut être considérée comme « 18 pixels mais avec un poids en gras » ou « 24 pixels avec un poids normal ».
Niveau AA: la norme minimale
Petit rapport de contraste du texte de 4: 5: 1 ou plus Grand 3: 1 ou plus
Niveau AAA: le standard amélioré
Petit texte 7: 1 ou plus Grand texte 4: 5: 1 ou plus
Vous trouverez ci-dessous quelques vérificateurs de contraste que nous utilisons à Maze lors de la conception:
- Vérificateur de contraste WCAG (Web).
- Colorable (Web).
- Colorsafe (Web).
- Stark (Sketch et Adobe XD Plugin).
Voici un exemple tiré de WCAG Contrast Checker
L’erreur que les concepteurs Web avaient l’habitude de faire était de réduire le contraste du texte en utilisant le gris moyen sur un fond gris plus foncé, pensant qu’ils le rendaient moins encombré.
Mais avec le temps, et avec l’aide de la recherche orientée utilisateur, on comprend que l’important est de rendre le texte lisible et pas seulement comme un élément de décoration. Dans l’image ci-dessus, la première bannière contient du texte avec un faible contraste qui le rend plus difficile à lire, même si les utilisateurs peuvent voir le texte. Cet effort que l’utilisateur fait pour lire le texte peut augmenter la tension cognitive. Il peut également créer de faux signaux et rendre certains textes inactifs.
Les options que vous affichez avec un faible contraste sont moins visibles, comme ces boutons de fermeture à faible contraste «X» sur le modal, que les utilisateurs ne peuvent pas trouver.
Ne diminuez donc pas l’opacité pour obtenir une belle apparence. N’oubliez pas que vous ne devez pas viser une belle apparence. Fournir le besoin de l’utilisateur est la chose sur laquelle vous voulez vous concentrer.
2. Ajoutez des textures et des motifs
Lorsqu’il s’agit d’afficher des informations dans des graphes ou des tableaux, ne vous fiez pas uniquement à la couleur pour communiquer votre message. Au lieu de cela, donnez aux utilisateurs le choix d’ajouter de la texture ou des motifs afin qu’ils puissent clairement distinguer chaque élément de données.
En d’autres termes, le contraste des couleurs et les tailles de police ne sont pas les seuls trucs qui aident à avoir des conceptions inclusives. Il existe des éléments tels que des icônes, des formes et des motifs, qui peuvent vous aider à rendre votre conception plus accessible.
Prenons Trello comme exemple. Trello a utilisé une interface contenant le bouton de mode en conformité avec les daltoniens pour les étiquettes.
Dans les 2 images ci-dessus, vous pouvez voir qu’il y a plusieurs étiquettes qui sont positionnées de telle sorte qu’il est parfois difficile d’éviter la mauvaise combinaison de couleurs. C’est pourquoi Trello a ajouté une option de motifs pour les personnes présentant un déficit de couleur. L’image ci-dessous est un exemple de la façon dont un utilisateur peut activer ou désactiver le mode conformité avec daltoniens dans Trello.
L’ajout de motifs, d’îcones ou même de formes peut créer une marque unique qui permettra de facilement distinguer un élément particulier des autres
3. Utiliser les états de mise au point
Si vous avez déjà parcouru un site Web, vous avez probablement remarqué les contours qui apparaissent autour des boutons, des liens et des champs de saisie. Ceux-ci sont connus sous le nom d’états de mise au point ou “focus state”.
Essentiellement un composant de votre site Web qui est crucial pour trouver un chemin lorsque vous utilisez un clavier pour naviguer, le style d’état de mise au point que vous choisissez peut être personnalisé pour correspondre à l’interface utilisateur de votre site.
Vous trouverez ci-dessous un exemple de la façon dont Whatsapp et Messenger ont créé leur état de mise au point.
| Exemples | Ce qu’une personne à vision normale voit | Ce qu’une personne atteinte d’Achromatopsie voit |
|---|---|---|
 |  |  |
 |  |  |
Comme vous pouvez le voir, il est important pour chaque utilisateur d’avoir différents représentants d’icônes pour chaque phase. Cependant, la combinaison des couleurs et des icônes doit être conçue de manière à permettre aux personnes ayant une déficience visuelle de les différencier facilement. Messenger a ajouté 4 états différents qui semblent distincts les uns des autres et peuvent être faciles à comprendre pour les personnes atteintes de MCV.
Un fait amusant à savoir sur Facebook et Messenger est que, selon The New Yorker, la raison pour laquelle Facebook utilise un jeu de couleurs bleu est que Mark Zuckerberg a un déficit de couleur rouge-vert. Cela signifie que le bleu est la couleur que Mark peut voir le mieux.
La conception des états d’un bouton est un autre exemple. Vous pouvez utiliser de nombreuses méthodes pour permettre à l’utilisateur de différencier plus facilement les boutons principaux et secondaires; comme utiliser des bordures, une taille ou un poids de police différents, et des icônes.
| État | Non accessible | Accessible |
|---|---|---|
| Vision Normale |  |  |
| Vision à Deutéranopie |  |  |
N’oubliez pas qu’il vaut mieux souligner vos liens s’ils n’ont pas le style de conception de bouton.
Résumé
Comme évoqué brièvement ci-dessus, l’accessibilité des couleurs est nécessaire pour garantir que les personnes à difficultés visuelles et qui interprètent différemment la couleur et le contraste puissent consommer le contenu de votre site Web comme tout autre utilisateur.
Par exemple, si un utilisateur a un daltonisme rouge-vert et que vous avez une image de produit verte sur fond rouge, il ne pourra pas voir votre produit avec une clarté suffisante.
Par conséquent, pour rendre votre site Web inclusif pour tous, vous devez vous assurer de créer des combinaisons de couleurs offrant un contraste suffisant pour que tout votre contenu se distingue clairement de la page environnante.
La conception avec un contraste suffisant peut être fait et est un impératif. Voici quelques approches alternatives pour gérer le texte à faible contraste:
- Ajustez la combinaison de couleurs entre le premier plan et l’arrière-plan.
- Utilisez le vérificateur de contraste de couleur pour vous guider.
- Parfois, une légère différence change tout. Si vous ne pouvez pas modifier les couleurs, augmentez la taille de la police pour qu’elle puisse être lue confortablement.
- La réponse à chaque problème de designing n’est pas seulement “d’agrandir”.
- Si une conception utilise du texte à faible contraste pour éviter d’être en compétition avec autres éléments sur la page, vous pouvez modifier la position des éléments pour réduire et augmenter le contraste.
- Et enfin, visitez l’option de réduire la densité d’informations sur la page. Si le design utilise du gris clair sur un fond blanc car il y a tellement d’autres éléments sur la page, peut-être que certains d’eux n’ont pas besoin d’y être.
Il s’agit de ce qu’il est important que vos utilisateurs sachent pour atteindre leur objectif. Le Web est déjà un parcours du combattant à bien d’égards. Entre éviter les superpositions de coupons et les murs de connexion ou les textes trop petits ou extraire des animations, les utilisateurs ont beaucoup à faire. Avoir un texte suffisamment contrasté est un moyen facile de leur accorder une pause.
Avez-vous besoin d’aide pour créer un site Web aux couleurs accessibles? Ou peut-être aimeriez-vous avoir plus de techniques éprouvées pour rendre votre site existant aux couleurs plus accessibles? Quoi qu’il en soit, à Maze, nous pouvons vous aider à créer un site Web performant et accessible à tous.
Contactez-nous dès aujourd’hui ou réservez une consultation gratuite et découvrez comment nous pouvons vous aider et votre entreprise à générer des ventes en ligne sans faire exploser votre budget.