Contraste des couleurs et accessibilité 16 outils de test gratuits

Lorsque l’on crée un site, il faut s’assurer qu’il soit conforme aux règles d’accessibilité définies par le WCAG (Web Content Accessibility Guidelines), notamment en ce qui concerne le contraste des couleurs.

En effet, selon la ligne directrice 1.4, du WCAG émises par le W3C, il convient que le site soit distinguable. C’est-à dire que le contraste doit être suffisant entre le texte de premier plan et son arrière-plan.

Par conséquent, le choix de la combinaison des couleurs de premier plan et d’arrière-plan ainsi que le poids et la taille de la police doivent être effectués avec soin afin de rendre le texte lisible.

À ce sujet, voici ce que préconise le WCAG :

Partant de ce fait, il est donc indispensable de savoir si votre texte est accessible. Je vous propose donc d’exécuter un test au moyen de l’un de ces 16 outils que je vous ai sélectionnés. Il vous suffira ensuite de modifier les couleurs que vous avez choisies si elles échouent.

(Article mis à jour en septembre 2024 pour remplacement de Color Contrast Analyser d’a11y qui n’existe plus par AudioEye Color Contrast Checker)

1 Color Contrast Checker

Pour Color Contrast Checker, pas de blabla, simplement du résultat. En bref, entrez deux couleurs et les résultats selon la taille du texte en norme AA et AAA apparaissent en vert si ça passe et en rouge, si ça casse.

Un visuel de ce que rend la couleur du texte sur le fond choisi est également présent. Vous y trouverez aussi la couleur du texte (Foreground Color) ainsi que celle de l’arrière-plan (Background Color) en valeurs Hex et RGB. Enfin, il est possible de changer les couleurs en live en jouant sur les réglettes RGB jusqu’à l’obtention de couleurs accessibles.

2 Colour Contrast

Colour Contrast est encore un autre outil de test entre deux couleurs. Mais, avec celui-ci, il est possible de modifier la teinte, la saturation et la luminosité de chaque couleur.

Vous pouvez également choisir votre police et taper le texte de votre choix afin d’avoir un rendu du résultat.

Il est à noter que Colour Contrast est aussi disponible en extension Chrome. Avec l’extension, vous ne serez plus obligé(e) de remplir vous-même les 2 couleurs. En effet, vous aurez à votre disposition une “pipette” qui vous permettra de sélectionner des couleurs sur la page Web.

3 AudioEye Color Contrast Checker

AudioEye Color Contrast Checker offre la possibilité de tester le contraste entre deux couleurs.

Pour l’utiliser, indiquez les couleurs de premier plan et d’arrière-plan au format HEX ou bien choisissez-les via le sélecteur de couleur.

Vous obtenez instantanément le rapport de contraste et un aperçu pour un texte de taille normale et grande pour les niveaux AA et AAA. Vous avez également le résultat du test selon le niveau AA pour les composants graphiques tels que les icônes ou encore pour ceux d’interface utilisateur tels que les champs de saisie de texte d’un formulaire.

Il est à noter qu’il est possible :

• d’intervertir les couleurs du fond et du texte juste en cliquant sur “Swap Colors”
• de prévisualiser vos couleurs en niveaux de gris en actionnant la bascule “Preview Colors in Grayscale”

Une autre fonctionnalité intéressante est celle de pouvoir changer la luminosité de chaque couleur via des réglettes. Ainsi, si les couleurs initiales choisies ne sont pas top en termes de contraste, vous pourrez obtenir d’autres codes couleurs plus accessibles.

Enfin, pour partager ou enregistrer dans vos favoris le résultat de votre test de contraste des couleurs, cliquez sur “Share Contrast Results” et copiez l’URL.

4 Contrast Checker

Pour exécuter votre test avec Contrast Checker, sélectionnez une couleur de premier plan et une couleur d’arrière-plan. Vous pouvez optionnellement faire un test sur une image en la téléchargeant via “Get from image”.

Les résultats sont alors générés automatiquement avec vos scores. Ensuite, vous pouvez les ajouter à votre historique en sélectionnant “Add to history”, puis les sauvegarder au format PDF.

