Le seuil 3:1 pour le non-texte
Le critère WCAG 1.4.11 demande un contraste minimal de 3:1 pour les composants d’interface et objets graphiques qui portent une information. Cela inclut les bordures de champs, les icônes significatives, les contrôles personnalisés et les indicateurs de focus.
Boutons : texte, fond et bordure
Un bouton doit être vérifié sur plusieurs paires : texte sur fond du bouton, fond du bouton sur fond de page si la forme dépend de la couleur, bordure sur fond, état hover, état pressed et état focus.
Exemple CSS de focus visible
.button:focus-visible {
outline: 3px solid #0f62fe;
outline-offset: 3px;
}
/* Tester #0f62fe contre le fond adjacent */
Composants fréquents à auditer
FormulairesBordures, erreurs, labels, placeholders.
NavigationOnglets, menus, état actif.
IcônesActions seules ou signaux d’état.
FocusAnneaux, overlays et contours.