Vérificateur de contraste des couleurs

Qu’est-ce qu’un vérificateur de contraste des couleurs

Un vérificateur de contraste des couleurs compare la couleur d’un texte à celle de son arrière-plan et calcule un chiffre unique : le ratio de contraste. Ce ratio dit si une combinaison est lisible pour une personne malvoyante, daltonienne, ou simplement en train de lire un écran mal réglé en plein soleil — et c’est précisément ce que les critères d’accessibilité WCAG, et donc le RGAA qui en hérite en France, imposent de vérifier avant de publier une interface.

Cet outil sert à tester le contraste des couleurs sans rien installer : indiquez un hex de texte et un hex de fond — à 3, 6 ou 8 chiffres, avec ou sans dièse — ou choisissez-les depuis le sélecteur de couleur natif du système, et le ratio s’affiche aussitôt, de 1:1 (aucun contraste) à 21:1 (noir pur sur blanc pur). Un bouton permet d’inverser les deux couleurs en un clic pour comparer les deux sens de lecture.

Au-delà du chiffre brut, la page traduit le ratio en verdicts concrets pour les cinq seuils que la norme distingue — texte normal et texte large, en AA comme en AAA, plus le cas des composants d’interface — et y ajoute un score APCA, la méthode candidate pour WCAG 3. Quand une paire échoue de peu, l’outil propose la nuance la plus proche, plus sombre ou plus claire, qui atteint 4,5:1, prête à appliquer d’un clic.

Comment l’utiliser

1. Indiquez le texte et le fond. Dans le champ « couleur du texte », saisissez un code hexadécimal à 3, 6 ou 8 chiffres (le huitième chiffre règle l’opacité), ou cliquez sur la pastille de couleur pour ouvrir le sélecteur natif du système. Faites de même pour la « couleur de fond » juste en dessous ; un bouton entre les deux inverse les deux couleurs si vous voulez comparer dans l’autre sens.
2. Regardez l’aperçu en direct. Le panneau se peint dans la couleur de fond et affiche la même phrase à trois tailles — texte normal à 16px, gras à 18,5px, grand texte à 24px — ainsi qu’un encadré qui simule un composant d’interface (bouton, champ, bordure). Tout se met à jour à chaque frappe.
3. Lisez le ratio, puis ajustez si besoin. Le grand chiffre au centre est le ratio de contraste WCAG ; en dessous, cinq lignes indiquent si la paire passe ou échoue pour AA texte normal, AA grand texte, AAA texte normal, AAA grand texte et les composants d’interface, et un panneau séparé donne le score APCA. Si le texte normal échoue en AA, des pastilles proposent la nuance plus sombre et la nuance plus claire les plus proches qui atteignent 4,5:1 : un clic dessus l’applique directement au champ.

Ce que les niveaux veulent vraiment dire

Le WCAG définit deux paliers. Le niveau AA, celui que reprend le RGAA et que visent la quasi-totalité des obligations légales, exige un ratio d’au moins 4,5:1 pour le texte normal (critère de succès 1.4.3) et se contente de 3:1 pour le texte large. Le niveau AAA, plus exigeant et rarement imposé, monte ces seuils à 7:1 et 4,5:1 (critère 1.4.6). Ce sont ces quatre chiffres que l’outil confronte au ratio calculé pour donner ses quatre premiers verdicts.

Encore faut-il savoir ce que « texte large » signifie : la norme le définit comme au moins 18 points, ou 14 points en gras — un seuil que la plupart des vérificateurs se gardent bien de préciser. Le document Understanding WCAG convertit 1 point en 1,333px, ce qui donne environ 24px pour le texte large normal et 18,5px pour le gras : ce sont précisément les deux tailles, avec le texte normal à 16px, que l’aperçu affiche côte à côte.

Un cinquième seuil, souvent oublié, couvre les composants d’interface et les graphiques informatifs (icônes, contours de champ, indicateurs d’état) : le critère 1.4.11 exige seulement 3:1, sans distinction de taille. La frontière tient parfois à un seul niveau de gris : #767676 est le gris le plus clair qui passe encore l’AA sur fond blanc, à 4,54:1, alors que #777777, à peine plus clair, tombe à 4,47:1 et échoue ; sur fond noir, c’est #757575 qui tient la limite basse, à 4,55:1. Ces écarts d’un seul chiffre expliquent aussi pourquoi l’outil arrondit toujours le ratio affiché vers le bas et juge sur la valeur exacte, non arrondie : un couple comme #118A11 sur blanc, à 4,4994:1, reste en échec même si un arrondi au centième afficherait complaisamment « 4,50 » à côté d’un badge vert.

