Contraste des couleurs : 15 outils gratuits pour tester leur accessibilité

accessibilité contraste des couleurs
Partagez !

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.

Color Contrast Checker

Color Contrast Checker test de contraste de couleurs

Pour Color Contrast Checker, pas de blabla, simplement du résultat. En bref, entrez deux couleurs et les résultats 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.

Toutefois, il est possible de changer les couleurs en live en jouant sur les réglettes RGB jusqu’à l’obtention de couleurs accessibles.

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


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.

Tandis que 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

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

Constrast ratio

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

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

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.

Et dans l’hypothèse où vous voudriez 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é.

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

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

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, tout simplement en cliquant 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.

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

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.

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.

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

D’autre part, 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.

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

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

Et si vous voulez ajouter des détails à vos couleurs, c’est possible. En ce cas, 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.

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 bleu
  • Tritanopie : incapacité de perception des couleurs bleu 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.

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

Le mot de la fin

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 ?


Partagez !
Hello, moi, c'est Christine 👋. Je suis créatrice et optimisatrice de sites Web et rédactrice Web SEO. J’adore parcourir le web pour dénicher des astuces, fonctionnalités et outils gratuits qui facilitent la création numérique. Sur ce blog, je vous partage mes découvertes et espère qu’elles pourront vous être utiles.
0 0 votes
Évaluation de l'article
S’abonner
Notifier de
guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires
Retour en haut
0
J'aimerai bien avoir votre avis sur cet article 😉x