Notez aussi qu’une fonction de partage est prévue pour Pinterest, LinkedIn, Meta, Twitter ou via le lien généré en cliquant sur “Share sample”.

Et enfin, truc sympa, un test de daltonisme est disponible. Si vous souhaitez y accéder, cliquez sur “See grayscale”. Les couleurs sont alors affichées en niveaux de gris pour simuler la façon dont les couleurs sont perçues par un utilisateur daltonien.

5 Constrast ratio

Contrast Ratio est, quant à lui, un test minimaliste. Il suffit d’entrer la couleur du texte et celle de l’arrière-plan. Sans délai, le rapport de contraste apparait avec quelques lignes de texte à titre d’exemple.

Il est quand même possible d’intervertir les couleurs d’arrière-plan et de premier plan en cliquant sur “swap colors” et d’obtenir des informations complémentaires en survolant la note de contraste.

6 Polypane

Contrairement à de nombreux autres outils, le vérificateur de contraste des couleurs Polypane prend en compte l’opacité lors du calcul. Il donne ainsi un rapport de contraste réel pour du texte normal, grand et les icônes pour le niveau AA. Pour voir le score AAA, jouez avec le bouton bascule.

Lorsque le contraste n’est pas suffisant, l’outil propose des couleurs similaires qui atteignent le score d’accessibilité désiré.

7 Contrast Finder

Contrast Finder est disponible en français.

Comme pour les autres testeurs de contraste des couleurs, vous entrez la couleur du texte et celle du fond. Mais, ici, par défaut, le test de ratio minimum est positionné sur 4.5. Néanmoins, trois valeurs sont possibles : 3, 4.5 et 7. Alors, selon le niveau d’accessibilité souhaité : AA ou AAA, s’il s’agit d’un texte en gras ou non, il vous faudra choisir manuellement le ratio désiré dans le menu déroulant.

Il faut souligner que Contrast Finder a un atout non négligeable. En effet, si les couleurs que vous avez choisies échouent au test de contraste, il vous propose de trouver des couleurs valides.

En premier lieu, choisissez “Couleurs valides et très proches de la couleur initiale”. Si l’algorithme ne renvoie aucun résultat, dans ce cas, choisissez “une palette de couleurs valides”.

Prenons un exemple. Ici, la couleur choisie pour le texte est le bleu #51CBF3 avec un fond blanc. Il est évident que ces couleurs ne sont pas accessibles puisque le test renvoie un ratio de 1.88. Je demande donc à Contrast Finder de trouver des couleurs valides.

Et voilà, il me trouve 34 résultats.

8 Tanaguru Contrast Finder

Tanaguru contrast finder est disponible en français. Il fonctionne à peu de choses près de la même façon que Contrast Finder. Vous indiquez deux couleurs. Puis, vous choisissez la composante à modifier en cas d’échec et enfin, vous cliquez sur “vérifier et trouver le contraste”.

9 Color Review

Color Review ne déroge pas à la règle des testeurs de contraste. Vous entrez vos codes couleurs et il vous indique en haut le résultat AA ou AAA : vert si c’est OK, Fail en rouge si ce n’est pas bon.

En dessous, vous trouverez un exemple de texte et un bouton, avec, encore une fois, les scores obtenus à côté.

En haut et en bas, vous pourrez copier le lien vers ce test afin de le partager ou de le mettre dans vos favoris.

Il est à noter que vous pouvez échanger les couleurs d’arrière-plan et de texte en cliquant simplement sur “Flip”.

Enfin, le truc que je trouve sympa, c’est la possibilité de faire varier les couleurs via une réglette ou sur l’écran des couleurs incluant une courbe avec les délimitations des rapports de contraste à atteindre. Ainsi, vous êtes quasi sûr de trouver une couleur accessible rapidement.

10 Accessible Colors

Accessible Colors est un outil très simple d’utilisation. Tout d’abord, remplissez les “trous” dans le texte : couleur du texte, taille, normal ou gras, couleur du fond.

Par défaut, il génère les résultats pour la norme AA. Si vous souhaitez voir ceux pour la norme AAA, cliquez sur AA.

