Utilisation d'un contraste de couleurs élevé pour une conception plus accessible
Un taux de rebond élevé est souvent causé par la faible accessibilité visuelle d'un site Web. Lorsque les polices sont trop petites, ou qu’elles sont à peine lisibles, qu’il ya trop de distractions ou qu’il n’ya pas assez d’espace, beaucoup de gens quitter le site sans hésiter.
L’un des motifs les plus fréquents d’abandon précoce est l’insuffisance de sélection jeux de couleurs qui diminuent la lisibilité du contenu.
Selon les statistiques de l'OMS, il y a environ 285 millions de déficients visuels dans le monde, dont beaucoup sont partiellement ou totalement daltoniens. Les personnes ayant une déficience visuelle voient les couleurs différemment, donc éviter les contrastes de couleurs faibles dans nos conceptions est inévitable si nous voulons fournir à nos clients un site Web accessible et convivial.
Normes Web pour le contraste des couleurs
Rapport de contraste de couleur mesure la différence de contraste entre deux couleurs. Plus la valeur est élevée, plus il est facile de distinguer l'objet (texte, image, graphique) au premier plan de l'arrière-plan.
Les couleurs peuvent contraster de nombreuses manières, comme dans teinte, valeur et saturation. Le rapport de contraste des couleurs est calculé à l'aide d'une formule fournie par W3C, la principale organisation internationale de normalisation pour le World Wide Web..
Il peut prendre une valeur entre 1: 1 (pas de contraste du tout, le premier plan et le fond ont la même couleur) et 21: 1 (le contraste maximum qui n'existe qu'entre noir et blanc).
Les dernières directives sur l'accessibilité aux contenus Web (WCAG) 2.0 du W3C fournissent aux développeurs Web et aux créateurs de contenu des points de repère pour le minimum (niveau AA) et la valeur améliorée (niveau AAA) du rapport de contraste de couleur acceptable.
Le niveau AA requiert au moins Ratio 4.5: 1 pour le texte normal, et 3: 1 pour les gros textes. Il est beaucoup plus facile de lire un texte volumineux comme des sous-titres, c'est pourquoi il nécessite un contraste de couleur plus faible.
Si vous souhaitez atteindre le niveau amélioré AAA, vous devez concevoir votre jeu de couleurs avec le plus grand soin, car il nécessite au minimum Rapport de contraste de 7: 1 pour le texte normal, et 4,5: 1 pour les grands. Si un texte fait partie d'un logo ou d'un nom de marque, il n'y a pas d'exigence de contraste de couleur minimum au niveau WCAG..
Nous ne pouvons appeler un site Web accessible visuellement que si le le rapport de contraste de couleur entre chaque objet de premier plan et son arrière-plan atteint au moins le niveau AA.
Avantages du rapport de contraste de couleur élevé
En assurant une meilleure lisibilité, vous engagez non seulement des utilisateurs malvoyants, mais aussi les personnes qui lisent votre contenu sur de petits écrans comme sur un smartphone ou une smartwatch, parmi mauvaises conditions d'éclairage, et sur moniteurs de qualité inférieure.
De plus, les gens lisent plus vite quand le contraste entre le texte et l'arrière-plan est élevé; il leur faudra donc probablement plus de temps pour s'ennuyer avec le contenu du site..
Si vous craignez que l'application d'un rapport de contraste élevé ait un impact négatif sur l'esthétique de votre conception, vous devez consulter le projet Web Contrast Rebellion qui prouve, à l'aide d'exemples concrets, qu'il est toujours possible de respecter les règles de rapport de contraste élevé. dans des designs attrayants et cool.
Applications pour vérifier le contraste des couleurs
Il existe de nombreux excellents outils gratuits sur le Web qui peuvent aider les concepteurs à vérifier le rapport de contraste des couleurs de leur site Web..
Le moyen le plus simple de tester le contraste des couleurs de votre conception consiste à sélectionner les couleurs principales avec Photoshop ou une extension de navigateur appropriée, comme celle-ci pour Firefox, et de copier les valeurs dans l'une des applications ci-dessous..
La chose la plus importante à retenir est que vous devez toujours comparer la couleur de premier plan telle que la couleur du texte à sa zone environnante (la couleur de fond).
1. Vérificateur de contraste de couleur WebAim
WebAim (Web Accessibility In Mind) est une organisation qui favorise l'accessibilité Web et offre aux développeurs un vérificateur de contraste de couleurs simple mais fiable parmi de nombreux autres outils d'accessibilité, tels que Wave, une application d'évaluation de l'accessibilité générale qui peut vous aider. évaluer rapidement les problèmes d'accessibilité de votre site.
Le vérificateur de contraste des couleurs de WebAim vous indique si vos couleurs réussissent les tests WCAG AA et AAA, à la fois pour les textes normaux et grands.
2. Vérification du contraste des couleurs Snook
Jonathan Snook, qui travaille actuellement en tant que principal développeur front-end chez Shopify, héberge son outil pratique de vérification du contraste des couleurs depuis plus de dix ans. L'application de Snook vous permet de changer les valeurs HSL et RGB de la couleur de premier plan et d’arrière-plan une à une en utilisant curseurs pratiques jusqu'à ce que vous obteniez un résultat conforme aux critères de référence des WCAG 2.0.
CheckMyColours
CheckMyColours créé par Giovanni Scala vous permet de vérifier le rapport de contraste des couleurs de toutes les combinaisons de couleurs avant-plan / arrière-plan. sur un site web en direct.
Il calcule rapport de contraste de luminosité, différence de luminosité, et différence de couleur, et vous fournit un rapport complet sur les résultats. Le rapport CheckMyColours peut considérablement vous aider à comprendre comment vous pouvez améliorer l'accessibilité visuelle de votre site..
Color Scheme Designer
Color Scheme Designer n’est pas particulièrement un vérificateur de contraste de couleur, mais un outil de concevoir des palettes de couleurs complètes.
Nous l'incluons dans cette collection, car il dispose d'une fonctionnalité qui vous permet de voir comment votre jeu de couleurs est perçu par des personnes présentant différents types de déficiences visuelles. Vous pouvez tester vos couleurs pour le daltonisme, la protanopie, la deutéranopie et de nombreux autres troubles de la vision. L'application dispose d'une version plus récente appelée Paletton qui permet même une simulation de vision plus sophistiquée (vous pouvez également tester des éléments tels qu'un affichage LED médiocre ou un affichage CRT faible).
Le W3C vous fournit également une vaste liste d'outils d'évaluation de l'accessibilité Web où vous pouvez trouver de nombreux autres outils de contraste de couleurs tels que celui-ci..
Conseils pour créer des sites Web accessibles visuellement
Si vous souhaitez créer un site Web accessible visuellement, c'est toujours une bonne idée de: évitez d'utiliser la couleur seule pour transmettre une fonctionnalité ou un sens. Les icônes qui changent de couleur en fonction de leur état actuel en sont des exemples typiques..
Si c'est possible, toujours concevoir des repères visuels supplémentaires qui aident les personnes qui voient les couleurs différemment dans la compréhension de la fonctionnalité.
N'oubliez jamais de porter une attention particulière au contraste des couleurs des boutons, des liens et des menus, car ce sont les moyens de navigation sur votre site. Si les utilisateurs ne peuvent pas naviguer facilement sur votre site, vous les perdrez rapidement.. Couleurs accessibles pour les boutons d'appel à l'action sont également crucial pour de bons taux de conversion.
Il est recommandé de tester le rapport de contraste des couleurs le plus tôt possible dans le processus de conception, car il sera difficile de convaincre votre client de modifier le schéma de couleurs du site ultérieurement au cours du processus de conception..
À lire maintenant: Approche pratique pour choisir le schéma de couleurs d'un site Web
