Qu'est-ce qu'un vérificateur de contraste de couleurs ?
Un vérificateur de contraste de couleurs mesure la différence de luminance entre une couleur de premier plan (texte) et une couleur d'arrière-plan, produisant un rapport de contraste tel que défini par les directives pour l'accessibilité du contenu Web (WCAG) 2.1. Ce rapport détermine si le texte est lisible pour les utilisateurs malvoyants ou ayant des déficiences chromatiques. WCAG définit deux niveaux de conformité — AA (minimum) et AAA (amélioré) — chacun avec des seuils différents pour le texte de taille normale et le texte de grande taille. Cet outil calcule le rapport instantanément et simule également la façon dont votre paire de couleurs apparaît sous les formes courantes de daltonisme.
Comment utiliser le vérificateur de contraste des couleurs
- 1Entrez votre couleur de premier plan (texte) sous forme de valeur HEX (e.g., #1e293b) ou utilisez le sélecteur de couleurs.
- 2Entrez votre couleur d'arrière-plan sous forme de valeur HEX (e.g., #ffffff) ou utilisez le sélecteur de couleurs.
- 3Affichez l'aperçu en direct montrant votre texte dans différentes tailles sur l'arrière-plan.
- 4Vérifiez le rapport de contraste et les résultats de réussite ou d'échec WCAG AA/AAA affichés ci-dessous.
- 5Utilisez le bouton Swap Colors pour inverser rapidement le premier plan et l'arrière-plan.
- 6Faites défiler vers le bas pour voir les simulations de daltonisme pour la protanopie, la deutéranopie et la tritanopie.
Cas d'utilisation courants
Conformité en matière d'accessibilité Web
Vérifiez que les combinaisons de couleurs de texte et d'arrière-plan de votre site Web répondent aux exigences WCAG 2.1 AA ou AAA avant le déploiement.
Validation du système de conception
Testez toutes les associations de jetons de couleur dans votre système de conception pour vous assurer que chaque combinaison est accessible et conforme.
Test de daltonisme
Prévisualisez la façon dont les utilisateurs atteints de protanopie, de deutéranopie ou de tritanopie perçoivent vos choix de couleurs et ajustez-les en conséquence.
Rapports clients et parties prenantes
Générez des preuves claires de réussite/d’échec pour les audits d’accessibilité, les examens de conformité ADA ou les évaluations de la section 508.
Questions fréquentes
Quel rapport de contraste est requis pour la conformité WCAG AA ?
WCAG AA nécessite un rapport de contraste minimum de 4.5:1 pour le texte de taille normale et de 3:1 pour le texte de grande taille (18 px+ ou 14 px+ gras). Ces seuils garantissent la lisibilité pour la plupart des utilisateurs ayant une déficience visuelle modérée.
Quelle est la différence entre les WCAG AA et AAA ?
WCAG AAA est une norme plus stricte exigeant 7:1 pour le texte normal et 4.5:1 pour le texte volumineux. Bien que AA soit considéré comme le niveau minimum acceptable, AAA offre une meilleure lisibilité et est recommandé pour le corps du texte sur les sites Web à fort trafic ou gouvernementaux.
Comment fonctionne la simulation du daltonisme ?
L’outil applique des matrices de transformation des couleurs scientifiquement dérivées qui se rapprochent de la façon dont les personnes atteintes de protanopie (aveugle en rouge), de deutéranopie (aveugle en vert) et de tritanopie (aveugle en bleu) perçoivent les couleurs. Il recalcule le rapport de contraste pour chaque paire simulée afin que vous puissiez vérifier l'accessibilité dans différentes conditions de vision.
Puis-je utiliser des valeurs RVB ou HSL au lieu de HEX ?
Actuellement, l'outil accepte les codes de couleur HEX (format #rrggbb). Vous pouvez utiliser l'outil complémentaire de conversion et de sélection des couleurs pour convertir d'abord les valeurs RVB ou HSL en HEX, puis coller le résultat ici.