WCAG Contrast Ratio Calculator
| WCAG Level | Text Size | Required Ratio | Status |
|---|---|---|---|
| AA | Normal | 4.5:1 | -- |
| AA | Large | 3:1 | -- |
| AAA | Normal | 7:1 | -- |
| AAA | Large | 4.5:1 | -- |
Comment utiliser cet outil
Saisissez la couleur du premier plan (texte) et la couleur de l'arrière-plan au format hexadécimal (par exemple, #FFFFFF) ou utilisez les sélecteurs de couleurs. L'outil calculera automatiquement le ratio de contraste et indiquera s'il respecte les normes WCAG AA et AAA pour le texte normal et le texte agrandi. Utilisez les listes déroulantes pour vous concentrer sur une norme et une taille de texte spécifiques.
Formule et logique
Le ratio de contraste est calculé à l'aide de la luminance relative des deux couleurs, comme défini par les spécifications WCAG 2.0 et 2.1. La formule : (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance de la couleur la plus claire et L2 celle de la plus foncée. La luminance relative d'une couleur est calculée à partir de ses coordonnées sRGB.
Notes pratiques
Pour les sites web professionnels, respecter la norme WCAG AA pour le texte normal (4,5:1) est l'exigence légale minimale dans de nombreuses juridictions. Le non-respect peut entraîner des poursuites judiciaires et une perte de clients. Des ratios de contraste élevés améliorent la lisibilité pour tous les utilisateurs, pas seulement pour ceux en situation de handicap, ce qui conduit à une meilleure expérience utilisateur et à des taux de conversion plus élevés. Lors de la conception pour du texte agrandi (au moins 18 pt ou 14 pt en gras), les ratios de contraste requis sont plus faibles (3:1 pour AA, 4,5:1 pour AAA). Tenez compte de vos tailles de police typiques lors de l'évaluation.
Pourquoi cet outil est utile
Vérifiez rapidement les combinaisons de couleurs pendant la conception sans calculs manuels. Assurez-vous que votre site web, votre application ou vos supports marketing sont accessibles et inclusifs. Évitez les problèmes juridiques coûteux en respectant proactivement les normes d'accessibilité. Améliorez l'engagement des utilisateurs en rendant votre contenu plus lisible.
Questions fréquemment posées
Quel est un bon ratio de contraste pour mon site web ?
Pour la plupart des textes, visez au moins 4,5:1 (WCAG AA) et idéalement 7:1 (WCAG AAA) pour le texte normal. Pour le texte agrandi, 3:1 (AA) et 4,5:1 (AAA) sont acceptables.
Dois-je respecter à la fois AA et AAA ?
AA est le niveau minimum requis par la loi dans de nombreux endroits. AAA est une norme plus élevée qui offre une meilleure accessibilité mais est plus difficile à atteindre. Concentrez-vous sur AA pour la conformité et sur AAA lorsque c'est possible.
Comment le ratio de contraste affecte-t-il mon entreprise ?
Un mauvais contraste peut entraîner des taux de rebond plus élevés, des conversions plus faibles et des poursuites potentielles pour discrimination. Une conception accessible élargit votre clientèle et améliore la réputation de votre marque.
Conseils supplémentaires
Utilisez cet outil pendant la phase de conception pour choisir des palettes de couleurs à la fois conformes à votre marque et accessibles. Testez vos pages web réelles avec du contenu réel, car la taille de police, le poids et les motifs d'arrière-plan peuvent affecter le contraste perçu. N'oubliez pas que les exigences de contraste s'appliquent au texte et aux éléments non textuels comme les icônes et les contrôles de formulaire.