Accessibilité: Contraste de couleur – Blogs parfaits

Importance

Pour les personnes handicapées, la consommation de contenu Web peut être un défi quotidien. Le Web est une ressource de plus en plus importante dans la vie aujourd'hui. En rendant votre site Web accessible, vous vous assurez que tous vos utilisateurs, y compris les personnes handicapées, peuvent accéder aux informations de votre site. L'un des obstacles les plus courants à l'accès au contenu Web peut être le manque de contraste de couleur approprié. Environ 7% de la population masculine (10,5 millions d'hommes) et 0,4% des femmes aux États-Unis vivent avec le daltonisme [i]. Un contraste de couleur médiocre peut rendre la lecture du contenu Web difficile, voire impossible. Les équipes de création et de conception doivent s'assurer que le contraste des couleurs est approprié pour le texte, les tableaux / diagrammes et tout autre contenu fourni.

Exigences de contraste de couleur

Pour les exigences d'accessibilité du contenu Web, nous nous tournons vers les WCAG (Web Content Accessibility Guidelines) pour obtenir des conseils. WCAG 2.1 a 3 critères de succès liés au contraste des couleurs. Ce qui suit est une brève description de chacun de ces critères de succès avec un lien renvoyant aux exigences techniques et aux informations supplémentaires.

1.4.3 Contraste minimum (niveau AA): Tout le texte doit avoir un contraste de couleur minimum de 4,5: 1, avec des exceptions.

1.4.11 Contraste sans texte (niveau AA): Les composants de l'interface utilisateur et les objets graphiques doivent avoir un rapport de contraste de couleur d'au moins 3: 1

1.4.6 Contraste amélioré (niveau AAA): Similaire à 1.4.3 mais standard plus élevé. Tout le texte doit avoir un rapport de contraste de couleur d'au moins 7: 1

Test de contraste de couleur

Il existe un certain nombre d'outils de test d'accessibilité disponibles qui vous aideront à tester le contraste de couleur de votre contenu Web. Par exemple, l'outil d'accessibilité automatisé Ax va, entre autres, tester le contraste des couleurs. Axe travaille pour identifier les codes hexadécimaux du texte et de l'arrière-plan et examine le rapport de contraste des couleurs entre les deux. Cependant, dans certains cas, un examen manuel du contraste des couleurs est nécessaire. C'est le cas lorsqu'un outil automatisé, comme Axe, n'est pas capable d'extraire les codes hexadécimaux exacts pour le texte ou l'arrière-plan. Un exemple typique de ceci est lorsque du texte est placé sur une image. Dans ces cas, il est nécessaire qu'un testeur vérifie manuellement le contraste de couleur entre le texte et l'image d'arrière-plan.

Analyseurs manuels de contraste de couleur

[i] https://iristech.co/statistics/#:~:text=In%20the%20United%20States%2C%20about,differently%20from%20how%20others%20do

À propos de l'auteur

Brendan est consultant senior chez Perficient depuis 4 ans. Son travail s'est concentré sur les tests d'accessibilité et a aidé les développeurs dans leurs efforts d'accessibilité.

Plus de cet auteur