Aujourd’hui pour que votre site web soit bien référencé, il y a une étape à franchir, c’est celle de l’accessibilité… Travailler ce point vous permettra d’être mieux vu des moteurs de recherche mais aussi et surtout de l’ensemble des internautes, qu’ils soient aveugles, déficients visuels, daltoniens, ou quelque soit leur handicap visuel.

Le problème c’est que, lorsqu’on a déjà eu du mal à choisir ses couleurs et son identité visuelle, on ne peut pas passer son temps à les tester auprès de tout ces publics.

Heureusement des outils existent pour tester vos couleurs et surtout vous donner des conseils pour les modifier et vous adapter au plus grand nombre.

Voici quelques outils pratiques pour vérifier sa charte graphique

test couleur Colour Contrast Analyser CCA

Colour Contrast Analyser (CCA)

Cette petite extension est disponible en ligne sur le site de l’AVH et vous permet de tester le contraste entre 2 couleurs. Vous avez ensuite les résultats en fonction des normes WCAG.

Ici on voit que ce texte blanc sur fond rouge est en conformité avec la plupart des codes. Le seul bémol est pour le contraste augmenté AAA. En cliquant sur la petite flèche vous obtenez des compléments d'informations.

Adobe Color

Rendez-vous sur Adobe Colour –
roue chromatique.

> Choisissez « personnalisé » dans le menu de gauche
> Saisissez les codes HEX (#) de vos couleurs
> Dans le menu de droite, cliquez sur « vérifier l’accessibilité ». Le logiciel vous montrer alors les couleurs vues par une personne daltonienne.

test couleur adobe colour emicom

Vous avez aussi la possibilité de tester le contraste de vos couleurs pour créer des boutons par exemple.

Dans cet exemple on voit que je peux utiliser une écriture jaune sur du rouge mais seulement sur des icônes ou un texte écrit plus gros. Le logiciel vous propose aussi des alternatives.
test contrast finder emicom

Contrast Finder

Cet outil, aussi disponible en ligne, vous propose aussi des préconisations pour améliorer vos contrastes de couleur selon que vous avez du texte, des icônes…

Sur cet exemple je teste un texte rouge sur fond bleu. Ce n'est déjà pas vraiment lisible pour un oeil "normal" donc ça ne l'ai pas plus pour des personnes avec des difficultés de lecture. Le logiciel propose ici un grand nombre de couleurs qui fonctionnent.

Si vous avez besoin d’aide ou que vous souhaitez échanger à ce sujet, n’hésitez pas à me contacter !

Vous pouvez également aimer :