Critères de succès

WCAG 1.4.11 Contraste du contenu non textuel

Le critère de succès 1.4.11 exige un rapport de contraste d'au moins 3:1, par rapport aux couleurs adjacentes, pour les limites visuelles des composants d'interface utilisateur et pour les objets graphiques nécessaires à la compréhension du contenu. C'est un critère de niveau AA sous la règle 1.4 (Distinguable), ajouté dans les WCAG 2.1 - le pendant, pour le contenu non textuel, de l'exigence de contraste du texte du critère 1.4.3.

Ce que ce critère couvre et que le critère 1.4.3 ne couvre pas

Le critère 1.4.3 porte spécifiquement sur le texte. Celui-ci comble la lacune pour tout le reste de ce qui porte un sens visuel sans être du texte :

• Les bordures et les états des champs de formulaire : le contour d'un champ doit présenter un contraste suffisant par rapport à son arrière-plan pour être réellement perceptible comme un élément distinct et interactif, et non comme un trait à peine visible.
• Les icônes porteuses de sens, non accompagnées de texte - une icône de corbeille, une coche.
• Les indicateurs de focus : le contour affiché lorsqu'une personne atteint un élément au clavier doit présenter un contraste suffisant pour être réellement visible.
• Les éléments de graphiques et de diagrammes : barres, courbes et points de données nécessaires à la compréhension des données.

Ce qui est exempté

Les graphismes purement décoratifs qu'il n'est pas nécessaire de distinguer pour comprendre le contenu, les logos et les composants d'interface inactifs ou désactivés sont tous exemptés - selon la même logique que les exemptions du critère 1.4.3 pour les contenus fortuits et décoratifs.

Pourquoi cela compte autant que le contraste du texte

Un paragraphe magnifiquement contrasté ne sert à rien si la bordure du bouton « Envoyer » est presque invisible sur l'arrière-plan de la page, ou si le contour signalant l'erreur d'un champ obligatoire est trop discret pour être remarqué. Ce critère existe parce que la structure de l'interface - savoir où un composant s'achève et où le suivant commence, voir qu'une commande a le focus - est tout aussi essentielle à la bonne perception d'une page que la lecture de son texte, et parce que les personnes malvoyantes sont affectées par un contraste d'interface insuffisant exactement comme elles le sont par un contraste de texte insuffisant.

En pratique

Vérifiez comme vous vérifieriez le contraste du texte : mesurez les valeurs de couleur réelles de la bordure ou de l'icône d'un composant par rapport à son arrière-plan immédiat, avec un véritable calculateur de contraste, sans estimer visuellement. Les systèmes de conception aux bordures très claires et très discrètes - un choix esthétique minimaliste courant - sont ici la source de non-conformité la plus fréquente.

Questions fréquentes

Qu'est-ce que le critère WCAG 1.4.11 ?

Un critère de niveau AA qui exige un contraste d'au moins 3:1 pour les limites visuelles des composants d'interface actifs et pour les parties des graphiques nécessaires à la compréhension du contenu.

À quoi s'applique le critère 1.4.11 ?

Aux bordures des champs de formulaire, aux contours des boutons, aux indicateurs de focus, aux états des interrupteurs, et aux éléments d'icône ou de graphique porteurs de sens - non aux graphismes décoratifs ni aux composants inactifs.

En quoi le critère 1.4.11 diffère-t-il du critère 1.4.3 ?

Le critère 1.4.3 porte sur le contraste du texte (4,5:1 ou 3:1) ; le critère 1.4.11 porte sur les éléments visuels non textuels, comme les commandes et les graphiques, à 3:1.