Vérificateur de contraste de couleurs WCAG

Comment le ratio de contraste est réellement calculé

Ce vérificateur de contraste de couleurs WCAG n'invente aucune impression. Le ratio de contraste est un calcul figé, défini par WCAG. Tu prends chaque couleur, tu convertis les canaux rouge, vert et bleu de 0-255 vers 0-1, puis tu les linéarises (le sRGB stocke la luminosité sur une courbe, donc il faut défaire cette courbe avant que le moindre calcul ait du sens). Ensuite tu pondères les trois canaux, fortement vers le vert parce que c'est à peu près comme ça que fonctionne l'oeil humain, et tu les additionnes en un seul nombre de luminance relative. Deux luminances, la plus claire au-dessus, tu les mets dans (L1 + 0.05) / (L2 + 0.05), et il en sort un ratio quelque part entre 1:1 et 21:1.

Blanc sur blanc, c'est 1:1, inutile. Noir sur blanc, c'est le plein 21:1. Tout ce qui t'intéresse se situe entre les deux, et c'est au niveau des seuils que ça devient concret. Le 0.05 là-dedans est une petite constante pour le flare ambiant de l'écran, comme ça du noir pur contre du blanc pur ne part jamais vers l'infini. Tu n'as pas besoin de mémoriser tout ça, l'outil le fait. Mais ça aide de savoir que le nombre est réel et reproductible, pas une supposition.

AA contre AAA, et l'exception du texte large

WCAG définit deux niveaux de conformité et ils ne sont pas interchangeables. AA est celui que presque tout le monde vise, et c'est ce que la plupart des lois sur l'accessibilité référencent réellement. AAA est plus strict, parfois au point d'être impraticable sur tout un site, mais ça vaut le coup de l'atteindre sur le corps de texte quand tu le peux.

• AA texte normal demande au moins 4.5:1. C'est la barre que tes paragraphes et tes labels doivent franchir.
• AA texte large descend à 3:1, parce que des lettres plus grandes se lisent plus facilement à contraste plus bas. Large veut dire à peu près 24px (ou 18.66px en gras), à la louche.
• AAA texte normal veut 7:1. Magnifique si tu y arrives. Difficile à tenir sur un vrai design.
• AAA texte large demande 4.5:1, le même nombre que AA exige du texte normal.
• Composants d'interface et graphiques demandent 3:1 par rapport à ce qui les entoure. Ça couvre les bordures de champ, les icônes, les anneaux de focus, les lignes de graphique, bref les éléments qui ne sont pas du texte courant.

Les erreurs que je vois revenir sans arrêt

Le texte indicatif gris clair sur fond blanc, c'est le grand classique. Ça a l'air élégant dans la maquette et ça échoue AA dès qu'une vraie personne, sur un vrai portable, essaie de le lire en extérieur. Une autre : tester uniquement ton état par défaut et oublier le survol, le focus, l'état désactivé, et le contraste du texte posé sur un bouton coloré. Les gens testent aussi contre le mauvais fond, la vraie couleur de la page plutôt que l'échantillon derrière le texte, du coup le nombre auquel ils se fient est de la fiction. Et le texte indicatif n'est pas un label. Ne laisse pas un texte indicatif à 2.8:1 tenir lieu de label de champ accessible, parce qu'au moment où quelqu'un tape, l'indication disparaît.

Encore une, et elle piège tout le monde au moins une fois : ce ratio porte sur la luminance, pas sur la teinte. Deux couleurs peuvent te sembler radicalement différentes et quand même échouer, surtout du rouge contre du vert ou d'autres paires à luminosité équivalente. C'est aussi pour ça qu'un test de contraste est nécessaire mais pas suffisant pour les utilisateurs daltoniens. Passer 4.5:1 ne veut pas dire que tu peux encoder du sens uniquement par la couleur.

Pourquoi le contraste compte pour l'accessibilité et, oui, le SEO

Commençons par l'évidence : les personnes malvoyantes, celles dont les yeux vieillissent, ou quelqu'un avec un écran bas de gamme en plein soleil, tous lisent mieux ton site quand le contraste est honnête. Ça représente une grosse part de chaque audience, pas un cas marginal. Atteins AA et tu as aussi franchi une barre légale dans pas mal d'endroits, ce qui est une raison à part entière de t'en soucier.

L'angle SEO est plus indirect, et je mentirais en disant que le contraste est un signal de ranking direct, il ne l'est pas. Mais un texte lisible garde les gens sur la page au lieu de les faire rebondir, et la logique page-experience de Google s'appuie sur la vraie utilisabilité. Des outils comme Lighthouse lancent littéralement un audit d'accessibilité qui signale les échecs de contraste, et ce rapport, c'est ce que beaucoup d'équipes utilisent pour juger la qualité d'une page. Donc un site qui se lit bien tend à mieux s'en sortir sur les signaux mous qui font vraiment bouger le ranking : temps passé sur la page, visites de retour, moins de retours en arrière agacés. Corriger le contraste coûte peu. Le bénéfice apparaît à des endroits que tu ne relieras pas toujours à ça.

Questions fréquentes

De quel ratio de contraste ai-je vraiment besoin ?

4.5:1 pour le corps de texte normal, c'est le nombre à graver dans ta mémoire. C'est AA, et ça couvre l'essentiel de ce que tu écris. Les titres et les autres textes larges peuvent descendre à 3:1. Si tu vises AAA, pousse le corps de texte à 7:1. Dans le doute, vise 4.5:1 et tu te tromperas rarement.

4.5:1 suffit, ou je devrais chercher 7:1 ?

4.5:1 est franchement très bien pour la plupart des sites et c'est ce que la loi demande en général. 7:1 est meilleur pour la lisibilité, pas de débat, mais tenir AAA sur tout un design devient vite douloureux, surtout avec des couleurs de marque. Mon avis honnête : verrouille AA partout, puis va chercher AAA sur le corps de texte long où ça te coûte peu.

Le vérificateur de contraste envoie mes couleurs quelque part ?

Non. Tout le calcul tourne dans ton navigateur en JavaScript pur. Je ne vois jamais les couleurs que tu choisis, rien n'est posté vers un serveur. Tu pourrais débrancher ton câble réseau et ça marcherait encore.

Pourquoi ma couleur a l'air bien mais échoue quand même ?

Parce que le ratio mesure la luminance, pas à quel point les couleurs te paraissent différentes. Deux couleurs de luminosité proche peuvent jurer violemment à l'oeil et quand même rater le calcul. Le rouge et le vert sont les suspects habituels. Fie-toi au nombre plutôt qu'à ton intuition ici, ton intuition n'a pas été conçue pour ça.

Qu'est-ce qui compte comme texte large selon WCAG ?

À peu près 24px et plus en graisse normale, ou environ 18.66px et plus si c'est en gras. À cette taille, le seuil se détend à 3:1 pour AA, puisque des formes plus grandes restent lisibles à contraste plus bas. En dessous, traite-le comme du texte normal et tiens la ligne des 4.5:1.

Comment fonctionne le bouton qui suggère une teinte ?

Il prend la plus claire de tes deux couleurs et fait marcher sa luminosité par petits paliers, en recalculant le vrai ratio à chaque fois, jusqu'à ce que la paire franchisse 4.5:1 (AA normal). Ta teinte et ta saturation ne bougent pas, donc le correctif garde le caractère de ta couleur et ne troque que la luminosité strictement nécessaire. Si même le noir ou le blanc pur n'y arrivent pas, il te le dira au lieu de faire semblant.