Aller au contenu
← 1001 Widgets
N° 033 · ●●○

Vérificateur de contraste

Une couleur de texte, une couleur de fond : le ratio de contraste WCAG tombe, avec le verdict pour le texte courant et les grands titres. Le bon exercice pour transformer une formule officielle en outil.

JS
Ce qu'on apprend
  • Calculer la luminance relative d'une couleur
  • Appliquer la formule du ratio WCAG
  • Distinguer les seuils AA et AAA
Pourquoi ce langage

Pourquoi un vérificateur de contraste ? Un gris clair sur fond blanc, c'est joli sur un grand écran et illisible au soleil sur un téléphone. Les règles WCAG fixent des seuils : 4,5 pour le texte courant, 3 pour les grands titres, et plus encore pour le niveau AAA.

Le calcul suit une recette précise. On convertit chaque canal en lumière réelle, car l'œil ne perçoit pas les valeurs de façon linéaire. On en tire la luminance, puis on compare la plus claire à la plus sombre.

Pourquoi en JavaScript simple ? Trois petites fonctions mathématiques, et l'aperçu montre le vrai rendu à côté du chiffre.

Comment ça marche

  1. DU CODE HEXADÉCIMAL AUX CANAUX

    '#9c9590' devient trois nombres entre 0 et 1.

    const rgb = h => [1, 3, 5].map(i => parseInt(h.slice(i, i + 2), 16) / 255);

  2. LINÉARISER

    Les valeurs sRGB sont « compressées » pour l'œil : on les remet en lumière réelle.

    const lin = c => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;

  3. LA LUMINANCE

    Le vert compte beaucoup plus que le bleu pour notre perception.

    function luminance(hex) {
  const [r, g, b] = rgb(hex).map(lin);
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

  4. LE RATIO

    Toujours la plus claire sur la plus sombre : le résultat va de 1 à 21.

    function ratio(a, b) {
  const l1 = luminance(a), l2 = luminance(b);
  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
}

  5. LE VERDICT

    On tronque à deux décimales : 4,499 ne doit pas être arrondi à 4,5.

    const r = Math.floor(ratio(texte, fond) * 100) / 100;
const verdict = {
  aaTexte: r >= 4.5, aaGrand: r >= 3,
  aaaTexte: r >= 7, aaaGrand: r >= 4.5,
};
Pièges

PIÈGE 1 : Comparer les valeurs brutes

Piège

Mauvais : faire la moyenne de r, g et b. Un jaune et un bleu de même moyenne n'ont pas du tout la même clarté.

Fix

Correct : linéariser chaque canal, puis les pondérer comme la formule officielle.

PIÈGE 2 : Arrondir vers le haut

Piège

Mauvais : Math.round(ratio * 100) / 100. Un ratio de 4,496 devient 4,5 et passe le test à tort.

Fix

Correct : tronquer avec Math.floor, pour ne jamais valider ce qui ne l'est pas.

PIÈGE 3 : Oublier la taille du texte

Piège

Mauvais : un seul verdict pour tout. Un titre de 32 pixels n'a pas besoin du même contraste qu'une note de bas de page.

Fix

Correct : afficher les seuils pour le texte courant et pour les grands textes, à partir de 24 pixels ou 18,66 pixels en gras.

PERSONNALISER
  • Une suggestion automatique : la couleur la plus proche qui passe le seuil AA, en assombrissant pas à pas.
  • Une grille qui teste toutes les paires de couleurs d'une palette.
  • Le futur algorithme APCA, plus fin pour les textes clairs sur fond sombre.
OPTIMISATION
  • Branchez ce calcul dans vos tests : une couleur de la charte qui ne passe plus le seuil fait échouer la vérification.
  • Gardez les couleurs du site dans des variables CSS, et testez les variables plutôt que des valeurs copiées.
VERS REACT

Les deux couleurs sont deux useState, le ratio se calcule au rendu.

Les fonctions de calcul vivent dans un fichier pur, réutilisable dans vos tests.

L'aperçu reçoit les couleurs en style en ligne : il montre exactement ce que l'utilisateur verra.

Commentaires
0/1000

Chargement des commentaires…