Comment utiliser cet outil
Suivez ces étapes simples pour calculer les ratios de contraste WCAG pour les actifs numériques de votre entreprise :
- Saisissez le code hexadécimal de votre couleur de premier plan (texte, boutons ou éléments) dans le champ Couleur de premier plan. Utilisez un format hexadécimal à 3 ou 6 chiffres avec un # (par exemple, #FFFFFF ou #FFF).
- Saisissez le code hexadécimal de votre couleur d'arrière-plan dans le champ Couleur d'arrière-plan.
- Sélectionnez le niveau de conformité WCAG que vous devez vérifier dans le menu déroulant. Choisissez entre les normes AA/AAA pour le texte normal ou grand.
- Cliquez sur le bouton Calculer le ratio de contraste pour voir vos résultats.
- Utilisez le bouton Réinitialiser pour effacer toutes les entrées et recommencer, ou Copier les résultats pour enregistrer vos conclusions.
Formule et logique
Cet outil utilise la formule officielle du ratio de contraste WCAG 2.1 pour garantir l'exactitude des besoins de conformité de l'entreprise :
- Tout d'abord, convertissez les deux codes hexadécimaux de couleur en leurs valeurs RVB (rouge, vert, bleu).
- Calculez la luminance relative de chaque couleur à l'aide de la formule : L = 0,2126*R + 0,7152*G + 0,0722*B, où R, V, B sont les valeurs RVB linéarisées (ajustées pour la perception humaine).
- Calculez le ratio de contraste comme (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance de la couleur la plus claire et L2 la luminance de la couleur la plus foncée.
Les seuils de conformité WCAG sont les suivants :
- AA Texte normal : Ratio de contraste ≥ 4,5:1
- AA Texte grand (18 pts+ ou 14 pts+ en gras) : Ratio de contraste ≥ 3:1
- AAA Texte normal : Ratio de contraste ≥ 7:1
- AAA Texte grand : Ratio de contraste ≥ 4,5:1
Remarques pratiques
Pour les équipes commerciales et de commerce électronique, gardez ces considérations concrètes à l'esprit lors de l'utilisation de cet outil :
- Les pages produit du commerce électronique doivent respecter la conformité WCAG AA pour tout texte afin d'éviter les procès en accessibilité et d'atteindre plus de clients, y compris ceux ayant des déficiences visuelles.
- Les e-mails marketing et les publicités sur les réseaux sociaux avec superposition de texte doivent utiliser des ratios de contraste conformes aux normes AA afin de garantir la lisibilité sur tous les appareils et conditions d'éclairage.
- Les guides de style de marque doivent documenter les combinaisons de couleurs approuvées avec leurs ratios de contraste afin de maintenir une cohérence sur tous les points de contact numériques, des sites Web aux applications mobiles.
- Les seuils de texte grand s'appliquent aux textes de 18 points ou plus, ou de 14 points ou plus en gras, ce qui est courant pour les titres et les boutons d'appel à l'action.
Pourquoi cet outil est utile
Les entrepreneurs, les propriétaires de petites entreprises et les vendeurs en ligne bénéficient de cet outil de plusieurs manières :
- Évitez les pénalités coûteuses de non-conformité en matière d'accessibilité en vérifiant les choix de couleurs avant le lancement de sites Web, d'applications ou de supports marketing.
- Améliorez l'expérience utilisateur pour tous les clients, y compris les 1 adulte sur 4 aux États-Unis souffrant d'un handicap, ce qui élargit votre base de clients potentielle.
- Gagnez du temps par rapport aux calculs manuels du ratio de contraste, avec des résultats instantanés et des détails de conformité pour tous les niveaux WCAG.
- Maintenez la cohérence de la marque en vérifiant rapidement les nouvelles couleurs ajoutées à votre palette de marque par rapport aux normes d'accessibilité.
Questions fréquemment posées
Quel est un bon ratio de contraste pour le texte d'une boutique en ligne ?
La plupart des sites e-commerce devraient viser au moins la conformité WCAG AA (4,5:1 pour le texte normal) pour répondre aux exigences légales et garantir une lisibilité pour tous les utilisateurs. Pour les boutons d'appel à l'action, le niveau AAA (ratio 7:1 pour le texte normal) est encore meilleur pour les taux de conversion.
Dois-je vérifier les ratios de contraste pour les textes grands comme les titres ?
Oui, mais les textes grands ont des seuils plus bas : WCAG AA exige 3:1 pour les textes grands (18 pts+ ou 14 pts+ en gras), tandis que AAA exige 4,5:1. Les titres sont souvent grands, utilisez donc le seuil approprié pour votre taille de texte.
Puis-je utiliser cet outil pour les supports imprimés de ma marque ?
Cet outil est conçu pour la conformité WCAG numérique, mais la formule du ratio de contraste s'applique également à l'impression. Cependant, les normes WCAG sont spécifiques au contenu Web et numérique. Les supports imprimés peuvent avoir des directives d'accessibilité différentes.
Conseils supplémentaires
Suivez ces bonnes pratiques pour tirer le meilleur parti de cet outil pour votre entreprise :
- Testez les combinaisons de couleurs en mode clair et sombre si votre site Web prend en charge ces derniers, car les ratios de contraste changent avec les changements d'arrière-plan.
- Vérifiez les ratios de contraste pour toutes les tailles de texte utilisées dans vos actifs numériques, pas seulement pour le texte de corps normal.
- Conservez un enregistrement des combinaisons de couleurs approuvées et de leurs ratios de contraste à partager avec vos équipes marketing, design et développement.
- Si une combinaison de couleurs ne respecte pas la conformité, essayez d'ajuster la luminosité d'une couleur de 10 à 20 % pour atteindre le seuil requis sans changer radicalement la palette de votre marque.