Français
Vérifiez le contraste WCAG et corrigez les combinaisons en échec en un clic.
Dernière mise à jour
Grand titre — 24px gras
Texte de corps. Le vif renard brun saute par-dessus le chien paresseux. Lisez un ou deux paragraphes pour voir si le contraste reste confortable sur la durée.
Légende — 12px régulier. WCAG ne protège que 14pt et plus à cette taille, donc le texte minuscule réclame le contraste le plus strict.
Un *vérificateur de contraste* est ce que designers et développeurs utilisent avant de livrer un écran. Il calcule le **ratio de contraste** entre deux couleurs — votre texte et son fond — avec la formule des Web Content Accessibility Guidelines (WCAG). Plus le ratio est élevé, plus le texte est lisible.
WCAG définit trois seuils. **3:1** est le minimum pour les grands titres (24px+ régulier ou 18,66px+ gras) et pour le bord visible des composants interactifs (boutons, champs, icônes). **4,5:1** est le minimum AA pour le corps de texte — la barre visée par la plupart des équipes. **7:1** est AAA, la note la plus haute, qui aide fortement les lecteurs malvoyants.
Le contraste n'est **pas** la même chose que la vivacité visuelle. Deux couleurs de marque très saturées peuvent rester difficiles à lire si leur *luminance* est proche. Cet outil applique la formule WCAG canal par canal, donne le ratio exact et note chaque contexte, donc vous n'avez pas à deviner.
Tapez ou collez un HEX, ou utilisez le sélecteur. Le premier plan, c'est votre texte ou icône ; le fond, c'est ce qui est derrière.
Le grand nombre à gauche est le ratio WCAG. En dessous de 3:1 c'est risqué pour n'importe quelle UI ; en dessous de 4,5:1 c'est un échec pour le corps.
Trois lignes montrent succès/échec pour texte normal (4,5/7), texte large (3/4,5) et composants UI (3:1). Visez la coche verte sur chaque ligne pertinente.
Quand AA échoue, l'outil pousse la luminosité du premier plan — en gardant la teinte — jusqu'à ce que la paire passe. Recliquez pour AAA.
Une fois les deux couleurs validées pour vos contextes, copiez le snippet CSS (color: + background:) et collez-le dans votre feuille ou vos design tokens.
Croisez ce que vous stylez avec le niveau nécessaire. Source : WCAG 2.2 Understanding 1.4.3 et 1.4.11.
| Cible | AA min | AAA min | Notes |
|---|---|---|---|
| Corps de texte (< 18pt régulier) | 4.5 : 1 | 7 : 1 | Règle par défaut pour paragraphes, étiquettes, légendes |
| Texte large (≥ 18pt régulier ou ≥ 14pt gras) | 3 : 1 | 4.5 : 1 | Titres, copy de hero, grandes citations |
| Composants UI et objets graphiques | 3 : 1 | — | Bordures de boutons, champs, icônes, focus rings |
| Logo ou décoration pure | Exempté | Exempté | Logotypes et texte incident sont exemptés — mais l'utilisabilité compte toujours |
| État désactivé | Exempté | Exempté | Les contrôles inactifs sont exemptés, mais n'en faites pas une excuse pour livrer des valeurs faibles |
color: #1f2937; /* slate-800 */background: #f9fafb; /* slate-50 *//* Contrast ratio ≈ 14.6:1 */Slate sombre classique sur quasi-blanc. Passe AAA pour le corps (≥ 7:1) avec marge. La majorité des UI produit devraient viser cette zone par défaut.
color: #3b82f6; /* blue-500 */background: #ffffff;/* Contrast ratio ≈ 4.0:1 */Les bleus vifs sur blanc atterrissent souvent près de 4:1 — lisibles pour les grands titres (passent 3:1 AA Large) mais échouent à 4,5:1 pour le corps. Utilisez-le pour boutons et CTAs à partir de 18px, pas pour des paragraphes.
color: #facc15; /* amber-400 */background: #ffffff;/* Contrast ratio ≈ 1.6:1 */Jaune brillant sur blanc est le piège classique : les couleurs paraissent fortes mais leur luminance est trop proche. Réservez ce combo aux fonds sombres (#facc15 sur #1f2937 donne ≈ 12:1).
