Vérificateur de Contraste
À propos de cet outil
La vérification du contraste des couleurs consiste à mesurer la différence de luminance entre les couleurs de premier plan et d'arrière-plan pour déterminer si le texte reste lisible pour tous les utilisateurs, y compris ceux ayant des déficiences visuelles. Les Règles pour l'accessibilité des contenus Web (WCAG), élaborées par le World Wide Web Consortium (W3C), établissent la norme internationale d'accessibilité numérique et définissent des seuils de contraste spécifiques que chaque site web et application devrait respecter. Les WCAG 2.2 spécifient deux niveaux de conformité pour le contraste. Le Niveau AA, la norme minimale exigée par la plupart des lois sur l'accessibilité, requiert un ratio de contraste d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte (18pt normal ou 14pt gras). Le Niveau AAA, la norme améliorée recommandée pour le contenu gouvernemental, de santé et éducatif, exige 7:1 pour le texte normal et 4,5:1 pour le grand texte. Ces seuils reposent sur des recherches sur la perception des contenus à l'écran par les personnes ayant une vision modérément basse. L'accessibilité est également une obligation légale dans de nombreuses juridictions. L'Americans with Disabilities Act (ADA) aux États-Unis, la Section 508 du Rehabilitation Act et la norme européenne EN 301 549 imposent que le contenu numérique soit perceptible par les personnes handicapées. La non-conformité peut entraîner des poursuites, des amendes et l'exclusion d'une partie importante de votre audience. Cet outil calcule les ratios de contraste en convertissant les valeurs sRGB en RGB linéaire, en calculant la luminance relative de chaque couleur avec les coefficients ITU-R BT.709 et en appliquant la formule WCAG (L1 + 0,05) / (L2 + 0,05). Il inclut aussi une simulation de daltonisme pour la protanopie, la deutéranopie et la tritanopie, aidant les designers à vérifier que leurs choix de couleurs fonctionnent pour les quelque 300 millions de personnes atteintes de déficience de la vision des couleurs. Tous les calculs s'exécutent localement dans votre navigateur.
Comment Utiliser
- Entrez vos couleurs de texte (premier plan) et d'arrière-plan en utilisant les sélecteurs ou codes HEX.
- Vérifiez le ratio de contraste et les résultats de conformité WCAG. Vert indique réussi, rouge échoue.
- Utilisez la simulation de daltonisme pour vérifier que vos couleurs fonctionnent pour les utilisateurs malvoyants.
Méthodologie
Le calcul du ratio de contraste suit l'algorithme WCAG 2.2 avec précision. D'abord, le code hexadécimal de chaque couleur est décomposé en ses composantes rouge, verte et bleue, qui sont ensuite normalisées en valeurs entre 0 et 1 en divisant par 255. Ces valeurs linéaires subissent une correction gamma en utilisant la fonction de transfert sRGB : les valeurs égales ou inférieures à 0,03928 sont divisées par 12,92, tandis que les valeurs plus grandes utilisent la formule ((valeur + 0,055) / 1,055) élevée à la puissance 2,4. Cette correction gamma tient compte de la manière non linéaire dont les écrans émettent la lumière. Ensuite, la luminance relative est calculée en utilisant les coefficients ITU-R BT.709 : L = 0,2126R + 0,7152G + 0,0722B. Ces poids reflètent la sensibilité différente de l'oeil humain à chaque couleur primaire, le vert contribuant le plus à la luminosité perçue. Le ratio de contraste final est calculé comme (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance de la couleur la plus claire. Les résultats vont de 1:1 (couleurs identiques) à 21:1 (noir pur sur blanc pur). L'outil évalue ensuite ce ratio par rapport aux seuils AA et AAA pour le texte normal et le grand texte, fournissant un résultat clair de réussite ou d'échec pour chaque niveau de conformité.
Comprendre vos Résultats
Un ratio de contraste de 4,5:1 ou supérieur satisfait le WCAG AA pour le texte normal, la norme que la plupart des sites web devraient viser. Un ratio de 3:1 satisfait l'AA pour le grand texte (18pt normal ou 14pt gras et plus) et suffit également pour les composants d'interface comme les bordures de formulaires, les icônes et les indicateurs de focus. Pour le niveau amélioré AAA, il faut 7:1 pour le texte normal et 4,5:1 pour le grand texte. Lorsque l'outil affiche "Échoue", cela signifie que les utilisateurs ayant des déficiences visuelles modérées pourraient avoir du mal à lire. Pour améliorer le contraste tout en préservant l'esthétique de marque, essayez d'assombrir ou d'éclaircir une couleur progressivement plutôt que de la remplacer entièrement. Souvent un changement de seulement 10-15% de luminosité suffit pour franchir le seuil. Les pièges courants incluent l'utilisation de texte d'espace réservé gris clair, le recours à des graisses de police fines qui réduisent le contraste perçu et l'oubli du contraste des éléments désactivés. Les résultats de la simulation de daltonisme sont tout aussi importants. Même si vos couleurs passent la vérification du contraste, elles peuvent devenir indiscernables pour les utilisateurs avec une déficience de la vision des couleurs. Un bouton rouge sur fond vert pourrait avoir un contraste adéquat pour la vision normale mais apparaître presque identique pour quelqu'un avec une deutéranopie. Vérifiez toujours votre design pour tous les types de vision simulés et utilisez des indices supplémentaires comme des icônes, des motifs ou des étiquettes textuelles.
Exemples Pratiques
Une startup qui redesigne son site marketing teste ses couleurs de marque (#2563EB texte bleu sur fond gris clair #F8FAFC) et trouve un ratio de 5,2:1, satisfaisant AA mais pas AAA. Ils foncent le bleu à #1D4ED8, atteignant 7,1:1 et satisfaisant les deux normes sans modifier significativement leur identité de marque. Un développeur d'application de santé vérifie le style de ses messages d'erreur (texte rouge sur blanc) et découvre que #EF4444 sur #FFFFFF n'atteint que 3,9:1, échouant même au AA pour le texte normal. La simulation de daltonisme révèle qu'il apparaît aussi pâle pour les utilisateurs protanopes. Ils passent à #DC2626 et ajoutent une icône d'avertissement. Un designer UI valide que toutes les étiquettes de boutons, bordures de formulaires et indicateurs de focus dans une bibliothèque de composants respectent au moins l'exigence de 3:1 pour les éléments non textuels, tout en s'assurant que le texte courant atteint le seuil AA complet de 4,5:1.
Conseils Pratiques pour un Design Accessible
Commencez par choisir des paires de couleurs à fort contraste, puis construisez votre palette autour d'elles. Visez au moins 7:1 de contraste pour le texte courant même quand seul le AA (4,5:1) est requis, car cela offre une marge de sécurité confortable. Ne vous fiez jamais uniquement à la couleur pour transmettre des informations. Utilisez des icônes, des soulignements ou des étiquettes textuelles comme indicateurs secondaires afin de ne pas exclure les utilisateurs daltoniens. Testez vos designs en mode niveaux de gris pour repérer rapidement les problèmes de contraste. Si des éléments disparaissent ou se confondent sans couleur, le contraste est insuffisant. Vérifiez toujours le mode clair et le mode sombre. Les thèmes sombres ont souvent un contraste effectif plus faible, surtout avec du texte coloré sur fond sombre. Vérifiez les états de survol et de focus séparément, car ces états interactifs utilisent parfois des couleurs plus claires qui ne respectent pas les exigences. Installez des extensions de navigateur d'accessibilité comme axe DevTools ou WAVE pour auditer des pages entières, et combinez la vérification du contraste avec la simulation de daltonisme pour une couverture complète.
Sources
Tous les calculs sont effectués localement dans votre navigateur. Aucune donnée n'est envoyée à un serveur.