Testez les combinaisons de couleurs pour la conformité aux normes d'accessibilité WCAG 2.1 AA/AAA. Calculez les ratios de contraste instantanément. Parfait pour les designers et développeurs souhaitant garantir la lisibilité du texte. Fonctionne dans le navigateur.
Exemple de texte normal (16px)
Exemple de texte grand (18pt bold)
Les Règles pour l'Accessibilité des Contenus Web (WCAG) définissent des exigences de ratio de contraste pour garantir que le texte soit lisible par les personnes ayant des déficiences visuelles. Cet outil calcule le ratio de contraste entre deux couleurs et évalue la conformité aux normes WCAG 2.1 Niveau AA et AAA. Tous les calculs s'exécutent dans votre navigateur — aucune donnée n'est envoyée à un serveur.
Le ratio de contraste WCAG mesure la différence de luminance entre les couleurs de premier plan (texte) et de fond. Il est calculé comme (L1 + 0.05) / (L2 + 0.05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la couleur la plus foncée. Un ratio de 4,5:1 est requis pour la conformité AA avec du texte normal.
Le Niveau AA de WCAG exige un ratio de contraste d'au moins 4,5:1 pour le texte normal et 3:1 pour le texte grand. Le Niveau AAA est plus strict, exigeant 7:1 pour le texte normal et 4,5:1 pour le texte grand. La plupart des organisations visent la conformité AA, tandis que AAA est recommandé pour une accessibilité améliorée.
Le texte grand est défini comme 18 points (24 pixels) ou plus, ou 14 points (18,67 pixels) ou plus en gras. Le texte grand a des exigences de contraste plus basses car il est naturellement plus facile à lire.
La conformité du contraste des couleurs est légalement requise dans de nombreuses juridictions (ADA aux États-Unis, EAA en Europe). Elle améliore également la lisibilité pour tous les utilisateurs, notamment ceux ayant une basse vision, un daltonisme ou regardant des écrans en plein soleil. Un bon contraste profite à tous.