5 outils d’accessibilité pour vérifier le degré de contraste de votre design

Si vous travaillez sur des projets de conception Web, il s’ensuit que l’accessibilité Web devrait être l’une de vos principales considérations en matière d’expérience utilisateur. Qu’il s’agisse d’améliorer la lisibilité des pages pour les utilisateurs malvoyants ou de s’assurer que les repères visuels de votre page Web restent efficaces sur les appareils mobiles, la couleur seule peut parfois être le seul obstacle entre vous et une conception vraiment accessible et inclusive.

L’une des considérations les plus importantes est le rapport de contraste – ou la relation de luminance entre les éléments clairs et foncés (le plus souvent du texte) dans votre design. Les utilisateurs souffrant de certaines déficiences cognitives peuvent avoir besoin d’un texte moins contrasté, tandis que les lecteurs malvoyants peuvent avoir besoin d’une interface utilisateur très contrastée dans la conception visuelle qu’ils consomment.

De même, le daltonisme est également une considération qui nécessite l’attention de tout concepteur qui met en œuvre un processus de conception visant un design équitable et accessible.

La bonne nouvelle, c’est qu’il existe une poignée d’outils peu coûteux – et même gratuits – répertoriés par Dribbble, qui peuvent vous aider à mieux connaître le design pour tous, et comment vous pouvez aider les gens à vivre équitablement le design que vous créez.

1. Contrast

Contrast est une application macOS qui offre aux concepteurs un moyen, comme son nom l’indique, de mesurer immédiatement le rapport de contraste des choix de couleurs pour s’assurer qu’ils sont conformes aux Web Content Accessibility Guidelines (WCAG). Une application conçue pour une rétroaction immédiate sans être un fardeau pour votre flux de travail de conception, Contrast offre également un guide sur leur site qui agit comme un guide d’introduction à certaines des normes d’accessibilité WCAG.

L’application agit comme une petite barre de menu que vous pouvez intégrer dans n’importe quel logiciel de conception que vous utilisez, ou déplacer la barre de menu autour de votre bureau pour l’utiliser comme une fenêtre flottante partout ailleurs sur votre écran.

2. Color-Safe

Si vous recherchez une option dans le navigateur, Color Safe est un outil Web qui permet aux concepteurs de générer des palettes de couleurs basées sur les normes WCAG pour le rapport de contraste. Sélectionnez simplement la couleur d’arrière-plan, la famille de polices, la taille et le poids des polices de caractères de votre projet – plus la norme WCAG que vous essayez d’atteindre – et Color Safe générera des palettes dont vous pourrez comparer le rapport de contraste.

3. Tanaguru Contrast-Finder

Tanaguru Contrast-Finder est un outil Web facile à utiliser qui vous permet d’entrer simplement vos couleurs d’avant-plan et d’arrière-plan préférées (en RVB ou en code hexadécimal) pour contrôler le taux de contraste de votre motif. L’outil vous permet de sélectionner le rapport de contraste minimum désiré, tout en générant une liste de couleurs adjacentes à évaluer.

Ces alternatives sont également fournies avec des échantillons en cours d’utilisation de tailles de texte, de poids et de rapports de contraste différents, ce qui vous donne une idée des couleurs et des choix de texte qui seront non seulement plus accessibles, mais qui s’intégreront parfaitement dans votre design global.

4. Stark

Avec des plugins pour Adobe XD, Figma et Sketch, Stark est un plugin qui propose une suite d’outils pour favoriser des normes de conception accessibles et inclusives – directement à partir des logiciels avec lesquels les concepteurs travaillent déjà. L’outil de contrôle de contraste de Stark permet aux concepteurs de vérifier que leur typographie et leur taille de police – en conjonction avec les couleurs d’arrière-plan ou les visuels de soutien du design – offrent la lisibilité nécessaire et un contraste suffisant pour s’harmoniser aux directives d’accessibilité.

En prime, Stark aide aussi à résoudre d’autres problèmes d’accessibilité, dont le daltonisme. L’application permet aux concepteurs de visualiser leur travail en simulation de daltonisme et d’apporter des modifications à leur système de conception.

5. Spectrum

Spectrum est également un outil gratuit qui peut vous aider à concevoir vos produits en pensant aux utilisateurs daltoniens. Extension gratuite de Google Chrome développée par Yehor Lvivski, Spectrum permet également aux concepteurs de tester directement leurs sites sur une gamme de plus de huit versions différentes de déficiences de la vision des couleurs, y compris une gamme de daltonisme rouge-vert et bleu-jaune.

Avec plus de 200 millions de personnes malvoyantes dans le monde, l’accessibilité du Web devrait être une considération primordiale dans tous les processus de conception. Maintenant que vous avez des applications pratiques dans votre boîte à outils, c’est à votre tour d’y aller et de faire du Web un endroit plus accessible à tous !

Via Dribbble

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.