Color Contrast Checker Tool est un petit utilitaire Android conçu pour une seule tâche : vous dire si une couleur de texte est vraiment lisible sur un fond, en utilisant les mêmes calculs que la norme WCAG. Nous avons aimé cette idée au point de créer notre propre version navigateur, Clarity Check, pour que quiconque choisisse des couleurs pour un site web, une présentation ou une application n’ait pas besoin d’installer quoi que ce soit pour obtenir le chiffre. Choisissez deux couleurs et le ratio se met à jour instantanément dès que vous changez l’une d’elles.
Vérifiez un ratio de contraste maintenant
Il s’ouvre avec une véritable paire déjà chargée, du texte blanc sur Indigo, afin que vous voyiez un ratio en direct et des badges de réussite/échec avant de toucher à quoi que ce soit. Faites glisser l’un des sélecteurs de couleur ou tapez un code hexadécimal pour vérifier votre propre paire.
Comment l'utiliser
Réglez votre couleur de texte sous « Texte » et votre arrière-plan sous « Sur », soit en faisant glisser le sélecteur de couleur natif, soit en tapant directement un code hexadécimal. Le ratio, l’aperçu du texte en direct et les trois badges (texte AA, large AA, texte AAA) se mettent tous à jour à chaque changement, sans bouton à appuyer. Appuyez sur Inverser pour permuter le texte et l’arrière-plan, ou appuyez sur l’une des paires prédéfinies pour charger une combinaison toute faite et voir où elle se situe. Tout ce que vous tapez reste dans votre navigateur ; votre dernière paire est enregistrée sur votre appareil afin qu’elle soit toujours là la prochaine fois que vous ouvrirez la page.
Comment cela se compare à Color Contrast Checker Tool
Clarity Check garde la partie de l’application originale qui compte vraiment au quotidien : tapez ou sélectionnez deux couleurs, obtenez le ratio de contraste WCAG et une indication claire de réussite ou d’échec par rapport aux seuils AA et AAA, instantanément et sans compte. L’aperçu du texte en direct est notre propre ajout, afin que vous ne lisiez pas seulement un chiffre, mais que vous voyiez vraiment comment l’appariement s’affiche pour un lecteur.
Ce que nous avons laissé de côté, c’est le reste d’une application Android dédiée : l’historique des projets enregistrés, la vérification par lots de plusieurs paires à la fois et tout accès hors ligne au-delà d’un seul onglet de navigateur. Si vous vérifiez les couleurs une fois lors de la conception de quelque chose sur le web, Clarity Check est suffisant. Si la vérification du contraste fait partie de votre flux de travail régulier et que vous la voulez sur votre téléphone sans avoir d’onglet navigateur ouvert, l’application Android est le meilleur choix.
Une dernière chose à noter : nous avons soumis l’interface de notre propre outil au même standard qu’il mesure. Chaque texte de chrome sur la page, étiquettes, badges, boutons, obtient un contraste de 4,5:1 par rapport à son arrière-plan. Un vérificateur de contraste qui ne pourrait pas passer son propre test serait une mauvaise publicité pour l’idée.
Obtenez l'application complète
Color Contrast Checker Tool est une application Android gratuite si vous voulez une vérification du contraste disponible en dehors du navigateur, avec votre historique enregistré sur l’appareil.
Questions fréquemment posées
Quelle formule ce vérificateur de contraste utilise-t-il ?
Celle exacte de WCAG 2.1 : luminance relative pour chaque couleur de ses canaux sRGB, puis le ratio de contraste (L1 + 0,05) / (L2 + 0,05) en utilisant la luminance la plus claire et la plus sombre. C’est le même calcul que les navigateurs et les outils de conception utilisent, donc une paire noir-sur-blanc lit 21:1 ici tout comme partout ailleurs.
Que signifient réellement AA et AAA ?
Ce sont les niveaux de conformité WCAG 2.1 pour le contraste du texte. AA nécessite au moins 4,5:1 pour le texte normal et 3:1 pour le texte volumineux (environ 18px gras ou 24px régulier et plus). AAA est plus strict : 7:1 pour le texte normal. La plupart des sites et applications visent AA ; AAA est pour le contenu où la lisibilité est encore plus importante, comme les produits axés sur l’accessibilité.
Est-ce le vrai Color Contrast Checker Tool ?
Non. Clarity Check est un outil navigateur que nous avons créé, inspiré par ce que fait l’application Android, et il n’est pas affilié à ou approuvé par son développeur. Il exécute la même formule WCAG, mais c’est notre propre code et interface. Les liens de téléchargement ci-dessus pointent vers l’application réelle.
Fonctionne-t-il hors ligne et mes données sont-elles privées ?
Une fois la page chargée, elle ne fait aucune autre demande réseau, donc une connexion perdue n’empêchera pas son fonctionnement. Rien de ce que vous tapez ou choisissez n’est envoyé nulle part ; vos dernières couleurs ne sont enregistrées que dans le stockage local de votre propre navigateur.
Est-ce gratuit ?
Oui, complètement. Aucune publicité, aucun compte, aucune limite sur le nombre de paires que vous vérifiez.
