Comment fonctionne le calcul du contraste ?
Le vérificateur de contraste couleurs utilise la formule WCAG 2.1 pour mesurer la différence de luminance entre deux couleurs, généralement une couleur de texte et une couleur de fond. Il suffit de saisir les valeurs de vos couleurs (hex, RGB ou autres formats standards) pour obtenir le ratio exact.
Le ratio est calculé en fonction de la luminosité relative, puis comparé aux seuils WCAG selon le type de texte : normal ou grand. Cela permet de savoir immédiatement si votre combinaison respecte les exigences d'accessibilité.
Quels critères choisir selon votre projet ?
Les normes WCAG distinguent le texte normal et le texte grand, avec des seuils différents. Pour du texte normal, le contraste minimum est de 4,5:1 en niveau AA et 7:1 en niveau AAA. Pour du texte grand (24px ou 19px gras), les seuils sont plus bas : 3:1 (AA) et 4,5:1 (AAA).
Il est crucial d'indiquer si votre texte est 'grand' ou 'gras' pour appliquer la bonne règle. Ce choix impacte directement la conformité de votre interface, surtout pour les titres ou boutons qui ont une taille supérieure.
Limites et points importants à connaître
L’outil vérifie le contraste entre deux couleurs unies. Pour tester un texte sur une image ou un dégradé, il faut d’abord prélever la couleur dominante. Il ne prend pas en charge automatiquement la taille ou la graisse de la police : c’est à vous de préciser ces paramètres.
Les résultats sont fiables pour les couleurs pleines, mais n’intègrent pas les variations liées au profil colorimétrique ou à l’affichage sur différents appareils. Pour tester plusieurs paires, il faut faire des vérifications successives.
Questions fréquentes
Comment savoir si mon texte est considéré comme 'grand' ?
Un texte est 'grand' s’il mesure au moins 24px, ou 19px s’il est en gras. Ces tailles permettent d’appliquer des seuils de contraste WCAG plus souples.
Peut-on tester le contraste pour des éléments graphiques ou des icônes ?
Oui, il suffit de saisir les couleurs de l’icône et du fond. L’outil n’est pas limité au texte, mais il vérifie toujours selon les critères WCAG destinés à la lisibilité.
Que se passe-t-il avec les couleurs semi-transparentes ?
Les couleurs semi-transparentes doivent être composées sur le fond pour obtenir une couleur finale à tester. L’outil n’effectue pas ce calcul automatiquement.
Ce vérificateur prend-il en compte les profils couleur ou les différences d’affichage selon les appareils ?
Non, le calcul se base sur la valeur numérique des couleurs saisies. Pour des tests avancés liés au rendu, il faut utiliser des outils spécifiques ou tester sur plusieurs appareils.
Peut-on tester plusieurs paires de couleurs en une seule fois ?
Non, chaque test s’effectue séparément. Pour vérifier plusieurs combinaisons, répétez l’opération pour chaque paire.
Le calcul de contraste est-il fiable pour la vraie lisibilité ?
Le ratio WCAG est reconnu comme une référence pour l’accessibilité, mais la lisibilité peut aussi dépendre du contexte, des polices et des usages. Il est conseillé de compléter par des tests utilisateurs.
Un souci ou une idée pour cet outil ? Envoyez-nous votre avis