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.
Mode d'emploi
Vérifier un contraste en 3 étapes
Choisissez vos couleurs
Réglez la couleur du texte et celle du fond avec les pastilles, ou saisissez leur code hexadécimal.
Lisez le ratio
Le grand nombre affiche le rapport de contraste entre les deux couleurs, de 1:1 (identiques) à 21:1 (noir sur blanc).
Validez les niveaux
Les quatre pastilles indiquent la conformité AA et AAA ; ajustez une teinte jusqu'à ce qu'elles passent au vert.
À 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.
Questions fréquentes
Contraste et accessibilité
Comment le ratio est-il calculé ?
Il compare la luminance relative des deux couleurs, selon la formule du W3C : (clair + 0,05) / (foncé + 0,05). Le résultat va de 1:1 pour deux couleurs identiques à 21:1 pour du noir pur sur blanc pur. Plus il est élevé, plus le texte se détache.
Quels seuils WCAG faut-il respecter ?
Pour le niveau AA, le texte courant doit atteindre 4,5:1 et le grand texte 3:1. Le niveau AAA, plus exigeant, demande 7:1 pour le texte courant et 4,5:1 pour le grand texte. Le référentiel français RGAA reprend ces mêmes valeurs.
Qu'est-ce qu'un « grand texte » ?
Au sens des WCAG, c'est un texte d'au moins 24 px (18 pt), ou de 18,66 px (14 pt) lorsqu'il est en gras. En dessous, le texte est considéré comme courant et doit viser le seuil de 4,5:1.
Pourquoi le contraste est-il important ?
Un contraste suffisant rend le texte lisible pour les personnes malvoyantes, en cas de daltonisme, ou en plein soleil sur un téléphone. C'est aussi une obligation légale : en Europe, l'accessibilité numérique s'impose à de nombreux sites, sur la base des critères WCAG.
Comment corriger un contraste trop faible ?
Le plus efficace est de jouer sur la luminosité plutôt que sur la teinte : assombrissez le texte ou éclaircissez le fond jusqu'à franchir le seuil. Passer la police en gras ou l'agrandir aide aussi, puisque le grand texte bénéficie d'un seuil plus bas.
Continuer la découverte