Vérifiez les rapports de contraste WCAG 2.1 entre les couleurs de premier plan et d'arrière-plan, prévisualisez du texte exemple et voyez instantanément les résultats de réussite AA/AAA.
Fonctionnalités
- Sélection de couleurs en direct: Ajustez les couleurs de premier plan et d'arrière-plan avec le sélecteur Ant Design ou saisissez des valeurs HEX précises.
- Matrice WCAG: Consultez les exigences AA/AAA pour le texte normal, le texte volumineux et les graphiques d'interface utilisateur dans un seul tableau.
- Luminance précise: Les rapports de contraste suivent WCAG 2.1 en utilisant des canaux RVB linéarisés et incluent des lectures de luminance par couleur.
- Bloc de prévisualisation: Testez les titres et les paragraphes dans une carte d'exemple en direct avec votre palette choisie.
Guide d'utilisation
- Choisir les couleurs: Sélectionnez ou collez des valeurs HEX pour le premier plan et l'arrière-plan.
- Examiner le rapport: Vérifiez le rapport de contraste calculé et le tableau AA/AAA pour les informations réussite/échec.
- Ajuster la copie: Modifiez le texte exemple pour prévisualiser des étiquettes, boutons ou copies marketing réels.
Détails techniques
Luminance relative
Chaque canal RVB est converti en une valeur linéaire à l'aide de la courbe gamma WCAG avant de calculer la luminance avec les coefficients 0.2126, 0.7152 et 0.0722.
Rapport de contraste
La formule de rapport (L1 + 0.05) / (L2 + 0.05) compare les couleurs plus claires et plus foncées pour assurer une lisibilité cohérente sur tous les appareils.
Seuils
Le texte normal AA nécessite ≥ 4.5:1, le texte volumineux ≥ 3:1, le normal AAA nécessite 7:1, le grand AAA 4.5:1, et les objets graphiques doivent respecter 3:1.
Questions fréquentes
- Le texte volumineux utilise-t-il des seuils différents ?
- Oui. Le texte ≥ 18px régulier ou 14px gras est qualifié de volumineux et ne nécessite que 3:1 pour AA ou 4.5:1 pour AAA.
- Commentaire tester les dégradés ?
- Vérifiez les arrêts les plus clairs et les plus foncés du dégradé. Chaque paire d'arrêts doit respecter le rapport souhaité.
- Les icônes comptent-elles comme du texte ?
- Les icônes pleines et les graphiques d'interface utilisateur essentiels doivent avoir au moins un contraste de 3:1 par rapport à leur arrière-plan.
Documentation connexe
- WCAG 2.1 Contraste (Critère de réussite 1.4.3) - Orientations officielles sur les niveaux de contraste minimum pour le texte et les Images de texte.
- WCAG 2.1 Contraste (1.4.6) - Exigences de contraste améliorées pour la conformité AAA.
- MDN - Calcul de la luminance - Contexte sur la formule RVB linéaire utilisée dans les outils d'accessibilité.
- W3C - Mathématiques du rapport de contraste - Détails sur la formule de rapport, l'arrondi et la justification.
- Cartes de conception inclusive - Conseils sur l'association des couleurs et de la typographie pour des publics divers.