Testeur de contraste
Verifiez que vos combinaisons de couleurs respectent les normes d'accessibilite WCAG 2.1.
Titre d'exemple
Ceci est un paragraphe de texte normal. Verifiez que la lisibilite est suffisante pour vos utilisateurs.
Et voici du texte plus petit, comme une legende ou une note de bas de page.
Ratio de contraste
17.06:1
AA Normal : ratio minimum de 4.5:1 (texte standard)
AA Large : ratio minimum de 3:1 (texte 18px+ ou 14px bold)
AAA Normal : ratio minimum de 7:1 (contraste renforce)
AAA Large : ratio minimum de 4.5:1 (grand texte renforce)
Pourquoi le contraste des couleurs est essentiel en accessibilite web
Le contraste des couleurs est l'un des piliers de l'accessibilite numerique. Un contraste insuffisant entre le texte et son arriere-plan rend la lecture difficile, voire impossible, pour des millions de personnes atteintes de deficiences visuelles, de daltonisme ou simplement confrontees a des conditions de lecture defavorables (ecran en plein soleil, fatigue oculaire). Les WCAG (Web Content Accessibility Guidelines) definissent des ratios de contraste minimum pour garantir que votre contenu reste lisible par le plus grand nombre. En France, le RGAA (Referentiel General d'Amelioration de l'Accessibilite) impose ces memes regles aux sites publics et a de nombreux services prives depuis la loi du 11 fevrier 2005.
Comprendre les niveaux WCAG : AA et AAA
Niveau AA : le standard minimum
Le niveau WCAG AA exige un ratio de contraste d'au moins 4.5:1 pour le texte normal et 3:1 pour le texte large (18px et plus, ou 14px en gras). C'est le niveau requis par la plupart des legislations, y compris le RGAA en France et l'ADA aux Etats-Unis. Il garantit une lisibilite correcte pour la majorite des utilisateurs, y compris ceux avec une vision moderement reduite.
Niveau AAA : le standard renforce
Le niveau WCAG AAA est plus exigeant avec un ratio minimum de 7:1 pour le texte normal et 4.5:1 pour le texte large. Bien qu'il ne soit pas toujours obligatoire, atteindre ce niveau demontre un engagement fort envers l'inclusion et ameliore considerablement le confort de lecture pour tous les utilisateurs, notamment les personnes agees et celles souffrant de basse vision.
Elements non-textuels et composants d'interface
Depuis les WCAG 2.1, le critere 1.4.11 impose egalement un ratio de 3:1 pour les composants d'interface (boutons, champs de formulaire, icones) et les graphiques essentiels a la comprehension du contenu. Vos bordures, etats de focus et indicateurs visuels doivent donc aussi etre verifies.
Conseils pour choisir des combinaisons de couleurs accessibles
Privilegiez des couleurs sombres sur fond clair ou inversement pour maximiser le contraste. Evitez les combinaisons problematiques comme le rouge/vert (difficilement distinguables pour les daltoniens) ou le bleu clair sur fond blanc. Utilisez notre testeur pour verifier vos choix en temps reel. Pensez aussi a ne jamais transmettre une information uniquement par la couleur : ajoutez des icones, du texte ou des motifs. Enfin, testez vos designs avec des outils de simulation de daltonisme pour couvrir les formes les plus courantes : protanopie, deuteranopie et tritanopie.
Besoin d'un site accessible et conforme RGAA ?
Je vous accompagne dans la mise en conformite de votre site web avec les standards d'accessibilite WCAG et RGAA, de l'audit a la correction.
Parlons accessibilite