5 outils pour créer une palette de couleurs Web accessible à tous

Les couleurs de votre marque ont un fort impact émotionnel, mais comment apparaissent-elles aux visiteurs du site malvoyants, daltoniens ou confrontés à des facteurs environnementaux qui rendent la visibilité difficile ?

Les niveaux de couleur et de contraste sont essentiels à la communication, et la précision de ces détails est essentielle pour le concepteur soucieux de l'accessibilité.

Les troubles de la perception des couleurs sont plus fréquents qu’on ne le pense. Ainsi, dans cet article, nous parlerons de la façon dont les personnes handicapées comme la basse vision, la dyslexie et le daltonisme interagissent avec le Web.

Comment utiliser un vérificateur de couleurs pour améliorer l'accessibilité de mon site Web ?

Cette section est en fait assez simple, même si elle nécessite un certain effort. Vous devrez utiliser l'outil de vérification de contraste en ligne de WebAIM. WebAIM est une organisation à but non lucratif basée à l'Université d'État de l'Utah dont la mission est d'améliorer l'accessibilité du Web dans le monde entier.

Entrez simplement votre couleur de premier plan (par exemple, la couleur de votre texte ou de vos icônes) et votre couleur d'arrière-plan sous forme de valeurs hexadécimales (également appelées valeurs hexadécimales), comme spécifié dans HTML ou CSS, et le vérificateur de rapport de contraste vous informera si le rapport est suffisant. N'oubliez pas que le rapport de contraste minimum que vous devez rechercher est de 4.5 pour 1. Le texte noir sur fond blanc a un rapport de contraste de 21 pour 1, vous disposez donc d'une grande marge de manœuvre.

5 outils pour créer une palette de couleurs Web accessible à tous

1. Vérificateur de contraste de couleurs WebAIM

Entrez les couleurs hexadécimales pour le premier plan et l'arrière-plan. Le résultat montre la conformité AA et AAA pour les textes normaux et volumineux, ainsi qu'un exemple de phrase. Les curseurs vous permettent de changer les choses jusqu'à ce que vous trouviez une bonne combinaison.

Points forts

• Outil simple avec une interface agréable à regarder.
• Il s'agit d'un outil simple et agréable pour les débutants, et pas seulement pour les concepteurs.

Points faibles

• Je ne peux pas comparer plus de deux couleurs, seulement deux.
• Le curseur de luminosité n'est pas un très bon moyen de choisir les couleurs. Il est difficile de dire à quel point les couleurs sont attrayantes dans cet affichage simple.

2. Vérificateur de contraste pour WCAG

Entrez les couleurs hexadécimales pour le premier plan et l'arrière-plan. Affiche la conformité AA et AAA pour les textes normaux et de grande taille à côté d'un échantillon de texte Lorem Ipsum. Vous pouvez également télécharger une photo. Une palette de 9 couleurs est choisie automatiquement pour vous. Ensuite, vous pouvez comparer chaque couleur comme couleur de premier plan ou de fond.

Points forts

• Outil simple avec une interface conviviale.
• Avoir la possibilité de créer des palettes à partir d'images.

Points faibles

• La palette est choisie automatiquement et vous pouvez la modifier davantage avec le sélecteur de couleurs, mais ces modifications ne sont pas enregistrées dans la palette. Il faut copier et coller les informations dans un nouveau document.

3. Cube de couleurs

Entrez les couleurs de la palette, chacune sur sa propre ligne. Le résultat montre des exemples de lettres avec des taux de contraste par rapport aux normes AA pour les petites et grandes polices. Trois colonnes présentent un contraste avec un fond blanc, un fond noir et un ensemble de couleurs de marque qui sont « les plus lisibles parmi celles disponibles ».

Points forts

• Facile à regarder L'interface utilisateur (UI) est bien organisée et l'état réussite/échec/bord est facile à voir.

Points faibles

• Ne répond pas aux normes fixées par AAA.
• Ne fait pas toutes les combinaisons de couleurs possibles, et il n’est pas clair au début que ce soit le cas.

4.) Grille de contraste de huit formes 

Entrez les couleurs de la palette. Vous pouvez également donner un nom à chaque couleur. L'application crée un tableau avec toutes les combinaisons de couleurs possibles. Il existe trois tailles de tuiles. Il existe des repères visuels pour la réussite/l'échec/le bord des AA et AAA ainsi que le rapport de contraste effectif. Les colonnes et les lignes peuvent être déplacées dans l'application par glisser-déposer. Les données tabulaires peuvent être enregistrées, exportées et partagées.

Points forts

• Il existe de nombreuses fonctionnalités utiles qui facilitent l’analyse de palettes entières.

Points faibles

• Il est plus difficile à apprendre que d’autres outils plus faciles à utiliser.
• Ce n’est pas la bonne façon de comparer seulement deux couleurs.
• Pas bon pour comprendre comment les couleurs vont ensemble.
• Un peu écrasant à regarder, mais de nombreuses informations sont affichées.

5. Couleur sûre 

Tapez la couleur d’arrière-plan. Choisissez la famille, la taille et le poids de la police. Choisissez AA ou AAA comme norme. Affiche la couleur sélectionnée et son code hexadécimal, ainsi qu'un échantillon et le rapport de contraste effectif. Les grandes vignettes des couleurs de premier plan possibles avec suffisamment de contraste sont la meilleure partie. Vous pouvez choisir de les regarder tous ou seulement certains groupes de couleurs (verts, bleus, violets, etc.)

Points forts

• Avec une interface agréable à regarder, il est facile de trouver une combinaison de couleurs qui a fière allure et qui fonctionne bien.
• Il s'agit d'un outil utile si vous ne disposez pas déjà d'une palette de couleurs de marque ou si vous souhaitez en ajouter une que vous possédez déjà pour le Web.

Points faibles

• Vous ne pouvez comparer que les couleurs de premier plan et d’arrière-plan à la fois.
• Vous devez copier et coller les couleurs dans un document séparé si vous souhaitez les enregistrer.
• Sortez et créez des choses pour tout le monde !

Une fois que vous savez comment utiliser ces outils, vous constaterez peut-être que vous en aurez besoin de plusieurs pour un projet. Color Cube est peut-être le meilleur moyen de montrer à un client ce que vous avez appris sur l'accessibilité. Peut-être utiliserez-vous tout le temps l'outil de WebAIM pour effectuer des vérifications ponctuelles rapides.

Conclusion 

À l’aide des conseils, directives et outils dont nous venons de parler, vous pouvez donner à votre site Web des couleurs et des étiquettes très contrastées. Cela permettra aux personnes malvoyantes, dyslexiques et daltoniennes de lire plus facilement votre site Web et votre contenu. Ne soyez pas surpris si votre grand public trouve également plus facile d’utiliser votre site Web.