Portez ce vieux whisky au juge blond qui fume.
AaBbCcDdEeFf 0123456789 - aperçu du texte avec cette paire de couleurs.
Ce que ça fait
Calcule le ratio de contraste WCAG 2.2 entre une couleur d’avant-plan et une couleur d’arrière-plan, et le juge contre les seuils d’accessibilité : AA pour le texte normal (≥ 4,5:1), AA large pour le texte agrandi (≥ 3:1), et AAA (≥ 7:1). Le calcul est la vraie formule de luminance relative - chaque canal sRGB est linéarisé, combiné avec les coefficients WCAG, et le ratio vaut (lighter + 0.05) / (darker + 0.05).
L’outil accepte les couleurs hex #rgb et #rrggbb (insensible à la casse, avec ou sans le # initial), affiche les badges réussite/échec des trois seuils à la fois, et rend un panneau d’aperçu en direct - un pangramme et une ligne de glyphes/chiffres peints dans votre exacte paire de couleurs. 100 % côté client.
Comment l’utiliser
- Définissez la couleur d’avant-plan : cliquez sur la pastille pour ouvrir un sélecteur, ou saisissez une valeur hex dans le champ texte.
- Définissez la couleur d’arrière-plan de la même façon. L’outil s’ouvre sur
#e9e9f1sur#07070b, une paire qui passe AAA par conception. - Cliquez sur Swap pour échanger les deux couleurs - utile pour vérifier les variantes sombre-sur-clair et clair-sur-sombre d’un thème.
- Lisez le résultat : le ratio (2 décimales) plus les trois badges AA, AA large, AAA, chacun vert (réussite) ou rouge (échec).
- Consultez le bloc d’aperçu en dessous - votre texte rendu dans la paire choisie - pour le juger avec vos propres yeux.
- Si l’une des valeurs n’est pas une couleur hex valide, l’outil affiche une erreur et masque les résultats jusqu’à la correction.
Exemples
Vérifié en exécutant contrastRatio() depuis src/lib/color.ts (la fonction exacte qu’utilise l’outil) :
#e9e9f1 on #07070b 16.65:1 AA pass · AA large pass · AAA pass (tool defaults)
#ffffff on #000000 21.00:1 AA pass · AA large pass · AAA pass (the maximum)
#f8fafc on #1e293b 13.98:1 AA pass · AA large pass · AAA pass
#abc on #000000 10.69:1 AA pass · AA large pass · AAA pass (3-digit shorthand works)
#767676 on #ffffff 4.54:1 AA pass · AAA fail (the classic "just barely AA" gray)
#777777 on #ffffff 4.48:1 AA fail · AA large pass (one notch darker fails AA)
#3b82f6 on #ffffff 3.68:1 AA fail · AA large pass (Tailwind blue-500 on white)La paire #767676 contre #777777 montre pourquoi le calcul exact bat l’inspection visuelle : une différence d’un seul cran hex franchit la ligne AA de 4,5:1.
Bon à savoir
- Privé : tout le calcul s’exécute dans votre navigateur ; rien n’est envoyé nulle part.
- Les couleurs nommées (
red,white) et les autres formats de couleur CSS sont rejetés - hex uniquement. Saisissez#rgbou#rrggbb. - Il n’y a pas de badge AAA-large distinct ; l’outil affiche AA (normal), AA large et AAA (normal) exactement comme codé.
- Le ratio est symétrique - échanger avant-plan/arrière-plan ne change jamais le nombre, seulement la direction de lecture de l’aperçu.
- Outils liés : Sélecteur de couleurs & convertisseur, Générateur de palette de couleurs, Générateur de dégradés CSS