Vérificateur de contraste de couleurs

Vérifiez qu’un texte reste lisible sur son fond selon les règles d’accessibilité WCAG 2.2 (et le RGAA). Si le contraste est insuffisant, l’outil propose la couleur la plus proche qui convient.

Vos couleurs

Couleur du texte

Couleur du fond

Formats acceptés : #hex, rgb(), hsl() ou nom de couleur CSS. Une couleur de texte transparente (#RRGGBBAA) est mélangée au fond.

Grand texte : 24 px

Texte normal de 16 px. Portez ce vieux whisky au juge blond qui fume.

Petit texte de 13 px, comme une mention ou une légende.

Bouton

Rapport de contraste

—

Conformité WCAG 2.2

AA · texte normal4,5:1 minimum—
AA · grand texte3:1 minimum · 24 px, ou 18,66 px en gras—
AAA · texte normal7:1 minimum—
AAA · grand texte4,5:1 minimum—
Éléments d’interface et graphiques3:1 minimum · bordures de champs, icônes (critère 1.4.11)—

À propos du contraste de couleurs

Le rapport de contraste compare la luminance de deux couleurs, de 1:1 (identiques) à 21:1 (noir sur blanc). Les WCAG, reprises par le RGAA en France et la norme européenne EN 301 549, fixent des minimums pour que les textes restent lisibles par les personnes malvoyantes, sur un écran au soleil ou un vieux moniteur.

Fonctionnalités

Rapport de contraste calculé selon la formule WCAG
Cinq critères : AA et AAA pour le texte normal et le grand texte, éléments d’interface (1.4.11)
Aperçu en direct en grand texte, texte normal, petit texte et bouton
Correction proposée : la couleur de texte la plus proche qui atteint AA ou AAA, en gardant la teinte
Tous formats : #hex, rgb(), hsl(), noms CSS, transparence

Les seuils WCAG

AA, texte normal : 4,5:1, le niveau exigé dans la plupart des cas (RGAA, accessibilité légale)
AA, grand texte : 3:1, à partir de 24 px, ou 18,66 px en gras
AAA : 7:1 pour le texte normal, 4,5:1 pour le grand texte
Éléments d’interface : 3:1 pour les bordures de champs, icônes et graphiques

Comment utiliser l’outil

Étape 1 : choisissez la couleur du texte et celle du fond (pastille ou code)
Étape 2 : lisez le rapport et les critères conformes
Étape 3 : si besoin, cliquez sur « Utiliser » pour appliquer la couleur corrigée

Conseils

Le gris clair sur blanc est la cause la plus fréquente d’échec : visez au moins #767676 sur #FFFFFF
Vérifiez aussi le mode sombre : les contrastes changent complètement
Les logos et textes purement décoratifs ne sont pas concernés
Le rapport est tronqué (pas arrondi) : 4,49:1 n’atteint pas 4,5:1

Confidentialité

Tous les calculs sont faits dans votre navigateur : les valeurs saisies ne sont envoyées nulle part et nous n’y avons pas accès.