Vérificateur de contraste WCAG
Vérifiez le ratio de contraste entre une couleur de texte et une couleur de fond selon les seuils d'accessibilité WCAG, avant de les utiliser sur votre site.
Exemple de titre
Voici un exemple de paragraphe de texte utilisant la couleur de texte et la couleur de fond choisies ci-dessus, pour juger visuellement de la lisibilité en plus du score WCAG.
Comment ça marche
Les recommandations WCAG définissent des ratios de contraste minimaux entre le texte et son arrière-plan pour garantir qu'un site reste lisible par les personnes malvoyantes ou dans des conditions d'affichage difficiles (écran peu lumineux, reflets). Avant de valider une combinaison de couleurs choisie sur Figma ou une charte graphique, cet outil calcule le ratio réel entre les deux couleurs et indique si elle respecte les seuils AA (niveau minimal recommandé) et AAA (niveau renforcé).
Quelle est la différence entre « texte normal » et « texte large » ?
Le seuil de contraste exigé dépend de la taille du texte : un texte large (à partir d'environ 18pt, ou 14pt en gras) reste lisible avec un contraste plus faible qu'un texte de taille normale, car les formes des lettres sont plus grandes et plus faciles à distinguer.
Dois-je viser AA ou AAA ?
Le niveau AA est le standard généralement recommandé et suffisant pour la plupart des sites web (et souvent une obligation légale selon les juridictions). Le niveau AAA est plus strict et recommandé pour du contenu où l'accessibilité est prioritaire, mais il est parfois difficile à atteindre avec certaines palettes de marque sans les modifier sensiblement.
Traitement 100% local : le calcul du ratio de contraste s'effectue directement dans votre navigateur via WebAssembly, sans aucun appel à un serveur externe.