Vérifiez votre contraste
Le testeur de contraste gratuit Vivlab mesure le rapport de contraste entre une couleur de texte et une couleur de fond, selon les critères d'accessibilité WCAG, directement dans votre navigateur.
Choisissez vos deux couleurs : le rapport et les validations se mettent à jour automatiquement.
Texte d'exemple
Texte d'exemple
Rapport de contraste
17.01:1
AA · texte normal
Réussi
AA · grand texte
Réussi
AAA · texte normal
Réussi
AAA · grand texte
Réussi
Comprendre les niveaux WCAG
AA est le niveau recommandé : un rapport d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte.
AAA est le niveau renforcé : un rapport d'au moins 7:1 pour le texte normal et 4,5:1 pour le grand texte.
Le grand texte désigne un texte d'au moins 24 px, ou 18,5 px en gras.
À quoi sert le contraste
Le contraste WCAG et le ratio
Le contraste mesure l'écart de luminosité entre une couleur de texte et son fond. Les règles d'accessibilité WCAG l'expriment par un ratio, de 1:1 (aucun contraste) à 21:1 (noir sur blanc). Plus le ratio est élevé, plus le texte se détache nettement et reste lisible.
Les seuils AA et AAA
Le niveau AA, recommandé, exige un ratio d'au moins 4,5:1 pour le texte courant (3:1 pour le grand texte). Le niveau AAA, renforcé, monte la barre à 7:1 (4,5:1 pour le grand texte). Ces seuils garantissent une lecture confortable, y compris pour les personnes malvoyantes.
Pourquoi l'accessibilité compte
Un bon contraste améliore l'expérience de tous vos visiteurs, sur petit écran comme en plein soleil. C'est aussi une obligation légale pour de nombreux sites, et un signal apprécié des moteurs de recherche : un site accessible est mieux structuré, donc meilleur pour le référencement.
Notre conseil
Visez au moins 4,5:1 pour le texte courant : c'est le bon réflexe pour rester conforme au niveau AA sans effort. Pour les titres et le grand texte, vous disposez d'un peu plus de marge, mais ne descendez jamais sous 3:1.