Dans l’hypothèse où vos couleurs échouent au test, il vous fournira si possible une suggestion de couleur accessible.

11 WebAIM Contrast Checker

Contrast Checker est l’outil de WebAIM (Web Accessibility In Mind) qui fournit des solutions complètes d’accessibilité Web depuis 1999.

Tout d’abord, entrez une couleur de premier plan et d’arrière-plan au format hexadécimal RVB ou choisissez une couleur à l’aide du sélecteur de couleurs. Puis, jouez avec le curseur de luminosité si besoin.

Vous obtiendrez alors votre rapport de contraste, la possibilité de copier un lien vers votre test ainsi qu’un aperçu annoté pour les textes normaux, larges et les éléments graphiques.

12 Kevin Gutowski Color & Contrast Picker

L’outil de test de contraste des couleurs de Kevin Gutowski est lui aussi très simple.

Entrez vos codes couleurs et vous avez instantanément le rapport de contraste ainsi que la visualisation des couleurs choisies dans un bouton.

De plus, en cochant “View closest accessible colors”, l’outil vous indiquera la couleur accessible la plus proche de la vôtre.

Enfin, vous avez la possibilité de choisir une couleur dans un espace de couleurs RVB avec indication, via une courbe, de la zone à ne pas dépasser pour que les contrastes soient valides.

13 EightShapes Contrast Grid

Contrast Grid est, quant à lui, un outil utile pour tester de nombreuses combinaisons de couleurs de premier plan et d’arrière-plan dans le but de vous assurer qu’elles sont conformes au contraste minimum WCAG 2.0.

Afin de construire votre tableau avec des couleurs différentes pour les lignes et les colonnes, entrez une couleur par ligne dans les zones intitulées “Rows” et “Columns”.

Si vous souhaitez reprendre les mêmes couleurs pour les colonnes, alors cochez “Use the same rows & columns values”.

Pour ajouter des détails à vos couleurs, mettez une virgule après votre couleur Hex et tapez un texte.

Vous constaterez que le tableau se crée automatiquement et indique la réussite ou l’échec de chaque combinaison de couleurs.

Enfin, lorsque vous avez terminé, vous pouvez copier le HTML et le CSS afin de pouvoir sauvegarder votre résultat.

14 Whocanuse

Whocanuse est un outil somme toute assez particulier et super intéressant.

En effet, non seulement il donne le score WCAG et donne la possibilité de modifier la taille du texte, d’activer le gras et de jouer avec les couleurs.

Mais, ce que je trouve génial, c’est qu’il montre également la façon dont sont perçues les couleurs par des personnes ayant une déficience visuelle.

La simulation est divisée en plusieurs types de vision, notamment :

• Vision régulière (trichromatique)
• Protanomalie : perturbation dans la perception de la couleur rouge
• Protanopie : incapacité de perception de la couleur rouge
• Deutéranomalie : perturbation dans la perception de la couleur verte
• Deutéranopie : incapacité de perception de la couleur verte
• Tritanomalie : perturbation dans la perception de la couleur bleue
• Tritanopie : incapacité de perception des couleurs bleue et jaune
• Achromatomalie : daltonisme partiel (absence de perception de la plupart des couleurs)
• Achromatopsie : daltonisme complet (absence de perception de toutes les couleurs)
• Cataracte : vision affectée par l’opacification du cristallin
• Glaucome : légère perte de vision
• Basse vision : vision diminuée et floue qui ne peut pas être corrigée par le port de lunettes

Il est à noter aussi que whocanuse simule un contraste en cas de plein soleil et de mode nuit.

15 Colour Contrast Analyser (CCA) ❤️Analyseur de contraste des couleurs

Colour Contrast Analyser est l’outil gratuit de vérification du contraste des couleurs de TPGi que j’utilise.

Il ne s’agit pas d’un outil en ligne, ni même d’une extension. L’outil se présente sous forme d’un logiciel libre disponible pour Mac et aussi pour Windows.

En premier lieu, installez le logiciel. Puis, ouvrez-le et indiquez vos préférences de langue et mise à jour, la précision souhaitée du ratio de contraste. Choisissez également votre mode d’affichage favori.

