Comment ça marche
Saisissez une couleur de texte et une couleur de fond pour obtenir leur rapport de contraste, un aperçu en direct et un résultat réussi ou échoué pour chaque niveau WCAG. Si la paire échoue, l’outil propose la couleur de texte la plus proche, de même teinte, qui atteint 4,5:1, et un seul clic suffit pour l’appliquer.
Rapport de contraste = (luminance la plus claire + 0,05) ÷ (luminance la plus foncée + 0,05)
Exigences WCAG
- Texte normal : au moins 4,5:1 pour AA et 7:1 pour AAA.
- Grand texte (24 px, ou 18,66 px en gras) : au moins 3:1 pour AA et 4,5:1 pour AAA.
- Boutons, icônes et bordures de formulaire : au moins 3:1 par rapport à leur environnement.
Conseils
- Un texte gris sur fond blanc échoue souvent — vérifiez aussi les textes indicatifs et les légendes.
- Un bon contraste aide tout le monde, y compris les personnes qui lisent sur leur téléphone en extérieur.
- Utilisez le bouton d’inversion pour vérifier un texte clair sur un fond foncé.
Normes et sources
- La formule et les seuils de contraste suivent les critères de succès 1.4.3, 1.4.6 et 1.4.11 des WCAG 2.2 (W3C)
Dernière révision 7 octobre 2026
Questions fréquentes
Quel rapport de contraste faut-il ?
Un texte normal demande 4,5:1 pour le niveau WCAG AA et 7:1 pour AAA. Un grand texte demande 3:1 pour AA et 4,5:1 pour AAA.
Qu’est-ce qu’un grand texte ?
Un texte d’au moins 24 px, ou d’au moins 18,66 px s’il est en gras.
Que faire si mes couleurs échouent ?
Utilisez la couleur suggérée. Elle conserve votre teinte et votre saturation et ne modifie que la luminosité jusqu’à ce que la paire atteigne 4,5:1.
Le contraste compte-t-il pour les boutons et les icônes ?
Oui. Les WCAG demandent au moins 3:1 entre les éléments d’interface, comme les boutons, les icônes et les bordures de champs, et ce qui les entoure.
La transparence modifie-t-elle le résultat ?
L’outil utilise des couleurs opaques. Pour un texte semi-transparent, vérifiez la couleur réellement visible par-dessus le fond.