Contraste des couleurs
Vérifiez la lisibilité texte/fond selon les normes WCAG.
Outil exécuté dans votre navigateur : vos fichiers ne quittent pas votre appareil.
Vérifier le contraste des couleurs (WCAG)
Un texte peu contrasté fatigue les yeux et exclut les personnes malvoyantes. Saisissez la couleur du texte et celle du fond en HEX, RGB ou HSL : l'outil calcule le ratio de contraste et indique si les critères WCAG 2.x (AA et AAA) sont remplis pour le texte normal, le grand texte et les composants d'interface. Il propose une couleur conforme proche et simule le rendu pour quatre formes de daltonisme. Tout est traité dans votre navigateur : vos données ne quittent pas votre appareil.
Points forts
- Ratio de contraste calculé selon WCAG 2.x
- Niveaux AA et AAA : texte normal, grand texte, interface et icônes
- Couleurs en HEX, RGB ou HSL, avec sélecteur
- Suggestion de couleurs conformes proches, applicables en un clic
- Simulation de la deutéranopie, protanopie, tritanopie et achromatopsie
- Inversion texte et fond en un clic
Comment ça marche
- Saisissez ou choisissez la couleur du texte.
- Saisissez ou choisissez la couleur du fond.
- Lisez le ratio et les niveaux WCAG atteints.
- Appliquez au besoin une couleur conforme proposée.
Questions fréquentes
Quel contraste minimum pour l'accessibilité ?
Selon WCAG, 4,5:1 pour le texte normal au niveau AA et 7:1 au niveau AAA. Le grand texte (18 pt, ou 14 pt gras) et les composants d'interface demandent 3:1 en AA.
Ces critères valent-ils pour le RGAA ?
Oui. Le RGAA, référentiel d'accessibilité français, reprend les seuils de contraste des WCAG : 4,5:1 pour le texte courant et 3:1 pour le grand texte.
Mon contraste est insuffisant, que faire ?
L'outil propose une couleur de texte ou de fond de même teinte, à la luminosité ajustée au plus juste pour atteindre AA ou AAA. Cliquez dessus pour l'appliquer.
À quoi sert la simulation du daltonisme ?
Elle montre comment une personne atteinte de deutéranopie, de protanopie, de tritanopie ou d'achromatopsie perçoit votre combinaison, avec le contraste ressenti.
Outils similaires
- Couleurs et palettes : Extrayez la palette d'une image et convertissez les couleurs (HEX, RGB, HSL).
- Générateur CSS : Dégradés, ombres et coins arrondis, avec aperçu et code prêt à copier.
- Balises meta et Open Graph : Générez les balises SEO et prévisualisez le rendu Google et réseaux sociaux.