Où les deux normes se contredisent, et ce que cet outil ne peut pas vous dire

Le meilleur exemple de désaccord tient en une seule couleur : #888888. Sur fond blanc, son ratio est de 3,54:1 — un échec net en AA, sous le seuil de 4,5:1. Pourtant, l’APCA lui attribue un Lc de 63,1, qui franchit le seuil Lc 60. Sur fond noir, le même gris obtient 5,92:1, un AA réussi haut la main — mais l’APCA ne lui accorde que -38,6, à peine au-dessus du plancher absolu Lc 30 fixé pour n’importe quel texte. Un seul gris, deux fonds, et les deux référentiels inversent leur verdict.

Ce désaccord n’est pas anecdotique près du noir : sur les 65 536 combinaisons possibles de gris sur gris, 6 407 passent l’AA du WCAG tout en restant sous le seuil Lc 60 de l’APCA. Le pire cas est #757575 sur #020202 : 4,50:1, un AA en règle, pour un Lc de seulement 29,6 — en dessous même du plancher Lc 30. C’est précisément ce que l’APCA a été conçu pour corriger, et pourquoi le ratio WCAG 2 est un mauvais guide pour concevoir un mode sombre. L’inverse existe aussi, mais reste rare : seules 11 paires de gris échouent l’AA tout en dépassant le seuil Lc 75 du texte courant, la plus nette étant blanc sur #777777 — 4,47:1, un échec, pour un Lc de 76,6. Cette asymétrie tient à la nature même de l’APCA : noir sur blanc obtient Lc 106,04, blanc sur noir obtient -107,88 — ce ne sont pas des miroirs l’un de l’autre, alors que le ratio WCAG est parfaitement symétrique et ignore totalement lequel des deux, texte ou fond, est le plus clair (vérifié sur plus de 4 000 paires : inverser texte et fond ne change jamais le ratio).

Il faut cependant garder en tête ce que l’APCA n’est pas : une méthode candidate pour un WCAG 3 encore à l’état de brouillon, sans aucune valeur réglementaire aujourd’hui. Le chiffre APCA affiché ici est donc informatif, à prendre comme un signal avancé plutôt que comme une preuve de conformité. Ce que la loi et les audits vérifient, c’est le niveau AA du WCAG 2 — et en France, c’est le RGAA, construit sur ce même niveau AA, qui sert de référentiel aux sites publics et à tout organisme qui leur est assimilé. Face à un auditeur ou dans un contrat, c’est le 4,5:1 qui compte, pas le Lc.

D’autres limites tiennent à la nature même du calcul, quelle que soit la méthode. Les deux algorithmes ne comparent que deux couleurs plates : un texte posé sur une photo, un dégradé ou un calque semi-transparent a un ratio différent à chaque pixel, qu’aucun chiffre unique ne peut résumer. Aucun des deux ne connaît la police : le WCAG 2 n’a qu’une seule règle de graisse, réservée au texte large, si bien qu’une fonte fine en 300 et une black en 900 à la même taille reçoivent exactement le même verdict. Les deux sont aussi définis en sRGB, ce qui laisse un Display P3 grand gamut hors de leur portée. Et un contraste conforme n’est pas synonyme de lisible : longueur de ligne, interlignage, luminosité de l’écran et lumière ambiante restent bien réels et absents des deux modèles. Enfin, cet outil compose le texte translucide sur son fond avant de calculer quoi que ce soit — du noir à 60% d’opacité sur blanc devient #666666, soit 5,74:1 et non 21:1 — mais ne fait pas l’inverse : un fond semi-transparent doit d’abord être composé sur ce qu’il recouvre avant d’être testé ici.

Pourquoi c’est gratuit

Tout ce calcul — luminance relative, ratio WCAG, score APCA, recherche des nuances de repli — s’exécute entièrement dans le navigateur, en JavaScript, pendant que vous tapez. Aucune couleur, aucune image, aucun fichier n’est envoyé à un serveur : il n’y a rien à envoyer, puisqu’un code hexadécimal ne quitte jamais votre poste.

C’est pour cela que l’outil est gratuit sans condition : pas de compte à créer, pas de palier payant caché derrière une fonctionnalité, pas de filigrane sur un résultat qui n’est de toute façon qu’un chiffre à copier. Comme le reste des outils de FreeToGenerate.com, celui-ci reste utilisable autant de fois que nécessaire, sans limite quotidienne.