Loading...
Loading...
Testez n'importe quelle paire de couleur de texte et d'arrière-plan par rapport aux exigences de contraste WCAG 2.2 AA et AAA, avec un retour d'information instantané sur le succès ou l'échec et un aperçu en direct.
Higher ratios are more readable. 21:1 is pure black on white.
See your color pair on both body and heading sizes.
Normal body text at 16 pixels. WCAG 2.2 measures contrast between the foreground text and its immediate background — this preview shows the combination you entered above exactly as a user would see it.
Un vérificateur de contraste mesure la différence de luminance entre deux couleurs et la rapporte sous forme de ratio entre 1:1 (identique) et 21:1 (noir pur sur blanc pur). Les directives d'accessibilité utilisent ce ratio pour décider si le texte est lisible pour les utilisateurs ayant une basse vision, une daltonisme, ou des écrans vus en plein soleil. Cet outil suit la norme WCAG 2.2 — la même norme référencée par l'ADA aux États-Unis, la Loi européenne sur l'accessibilité, et la plupart des systèmes de design d'entreprise. Entrez n'importe quelles deux couleurs et vous obtenez un instantané de réussite/échec à travers les cinq seuils WCAG, plus un aperçu en direct à la fois pour les tailles de corps et de titres. Tout fonctionne dans votre navigateur — pas de téléchargement, pas de suivi, pas de compte.
Collez un code hex ou utilisez le sélecteur de couleurs pour la couleur au premier plan (texte). L'outil accepte également les abréviations à 3 chiffres comme #03A.
Faites de même pour l'arrière-plan. Si vous ne connaissez que la couleur du texte, laissez l'arrière-plan en blanc (#FFFFFF) pour le test par défaut.
Le grand nombre de ratio se met à jour au fur et à mesure que vous tapez. Un ratio inférieur à 3.0 échouera même le seuil WCAG le plus lâche pour le texte normal.
Les cinq badges montrent réussite/échec pour les seuils AA normal, AA large, AAA normal, AAA large, et composants UI. AA est le minimum légal habituel ; AAA est l'objectif amélioré pour le contenu clé.
Vérifiez que l'aperçu a l'air correct à la taille de titre et de corps, puis utilisez Copier CSS pour récupérer les déclarations `color:` et `background-color:` pour votre feuille de style.
Pour chaque canal (R, G, B mis à l'échelle de 0 à 1) : c_linear = (c ≤ 0.03928) ? c / 12.92 : ((c + 0.055) / 1.055)^2.4 Luminance relative : L = 0.2126·R_linear + 0.7152·G_linear + 0.0722·B_linear Ratio de contraste : ratio = (L_light + 0.05) / (L_dark + 0.05) où L_light = max(L1, L2) et L_dark = min(L1, L2)
La formule provient de WCAG 2.x et applique une courbe de correction gamma à chaque canal sRGB avant de calculer la luminance. Les poids (0.2126, 0.7152, 0.0722) reflètent la sensibilité des cônes humains à la lumière rouge, verte et bleue. Ajouter 0.05 aux deux termes empêche la division par zéro lorsque l'une des couleurs est noir parfait. Les ratios varient de 1:1 (couleurs identiques) à 21:1 (noir pur sur blanc pur).
Référence : WCAG 2.2 — Contraste (Minimum) 1.4.3
| Paire | Ratio & verdict |
|---|---|
#000000 sur #FFFFFF | 21:1 — passe tous les seuils Le contraste maximum canonique. Utilisé pour les interfaces de lecture longue. |
#1A73E8 sur #FFFFFF | 4.63:1 — passe AA normal, échoue AAA normal Bleu Google sur blanc. Légal pour le texte de corps, pas tout à fait AAA. |
#808080 sur #FFFFFF | 3.95:1 — échoue AA normal, passe AA grand Gris moyen sur blanc — bon pour les titres, trop clair pour les paragraphes. |
Convertir entre HEX, RGB et HSL avec des échantillons en direct, des curseurs et un copier instantané.
Calculez votre âge exact en années, mois et jours à partir de n'importe quelle date de naissance.
Vérifiez l'indice de masse corporelle à partir de la taille et du poids en utilisant des unités métriques ou impériales.
Calculez des pourcentages, des changements de pourcentage et des pourcentages d'un total en quelques secondes.
Dernière mise à jour