Texte blanc sur bouton vert : mesurer avant de choisir

Saisir les vraies couleurs

Essayez #22c55e pour la surface et #ffffff pour le texte. Ce sont des exemples : utilisez les styles calculés du navigateur pour votre projet. Le premier plan est le libellé, le fond est le bouton lui-même, pas la page. Commencez avec deux couleurs opaques.

Comparer un libellé sombre

Conservez la surface et remplacez le texte par #111827. W3C AA fixe 4,5:1 pour le texte normal et 3:1 pour le grand texte. Consultez aussi le résultat de conformité plutôt que le seul nombre arrondi. Ne choisissez pas grand texte pour une petite étiquette.

• W3C · WCAG 2.2 · Contrast (Minimum)

Examiner les autres états

Si le survol change la surface, mesurez cette combinaison séparément. Atteignez le bouton au clavier et relisez son libellé. Recommencez en thème sombre si les couleurs changent. Les valeurs de la maquette peuvent différer des styles CSS réellement affichés.

Terminer sur la vraie page

L’outil compare deux couleurs HEX opaques sans auditer toute la page. Photo, dégradé et couche transparente demandent un examen supplémentaire. Testez le bouton sur mobile et au clavier. Notez les couleurs et états vérifiés pour pouvoir refaire le contrôle lors d’un changement de thème.