Couleur de texte accessible

Ce suggesteur de couleur de texte accessible prend une couleur hexadécimale de fond, une hexadécimale de texte de départ et un rapport de contraste WCAG cible, puis renvoie une couleur de texte suggérée qui atteint ce rapport en ne déplaçant que la luminosité HSL. La teinte et la saturation restent fixes, ainsi un bleu de marque reste bleu tout en s’assombrissant ou s’éclaircissant assez pour réussir AA ou AAA sur la surface donnée. Si la couleur de départ atteint déjà la cible, elle est renvoyée inchangée et marquée comme non ajustée. Les concepteurs, les auteurs de jetons de design et les tâches de CI s’en servent lorsqu’un vérificateur de contraste ne suffit pas : ils ont besoin d’une hexadécimale de remplacement déterministe, pas seulement d’un drapeau de réussite ou d’échec. Il n’y a ni appels réseau, ni graines aléatoires, ni lecture d’horloge.

Comment une recherche de luminosité atteint une cible de contraste WCAG

Le contraste sur le web n’est pas une affaire de goût. Les Règles pour l’accessibilité des contenus Web définissent un seul rapport de contraste à partir de la luminance relative, afin que le corps de texte, les boutons et les libellés restent lisibles pour les personnes malvoyantes.

Ce suggesteur part de votre hexadécimale de fond et d’une hexadécimale de texte de départ, puis ne change que la luminosité de cette couleur de texte en HSL jusqu’à ce que le rapport WCAG 2.x contre le fond atteigne la cible que vous avez demandée. La teinte et la saturation restent en place, ainsi un bleu marine de marque reste marine et un rouge de marque reste rouge ; seule varie la clarté ou l’obscurité de l’encre.

Le moteur linéarise chaque canal sRGB avec la courbe officielle par morceaux, construit la luminance avec les poids 0.2126, 0.7152 et 0.0722, et calcule la luminance plus claire plus 0.05 divisée par la plus sombre plus 0.05. Il parcourt ensuite la luminosité HSL par dixièmes de pour cent déterministes vers le noir et vers le blanc, reconvertit chaque pas en RGB 8 bits et conserve la première hexadécimale quantifiée dans chaque sens qui atteint la cible non arrondie.

Le candidat au plus petit changement de luminosité l’emporte ; une égalité préfère l’assombrissement, correction habituelle pour une typographie grise sur une carte claire. Si la couleur de départ atteint déjà la cible, elle est renvoyée inchangée afin de ne pas réécrire des jetons sans raison. Il n’y a ni jitter aléatoire, ni consultation réseau, ni raccourci lié à la date : les trois mêmes entrées produisent toujours la même hexadécimale suggérée et les mêmes drapeaux de validation.

Où un suggesteur de couleur de texte accessible justifie sa place

Les équipes produit arrivent sur cette page lorsqu’un gris de marque paraît élégant sur une diapositive marketing mais échoue comme corps de texte sur une carte blanche, lorsqu’un thème mode sombre est généré à partir de jetons clairs, ou lorsque les parties juridiques demandent une hexadécimale de remplacement plutôt qu’un avis de capture d’écran. Les concepteurs collent une surface et une encre de départ depuis Figma ou un fichier de jetons et rapportent l’hexadécimale suggérée dans la palette, au lieu de pousser à l’œil un curseur de luminosité.

Les spécialistes QA et accessibilité joignent le rapport d’origine, le rapport suggéré et l’hexadécimale suggérée aux tickets afin que les développeurs corrigent le couple exact. Les équipes contenu et marketing vérifient que les couleurs de campagne ont encore un compagnon de texte licite lorsqu’elles sont posées sur des fonds clairs ou sombres du site. Si vous devez seulement mesurer un couple déjà choisi, utilisez une page de vérificateur de contraste ; cette page possède l’intention de suggérer une couleur de texte qui réussit.