Couleurs & design
Vérificateur de contraste WCAG
Vérifiez en un instant si vos couleurs sont lisibles par tous.
Ratio de contraste
- AA texte normal
- AA grand texte
- AAA texte normal
- AAA grand texte
Aperçu
Portez ce vieux whisky au juge blond qui fume.
Portez ce vieux whisky au juge blond qui fume.
Un texte gris clair sur fond blanc peut sembler élégant… et rester illisible pour une partie de vos visiteurs. Cet outil calcule le ratio de contraste exact entre une couleur de texte et une couleur de fond selon la norme WCAG 2.1, puis affiche les verdicts AA et AAA pour le texte normal comme pour le grand texte. Un aperçu sur une vraie phrase vous montre le rendu concret, et vous pouvez ajuster les deux couleurs au sélecteur ou les inverser d'un clic jusqu'à atteindre le niveau requis. Indispensable pour un site accessible, conforme et agréable à lire. Gratuit et sans inscription.
Comment faire ?
- Choisissez la couleur du texte et la couleur de fond (saisie ou sélecteur).
- Le ratio de contraste s'affiche instantanément, avec les verdicts AA et AAA.
- Contrôlez le rendu réel dans l'aperçu.
- Ajustez les couleurs jusqu'à obtenir le niveau visé.
Questions fréquentes
Quel ratio de contraste faut-il atteindre ?
Le niveau AA de WCAG exige 4,5:1 pour le texte normal et 3:1 pour le grand texte. Le niveau AAA, plus strict, demande 7:1 et 4,5:1. La plupart des sites visent le niveau AA.
Qu'est-ce qu'un « grand texte » au sens WCAG ?
Un texte d'au moins 18 pt (environ 24 px), ou 14 pt (environ 18,5 px) s'il est en gras. Les titres entrent souvent dans cette catégorie, ce qui autorise un contraste un peu plus faible.
Pourquoi le contraste est-il si important ?
Environ une personne sur douze perçoit mal certaines couleurs, et tout le monde lit un écran en plein soleil un jour ou l'autre. Un bon contraste améliore la lisibilité pour tous et fait partie des exigences légales d'accessibilité dans de plus en plus de pays.
Mon contraste est insuffisant, que faire ?
Foncez le texte ou éclaircissez le fond plutôt que de changer complètement de teinte : souvent, quelques points de luminosité suffisent à passer le seuil sans dénaturer votre charte graphique.