💡 Si vous êtes sous Windows, épinglez-le à la barre des tâches. Ainsi, il vous suffira de cliquer dessus pour le faire apparaitre.

Il est à noter qu’il possède plusieurs moyens de sélection des couleurs : vous pouvez saisir manuellement les formats de couleur CSS, utiliser un curseur RVB ou opter pour l’outil pipette de sélection des couleurs.

Il faut souligner aussi qu’il prend en charge les tests de couleurs avec transparence alpha.

Les résultats obtenus sont indiqués pour les normes AA et AAA, pour le texte normal ainsi que pour les grands textes et l’inversion des couleurs se fait par un simple clic.

Il possède également un simulateur de daltonisme que vous trouverez sous l’onglet “affichage”.

Enfin, si vous souhaitez copier le résultat de votre test, rendez-vous dans l’onglet “édition”.

Vous trouvez fastidieux de tester chaque combinaison de couleurs et chaque élément d’un site web individuellement pour savoir si le contraste des couleurs est assez élevé en termes d’accessibilité ?

Qu’à cela ne tienne ! Voici un dernier outil de test de contraste des couleurs qui explore votre site web en totalité et vérifie si chaque sous-page a un bon contraste : le test de contraste d’EXPERTE.com.

16 Test de contraste d’EXPERTE.com : mesure du contraste des couleurs d’un site Web entier🔥

Test de contraste est un outil développé par Janis von Bleichert, le fondateur d’EXPERTE.com, un portail d’outils destiné aux freelances et aux indépendants.

Il est à noter que le test de contraste est basé sur Lighthouse, qu’il suit les directives WCAG 2.1 et surtout qu’il existe en langue française.

Mais, l’aspect le plus important de cet outil est qu’il permet d’examiner automatiquement le contraste des couleurs pour l’ensemble d’un site Web et ce, jusqu’à 500 sous-pages.

Pour l’utiliser, en premier lieu, saisissez l’URL d’un site Web ou bien indiquez une liste d’URL.

Ensuite, laissez cocher le test par défaut “Vérifier le contraste des couleurs” et cliquez sur “commencez le test”. Le test de contraste des couleurs d’EXPERTE.com explore alors votre site web et vérifie que chaque sous-page a un bon contraste.

S’il détecte une erreur d’accessibilté en termes de contraste de couleur, il vous l’indique à côté de la page concernée. Il vous suffit de cliquer sur “Afficher les éléments défectueux” pour que s’affiche le détail de l’erreur afin que vous puissiez y remédier.

Le plus de cet outil est donc l’identification d’éléments défectueux qui auraient pu passer inaperçus. La preuve en est, il m’a trouvé une erreur d’accessibilité que je n’avais pas détectée.😮​

A la fin du test, si vous le souhaitez, vous pouvez exporter les résultats au format CSV en cliquant sur “Export”.

💡D’autre part, pour information, si vous cochez “test d’accessibilité complet”, 40 autres éléments d’accessibilité seront vérifiés. Il s’agit d’ailleurs d’un de mes 14 outils pour tester l’accessibilité Web.

L’accessibilité Web : contraste des couleurs et plus encore !

Le Web se doit d’être accessible à tous, alors, il ne tient qu’à vous qu’il le devienne.

Fini les textes petits et gris clair sur fond blanc, faites enfin en sorte que vos textes soient “lisibles”, idem si vous changez la couleur de sélection du texte en CSS.

Parfois, il ne sera pas évident de faire comprendre à votre client que sa charte graphique avec de jolies couleurs pastel n’est pas accessible et qu’il faut la modifier. Mais, ça vaut le coup de lui signaler et s’il ne veut pas entendre raison, au moins, vous aurez essayé…

Pour terminer, il est évident que dans cet article, je ne parle que des contrastes de couleurs. Mais, sachez que pour qu’un site soit accessible, il existe encore beaucoup d’autres règles.

Si vous souhaitez exécuter un test d’accessibilité entier, n’hésitez pas à le faire.😉

Quoi qu’il en soit, en ce qui concerne l’analyse des contrastes de couleurs, vous l’avez compris, j’ai opté pour Colour Contrast Analyser.

Et vous lequel avez-vous choisi ?