Contraste des couleurs et accessibilité 16 outils de test gratuits

Contraste des couleurs et accessibilité 16 outils de test gratuits
19 mn de lecture

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 :

Niveau AA

Contraste (minimum)

Niveau AAA

Contraste (amélioré)

Texte et image avec des informations textuelles de moins de 18 points (ou moins de 14 points* en gras) 


*14 points=18,5px

Rapport de contraste 

d'au moins 4,5:1

Rapport de contraste 

d'au moins 7:1

Texte et image avec des informations textuelles de 18 points* ou plus (14 points ou plus en gras)


* 18 points=24px

Rapport de contraste 

d'au moins 3:1

Rapport de contraste 

d'au moins 4,5:1

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 15 outils que je vous ai sĂ©lectionnĂ©s. Il vous suffira ensuite de modifier les couleurs que vous avez choisies si elles Ă©chouent.

1 Color Contrast Checker

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 Checker

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.

colour contrast checker extension chrome

3 a11y

a11y test de contraste entre 2 couleurs

a11y offre la possibilité de tester le contraste des couleurs entre deux couleurs, mais aussi, pour une page Web.

Le rĂ©sultat du test pour une page vous donnera 3 exemples pris dans la page. Il indiquera pour chacun, la couleur de l’arriĂšre-plan, celle du texte, la police, le contenu analysĂ© et enfin, le taux de rĂ©ussite.

Pour le test entre deux couleurs, vous obtiendrez le rapport de contraste pour un texte de taille normale et grande pour les niveaux AA et AAA.

a11y résultats test contraste couleurs page web et 2 couleurs

4 Contrast Checker

contrast checker test contraste couleurs et daltonisme

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 seront 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.

Notons 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”. Vos couleurs seront alors affichĂ©es en niveaux de gris pour simuler la façon dont les couleurs sont perçues par un utilisateur daltonien.

contrast checker test daltonisme et partage

5 Constrast ratio

contrast ratio test minimaliste

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.

NĂ©anmoins, en survolant la note de contraste, des informations complĂ©mentaires s’affichent et l’Ă©change des couleurs se fait par un simple clic sur “swap colors”.

6 Polypane

polypane color contrast checker

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 test et proposition contraste des couleurs

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.

contrast finder proposition couleurs valides contraste

8 Tanaguru Contrast Finder

tanaguru contrast finder trouveur de contraste couleurs

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”.

tanaguru contrast finder proposition couleurs valides contraste

9 Color Review

Color Review test constraste couleurs

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 test norme AA

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.

Accessible Colors proposition couleur contraste

11 WebAIM Contrast Checker

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

Kevin Gutowski test contraste des couleurs

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 contraste des couleurs en lignes et colonnes

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 test de contraste déficience visuelle

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 logiciel de test pour le 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”.

Colour Contrast Analyser caractéristiques

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 d'Experte.com pour vérifier l'accessibilité d'un site 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.😼​

résultats test de contraste EXPERTE.com

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 ?

Soumettre un commentaire 💬

guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires