Vérificateur de contraste des couleurs

Une fiche produit de boutique en ligne : une photo de théière, le nom « Théière en grès », le prix 29,90 € et un bouton jaune « Ajouter au panier » écrit en bleu vif, à la taille d'un texte courant. Le personnage dd, le logo d'Includdy avec des bras et des jambes, entre par la gauche, regarde le bouton et lève le pouce. La question s'affiche : ce bouton est-il assez contrasté ?

Une étiquette « Vérificateur de contraste » apparaît sous la fiche et un trait lumineux balaie le bouton, comme un scanner.

Un tampon rouge « Échec » tombe de travers sur le coin du bouton. Dessous, en gros : ratio 3,63:1, il faut au moins 4,5:1. dd sursaute.

Le mot ratio clignote. Question : ce ratio, qu'est-ce que c'est, et d'où sort 3,63 ? Un point d'interrogation flotte au-dessus de dd.

La fiche s'efface. Le bouton jaune est agrandi jusqu'à montrer un seul pixel de l'écran : un carré fait de trois bandes lumineuses, rouge, verte et bleue, qui s'allument l'une après l'autre.

Sous les trois bandes s'écrivent leurs noms : rouge, vert, bleu. Chaque pixel mélange ces trois lampes pour fabriquer une couleur.

Le pixel disparaît. En haut apparaissent les deux couleurs du bouton, à gauche l'arrière-plan jaune #FFD23F, à droite le texte bleu #0061F3. Les mots rouge, vert et bleu montent se placer au-dessus de chaque colonne. Chaque code se coupe en trois pastilles : FF, D2 et 3F pour le jaune, 00, 61 et F3 pour le bleu.

Sous chaque pastille s'écrit le réglage de sa lampe, de 0 à 255 : 255, 210 et 63 pour le jaune, 0, 97 et 243 pour le bleu.

Sous chaque réglage se glisse une barre de fraction et le nombre 255 : chaque réglage est divisé par 255, le maximum possible, pour obtenir une valeur relative. Un instant plus tard, chaque fraction laisse place à son résultat, de 0 à 1 : 1, 0,82 et 0,25 pour le jaune, 0, 0,38 et 0,95 pour le bleu.

Des barres montent pour montrer la lumière réelle que l'écran émet pour chaque part, avec leur valeur au-dessus. Pour le jaune : 1, 0,64 et 0,05. Pour le bleu : 0, 0,12 et 0,90.

dd explique que les codes de couleur sont réglés pour l'œil, qui distingue mieux les nuances dans le sombre que dans le clair : ils ne mesurent donc pas directement la quantité de lumière. Pour la retrouver, on élève chaque part à la puissance 2,2 environ. Le mot « puissance » et le nombre 2,2 s'affichent en grand, puis le 2,2 se réduit et vient se placer en exposant à côté de chaque part. Chaque barre redescend alors à sa lumière réelle : 0,82 donne 0,64, 0,25 donne 0,05, 0,38 donne 0,12 et 0,95 donne 0,90. Les valeurs affichées viennent de la formule exacte des WCAG, un peu plus fine, dont la puissance 2,2 est une bonne approximation.

Les colonnes s'effacent. Une courbe en cloche sur l'arc-en-ciel montre la sensibilité de l'œil selon la couleur de la lumière : haute dans le vert, faible dans le bleu. Près des trois lampes, des badges donnent la part de chacune dans le blanc de l'écran, qui dépend de la sensibilité de l'œil et de la lumière de chaque lampe : rouge 21 %, vert 72 %, bleu 7 %. Les colonnes reviennent et les badges descendent sous les barres. Chaque barre est multipliée par son badge et rapetisse : pour le jaune, 0,213, 0,461 et 0,004 ; pour le bleu, 0,000, 0,085 et 0,065 (calculés avec les valeurs exactes, puis arrondis).

Dans chaque colonne, les trois barres s'empilent et leurs valeurs s'additionnent : 0,213 + 0,461 + 0,004 ≈ 0,677 pour le jaune (la somme exacte, les valeurs affichées étant arrondies), 0,000 + 0,085 + 0,065 = 0,150 pour le bleu. Chaque pile devient un gris : un gris clair de 0,68 pour le jaune, un gris foncé de 0,15 pour le bleu, une fois arrondis.

Les deux gris montent prendre leur place dans un calcul : (0,68 + 0,05) / (0,15 + 0,05) ≈ 3,63 ; le calcul exact, (0,6771 + 0,05) / (0,1502 + 0,05), donne 3,63. Une note précise que 0,05 représente la lumière de la pièce reflétée par l'écran. En comptant la lumière de la pièce, le jaune émet 3,63 fois plus de lumière que le bleu : c'est le ratio. dd pointe le résultat et hoche la tête.

Pour finir, la fiche produit revient avec son tampon « Échec ». dd demande comment réparer ce bouton. Le bleu du texte fonce jusqu'à #0050C8 : le tampon rouge s'envole, un tampon vert « Réussi » le remplace, et la ligne devient « Ratio 4,88:1, au-dessus de 4,5:1 ». dd lève le pouce.

Pour finir, une animation du vérificateur de contraste d'Includdy, dans une fenêtre de navigateur à l'adresse includdy.com/contraste. Le vérificateur s'assemble : les onglets WCAG 2.2 et APCA, les champs « Couleur du texte » et « Couleur d'arrière-plan », la carte de résultat et l'aperçu ; la caméra glisse d'une partie à l'autre et un pointeur fait chaque geste. Au départ, du texte noir sur du blanc : 21,00:1. Légende : « Essayons ce bleu et ce jaune dans le vérificateur. » Le pointeur tape #0061F3 dans le champ du texte, puis #FFD23F dans celui de l'arrière-plan. Légende : « Saisissez la couleur du texte, puis celle de l'arrière-plan. » La carte passe au rouge : 3,63:1, « Seulement en grand ». dd montre le score. Légende : « Verdict immédiat : contraste insuffisant pour du texte normal. » Sous la carte, « Améliorations possibles » s'ouvre avec trois combinaisons proches : texte ajusté 4,54:1, texte et arrière-plan ajustés 4,52:1, arrière-plan ajusté 4,50:1. Légende : « L'outil propose alors des couleurs proches qui réussissent le test. » Le pointeur clique sur « Texte ajusté » : le texte devient #004fe1, la carte passe au vert, 4,54:1, « Lisible, AA pour le texte normal ». Légende : « Un clic, et votre texte devient lisible. » Pour finir, la fenêtre se range à gauche et une carte apparaît à droite : un QR code qui ouvre includdy.com/contraste, l'adresse includdy.com/contraste en grand et la mention « Gratuit, sans inscription ». dd lève le pouce. Légende finale : « Gratuit et sans inscription : includdy.com/contraste ».

Pour finir, la fenêtre et la carte s'effacent. dd reste seul sur la scène et fait une petite danse : il pointe le doigt en l'air, remue un derrière qu'il n'a pas et fait un clin d'œil. Puis il saute à sa place dans le mot « inclusion buddy » : ses deux lettres en deviennent le « dd » bleu, et une note précise « inclusion buddy : le compagnon de l'inclusion ». Le mot se replie en « includdy », le logo vient au premier plan, et le slogan s'affiche dessous pendant que la voix le dit : « L'accessibilité web rendue simple. Gagnez du temps en assurant votre conformité. »

Trois grandes pastilles de couleur s'alignent : à gauche le texte noir #000000, au milieu l'arrière-plan vert #16A34A d'un bouton, à droite le texte blanc #FFFFFF. dd, le logo d'Includdy avec des bras et des jambes, entre par la gauche et les regarde. Comme WCAG, APCA commence par mesurer la luminance de chaque couleur, la lumière qu'elle émet. Les pastilles noire et blanche pâlissent et, sous le vert, on retrouve les trois lampes du premier dessin animé : rouge, vert, bleu. Sous chaque nom, sa paire du code, 16, A3 et 4A, puis son réglage sur 255 : 22, 163 et 74. Des barres montent à la part de chaque lampe : 0,09, 0,64 et 0,29. Puis « puissance 2,4 » s'affiche en grand, et le 2,4 vient se placer en petit exposant à côté de chaque part. À cette étape, APCA utilise une simple puissance 2,4, là où la formule exacte de WCAG suit une courbe en deux parties, proche d'une puissance 2,2. Les barres baissent jusqu'à la lumière réelle : 0,00, 0,34 et 0,05. Sous les barres apparaissent les poids de l'œil, les mêmes que pour WCAG : ×21 %, ×72 % et ×7 %, et à droite, en petit, la courbe de sensibilité de l'œil revient en rappel, avec un point rouge, vert et bleu pour chaque lampe. Les barres rétrécissent encore : 0,0006, 0,2443 et 0,0037. Puis elles s'empilent en une seule barre grise, tandis que leurs valeurs viennent se poser au-dessus, l'une sous l'autre, pour une addition posée : 0,0006 + 0,2443 + 0,0037 = 0,2486. C'est le gris du vert pour APCA. À côté, un petit texte rappelle celui de WCAG : 0,2686. Le gris remonte sous la pastille verte. Les pastilles reprennent leur couleur et, sous chacune, apparaît son gris avec sa valeur : 0 pour le noir, 0,2486 pour le vert, 1 pour le blanc, et chacun se place sur une réglette qui va du noir au blanc. dd les pointe du doigt.

Les pastilles s'effacent et les gris se rangent en deux colonnes. À gauche, un bouton vert « Continuer » écrit en noir : du texte foncé sur clair. À droite, le même bouton écrit en blanc : du texte clair sur foncé. Le gris du vert se dédouble pour aller dans les deux colonnes. Première différence avec WCAG : le sens du contraste compte. dd regarde un bouton puis l'autre, un point d'interrogation au-dessus de la tête.

Pourquoi ? Les boutons et les gris s'écartent un instant, et deux panneaux apparaissent sous les mentions « Foncé sur clair » et « Clair sur foncé » : à gauche, « Aa » en noir sur un panneau blanc, à droite, « Aa » en blanc sur un panneau noir. L'œil s'adapte à la lumière qui entoure le texte : sur un arrière-plan foncé, un texte clair agit un peu comme une petite lampe. Exemple : il peut paraître plus gras et un peu flou, c'est le halo, et le « Aa » blanc se met à rayonner. APCA a mesuré des puissances propres à chaque sens, une pour l'arrière-plan et une pour le texte : 0,56 et 0,57 quand le texte est foncé sur clair, 0,65 et 0,62 quand il est clair sur foncé. Elles s'inscrivent sous les panneaux. dd regarde un panneau puis l'autre et pointe le « Aa » blanc, puis les boutons et les gris reviennent.

D'abord l'arrière-plan. Dans chaque colonne, la puissance s'affiche en grand : « puissance 0,56 » à gauche, « puissance 0,65 » à droite. Le mot s'efface, le nombre rétrécit et vient se placer en petit, en haut à droite de 0,2486 : c'est un exposant. Le résultat s'écrit à côté : 0,2486 puissance 0,56 égale 0,4586, et 0,2486 puissance 0,65 égale 0,4046. Puis seul ce résultat reste dans le gris. dd pointe les puissances, se penche pour suivre leur trajet, puis hoche la tête.

Ensuite le texte. APCA remonte d'abord un peu le noir pur : son 0 devient 0,0045. Les puissances du texte s'affichent à leur tour en grand, 0,57 pour le noir et 0,62 pour le blanc, puis passent en exposant de la même façon. Le noir donne 0,046 et le blanc reste à 1.

Deuxième différence avec WCAG : APCA soustrait au lieu de diviser. Les gris s'écartent et, dans chaque colonne, deux barres montent côte à côte, l'arrière-plan à gauche et le texte à droite, avec la mention « WCAG 2 » : ce sont d'abord les luminances de WCAG, plus 0,05. Le vert vaut 0,2686 + 0,05 = 0,3186, le noir 0 + 0,05 = 0,05 et le blanc 1 + 0,05 = 1,05. WCAG divise : il regarde combien de fois une barre est plus haute que l'autre. Des copies de la barre courte glissent une à une depuis la droite et s'empilent au-dessus d'elle jusqu'en haut de la grande, la dernière coupée : × 6,37 à gauche, le ratio de 6,37:1 du texte noir, et × 3,30 à droite, le ratio de 3,30:1 du texte blanc. Puis la mention devient « APCA » et les barres changent de hauteur : elles prennent les clartés corrigées d'APCA, 0,4586 et 0,046 à gauche, 0,4046 et 1 à droite. APCA soustrait : il mesure l'écart entre le haut des deux barres. Une accolade marque cet écart : 0,4126 à gauche, moins 0,5954 à droite. dd pointe la pile, puis se penche vers l'écart et hoche la tête. Les barres s'effacent et les gris reviennent. Dans chaque colonne, les deux valeurs se placent de part et d'autre d'un signe moins : clarté de l'arrière-plan moins clarté du texte. À gauche, 0,4586 moins 0,046 égale 0,4126. À droite, 0,4046 moins 1 égale moins 0,5954. Cet écart passe ensuite par trois opérations, chaque nouvelle valeur remplaçant la précédente. D'abord, on le multiplie par 1,14, un facteur d'échelle choisi pour que les seuils tombent sur des nombres ronds : 0,470 à gauche, moins 0,679 à droite. Puis APCA teste l'écart : sous 0,1, le score vaut zéro, ce qui efface les contrastes trop faibles ; ici, il dépasse 0,1. Sinon, on le rapproche de zéro de 0,027 : 0,443 à gauche, moins 0,652 à droite. Enfin, multiplié par 100, il devient le score Lc : Lc 44,3 pour le texte noir, Lc moins 65,2 pour le texte blanc. Le signe moins clignote : il indique un texte clair sur un arrière-plan foncé. dd pointe chaque opération, hoche la tête, puis pointe le signe moins.

Troisième différence avec WCAG : le score d'APCA donne une taille de texte minimale précise, là où WCAG n'a que deux catégories, texte courant et grand texte. Les calculs s'effacent, les scores montent sous les boutons, et dessous apparaissent deux carrés verts avec les lettres « Aa », minuscules. Les lettres grandissent. Le blanc devient lisible dès 21,75 px, en graisse normale, et s'arrête vite. Le noir doit grandir bien plus, jusqu'à 44 px, toujours en graisse normale. dd se penche pour suivre la course.

La colonne du noir pâlit et le carré blanc s'entoure de vert : APCA prédit le texte que l'œil lit le mieux, ici le blanc. dd lève le pouce et hoche la tête.

Pour résumer, tout s'efface et dd part en courant vers la gauche, les talons dans un petit nuage de poussière. Trois cartes apparaissent l'une après l'autre au centre. Première carte : « Le sens du contraste compte », avec un petit « Aa » noir sur blanc à côté d'un « Aa » blanc sur noir. Deuxième carte : « APCA soustrait les clartés », avec un signe moins à côté d'un signe diviser barré de rouge. Troisième carte : « Le score donne une taille minimale », avec un petit « Aa » qui grandit. dd tombe du haut de l'image sur la première carte, en soulevant de la poussière, et hoche la tête. À chaque nouvelle carte, il prend son élan jusqu'au bord, s'accroupit et saute par-dessus le vide jusqu'à la carte suivante, où il atterrit dans un nuage de poussière. Sur chaque carte, il s'arrête un instant, regarde la carte et hoche la tête. Sur la troisième, il regarde le « Aa » grandir et lève le pouce. Puis il s'élance d'un bond vers le coin en haut à droite et sort de l'image, avant de revenir en courant par la gauche jusqu'à sa place, près de la bulle.

Pour finir, une animation du vérificateur de contraste d'Includdy, dans une fenêtre de navigateur à l'adresse includdy.com/contraste. Le vérificateur s'assemble : les onglets WCAG 2.2 et APCA, les champs « Couleur du texte » et « Couleur d'arrière-plan », la carte de résultat et l'aperçu ; la caméra glisse d'une partie à l'autre et un pointeur fait chaque geste. Au départ, du texte noir sur du blanc. Légende : « Mettons ce bouton vert dans notre vérificateur, avec un texte blanc. » Le pointeur colle #16A34A dans le champ de l'arrière-plan, puis tape #FFFFFF dans celui du texte. En WCAG 2.2, la carte passe au rouge : 3,30:1. Le pointeur clique sur l'onglet APCA ; l'indicateur glisse et s'étire. Légende : « Passez sur APCA : la taille de texte minimale s'affiche. » La carte affiche Lc −65,2, « Seulement en grand, taille minimale : 22 px, ou 15 px en gras », « texte clair sur arrière-plan foncé ». La caméra glisse vers l'aperçu, qui dit : « Avec ce contraste, le texte normal doit faire au moins 22 px » (le tableau d'APCA donne 21,75 px, l'outil arrondit au-dessus). Légende : « En blanc, en graisse normale, il faut au moins 22 pixels. » Le pointeur remplace #FFFFFF par #000000 : Lc 44,3, « Très grand texte seulement, taille minimale : 44 px, ou 25 px en gras », et l'aperçu, « Lisible en grand seulement », demande au moins 44 px. dd écarquille les yeux. Légende : « En noir, il faudrait des lettres deux fois plus grandes. » Pour finir, la fenêtre se range à gauche et une carte apparaît à droite : un QR code qui ouvre includdy.com/contraste, l'adresse includdy.com/contraste en grand et la mention « Gratuit, sans inscription ». dd lève le pouce. Légende finale : « Gratuit et sans inscription : includdy.com/contraste ».

Pour finir, la fenêtre et la carte s'effacent. dd reste seul sur la scène et fait une petite danse : il pointe le doigt en l'air, remue un derrière qu'il n'a pas et fait un clin d'œil. Puis il saute à sa place dans le mot « inclusion buddy » : ses deux lettres en deviennent le « dd » bleu, et une note précise « inclusion buddy : le compagnon de l'inclusion ». Le mot se replie en « includdy », le logo vient au premier plan, et le slogan s'affiche dessous pendant que la voix le dit : « L'accessibilité web rendue simple. Gagnez du temps en assurant votre conformité. »