Mon texte a-t-il assez de contraste ? (WCAG)
Tape une couleur de texte et une couleur de fond : l'outil calcule le ratio de contraste (1:1 à 21:1) et affiche s'il passe AA / AAA pour petit texte, grand texte et composants UI.
Plus une pipette d'écran (Chrome/Edge) : échantillonne n'importe quel élément.
Tu vois la paire en direct : petit texte, grand texte, boutons d'exemple. Local : les couleurs ne quittent jamais le navigateur.
Critique pour l'accessibilité (a11y) : WCAG 2.1 AA est le minimum requis par la plupart des réglementations (Section 508, Directive européenne sur l'accessibilité du web, UK Equality Act).
Comment l'utiliser
- À droite : deux champs, « Premier plan » (texte) et « Arrière-plan ». Chacun accepte HEX, RGB, picker natif, et optionnellement une pipette d'écran.
- Le centre affiche la paire en direct : petit texte (15 px), grand texte (28 px), pangramme complet d'exemple et deux styles de bouton.
- Barre en dessous : ratio (par exemple « 4.83:1 ») et quatre badges PASS/FAIL : AA-small (4,5:1), AAA-small (7:1), AA-large (3:1), AA-UI (3:1).
- Quand AA-small échoue (le problème le plus courant), un bouton « Auto-fix » apparaît : il assombrit/éclaircit la couleur du texte en OKLCH (préservant la teinte) jusqu'à ce que le ratio atteigne 4,5:1.
- « Swap » échange premier plan ↔ arrière-plan : utile quand tu n'es pas sûr de quel côté ajuster.
Quand c'est utile
Là où le vérificateur de contraste brille, scénarios typiques :
- Design web / audits a11y : AA-small 4,5:1 est le standard pour le texte courant, AA-large 3:1 pour les titres, AA-UI 3:1 pour les bordures de bouton et icônes.
- Couleurs de marque : confirme que tes couleurs restent utilisables sur différentes surfaces.
- Light / dark mode : teste les combos pour les deux modes.
- Templates d'e-mail : Outlook rend mal les couleurs. Plus de contraste = texte lisible.
- Impression : même si WCAG vise les écrans, 4,5:1+ marche aussi bien sur papier.
- Pédagogie : obtiens l'intuition de pourquoi un texte « subtil » (gris clair sur blanc) se lit 1,5:1 : à peine visible.
Si tu dois convertir la couleur défaillante vers un autre format pour comparer les valeurs, utilise le convertisseur de couleurs. Pour la vue d'ensemble a11y, simule protanopie / deutéranopie / tritanopie dans le simulateur de daltonisme.