WCAG Contrast Ratio Calculator
Check if your color combinations meet accessibility standards for text and UI components
Comment utiliser cet outil
Saisissez vos couleurs de premier plan (texte/icône) et d'arrière-plan à l'aide des sélecteurs de couleurs ou en saisissant des valeurs hexadécimales (par exemple, #FF5733). Sélectionnez le type d'élément que vous testez—texte normal, texte grand ou composants d'interface utilisateur. Cliquez sur Calculer pour voir le rapport de contraste et la conformité WCAG pour chaque norme. Utilisez Réinitialiser pour recommencer avec les couleurs par défaut. La comparaison visuelle montre comment vos couleurs apparaissent ensemble.
Formule et logique
L'outil calcule la luminance relative de chaque couleur à l'aide de la formule de l'espace colorimétrique sRGB : chaque canal RVB est converti en espace linéaire (si ≤ 0,03928, diviser par 12,92 ; sinon, appliquer ((c+0,055)/1,055)^2,4). Luminance = 0,2126×R + 0,7152×G + 0,0722×B. Rapport de contraste = (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance la plus claire et L2 la plus sombre. Cela suit les spécifications WCAG 2.1.
Notes pratiques pour les entreprises
Pour les sites de commerce électronique, assurez-vous que les descriptions de produits, les prix et les boutons d'appel à l'action respectent au moins la norme WCAG AA pour le texte normal (4,5:1) afin d'éviter les risques juridiques et d'améliorer la conversion. Si vos couleurs de marque ne sont pas conformes, ajustez légèrement la couleur la plus claire—souvent, une petite augmentation de la luminosité peut atteindre la conformité sans refonte radicale. Les composants d'interface utilisateur (boutons, icônes, champs de formulaire) ne nécessitent que 3:1, ce qui offre plus de flexibilité. Testez les combinaisons de couleurs en mode clair et sombre si votre site les prend en charge. N'oubliez pas que les exigences de contraste s'appliquent également au texte sur les images—utilisez des superpositions ou des ombres de texte pour maintenir la lisibilité.
Pourquoi cet outil est utile
La conformité en matière d'accessibilité est de plus en plus une exigence légale pour les entreprises, avec une augmentation des poursuites judiciaires. Cet outil vous aide à auditer proactivement votre site, évitant des corrections coûteuses et des dommages à la réputation. Au-delà de la conformité, un bon contraste améliore la lisibilité pour tous les utilisateurs, en particulier dans les environnements lumineux ou pour les personnes ayant une basse vision—ce qui a un impact direct sur l'engagement des utilisateurs et les ventes. Pour les commerçants et les entrepreneurs, c'est une étape de validation rapide avant de lancer de nouvelles pages ou campagnes.
Questions fréquemment posées
Quelle est la différence entre la conformité AA et AAA ?
AA est la norme légale minimale dans de nombreuses juridictions (4,5:1 pour le texte normal). AAA est un objectif plus élevé (7:1 pour le texte normal) qui améliore encore l'accessibilité mais est plus difficile à atteindre avec des couleurs de marque vives. La plupart des entreprises visent AA pour le contenu principal et AAA lorsque c'est possible.
Ces ratios s'appliquent-ils aux logos et aux éléments décoratifs ?
Non. Les exigences de contraste WCAG s'appliquent au texte et aux composants d'interface utilisateur qui transmettent des informations. Les logos, les images purement décoratives et les grandes images d'arrière-plan sont exemptés. Cependant, si du texte est intégré dans une image, ce texte doit respecter les ratios de contraste.
Comment corriger une combinaison de couleurs non conforme ?
Ajustez la couleur la plus claire pour la rendre plus sombre ou la couleur la plus sombre pour la rendre plus claire. Augmentez la différence de luminance. Des outils comme celui-ci vous aident à itérer rapidement. Pour les composants d'interface utilisateur, envisagez d'ajouter des ombres subtiles ou des contours pour améliorer la séparation sans changer la couleur de base de la marque.
Conseils supplémentaires
Testez régulièrement la palette de couleurs de votre site, en particulier après des refontes. Utilisez ce calculateur en conjonction avec des simulateurs de daltonisme (comme Coblis) pour vous assurer que vos conceptions fonctionnent pour les utilisateurs ayant une déficience visuelle. Pour le commerce électronique, portez une attention particulière aux affichages de prix, aux messages d'erreur et aux étiquettes de champs de formulaire—ceux-ci sont essentiels pour la conversion et l'accessibilité. Documentez votre palette de couleurs avec leurs ratios de contraste pour référence future. Notez que WCAG 2.2 (la plus récente) maintient les mêmes exigences de contraste, donc cet outil reste à jour.