Regardez votre bouton « Ajouter au panier » et posez-vous une drôle de question : s'il n'y avait aucun texte dessus, pourrait-on quand même dire que c'est un bouton ? Maintenant, le champ de recherche en haut de votre page - où finit-il ? Y a-t-il un bord visible, ou le champ se fond-il dans l'arrière-plan jusqu'à ce que vous cliquiez dedans ? La plupart des sites ont au moins une commande qui répond mal à ces questions : un bouton gris pâle sur une page blanche, un champ de formulaire bordé du plus fin des traits, un jeu d'icônes délavées en un murmure de bon goût. Sur l'écran calibré du concepteur, dans une pièce tamisée, tout a l'air propre et moderne. Pour un client malvoyant, sur un portable bon marché incliné en plein jour, les bords ne sont tout simplement pas là. Cet écart a sa propre règle WCAG, et c'est l'une des plus souvent manquées de tout le Web.
Faits essentiels
- Le critère de succès 1.4.11 Contraste des éléments non textuels de WCAG (Web Content Accessibility Guidelines) est de niveau AA et a été ajouté dans WCAG 2.1 (2018) (W3C).
- La règle : l'information visuelle nécessaire pour identifier les composants d'interface utilisateur et leurs états, ainsi que les objets graphiques nécessaires à la compréhension du contenu, doit avoir un contraste d'au moins 3:1 avec les couleurs adjacentes (W3C).
- C'est distinct du contraste du texte : la règle du texte (1.4.3, niveau AA) demande 4,5:1 sur le texte de taille normale ; le contraste non textuel est son propre test à 3:1 pour les commandes et les graphiques porteurs de sens (W3C).
- Le seuil applicable de l'Ontario est WCAG 2.0 niveau AA (RNAI, Règl. de l'Ont. 191/11, art. 14, pour les organisations de 50 employés ou plus et le secteur public) - et comme le 1.4.11 est un critère de 2.1, il se situe juste à l'extérieur de ce seuil légal, mais à l'intérieur de WCAG 2.2 (ontario.ca / W3C).
- Le prochain RCL (Rapport de conformité en matière d'accessibilité) pour les organisations de 20 employés ou plus est dû le 31 décembre 2026 (ontario.ca).
Qu'exige réellement la règle sur le contraste des éléments non textuels ?
Quelque chose de plus étroit que « mettez tout en fort contraste », et cela se divise en deux volets. Le premier, ce sont les composants d'interface utilisateur : les parties d'une commande que vous devez voir pour savoir que c'est une commande et dans quel état elle est. Cela veut dire le contour d'un bouton, le pourtour d'un champ de texte, la coche dans une case, le point dans un bouton radio sélectionné, l'interrupteur qui dit activé ou désactivé, le contour de focus qui montre où vous êtes quand vous tabulez. Chacun de ces indices visuels doit atteindre 3:1 avec ce qui l'entoure. Le second volet, ce sont les objets graphiques : les parties d'une image ou d'un diagramme dont vous avez besoin pour en saisir le propos - les pointes d'un diagramme circulaire, les courbes d'un graphique, une icône qui porte un sens sans aucune étiquette de texte à côté.
Il y a des exceptions sensées, et elles comptent. Une commande inactive ou désactivée n'a pas à respecter le ratio. Tout ce dont l'apparence est laissée entièrement au navigateur par défaut, sans que votre design y touche, est exempté. Et là où une présentation particulière est essentielle - un logo d'entreprise, un drapeau, une photographie, une capture d'écran - la règle s'efface. Ce qui reste, c'est le mobilier quotidien de votre site : les boutons, les champs et les icônes que les gens doivent réellement trouver et utiliser.
Où les vrais sites échouent-ils à cela sans le remarquer ?
Aux endroits où un concepteur a choisi « discret » et ne l'a jamais testé sur un mauvais écran. Le champion incontesté est le champ de formulaire sans bordure ou à trait fin - une boîte de recherche ou un champ de caisse sans bord, ou un bord si pâle qu'il n'atteint jamais le 3:1, de sorte qu'un utilisateur malvoyant ne sait pas où cliquer. Juste derrière, le bouton à faible contraste : gris clair sur blanc, ou un bouton « fantôme » qui n'est qu'un texte pâle avec un contour à peine présent. Il y a ensuite les commandes en icône seule - une loupe pour la recherche, un menu hamburger, un simple X pour fermer - dessinées dans un gris doux qui se dissout dans l'en-tête. Les interrupteurs et cases dont les états activé et désactivé ne diffèrent que d'une nuance trop proche pour être lue. Et les graphiques où deux séries de données ont la même clarté, ce qui est exactement là que cette règle donne la main à la règle sur l'utilisation de la couleur : la couleur ne doit pas être le seul signal, et quel que soit le signal que vous utilisez, il doit aussi être visible.
L'indice est toujours le même. Ça a l'air correct pour la personne qui l'a construit, parce qu'elle sait que c'est un bouton et qu'elle voit la couleur. Le contraste non textuel concerne le visiteur qui ne le sait pas et ne le voit pas.
N'est-ce pas la même chose que la règle de contraste du texte ?
Non, et les confondre est la raison pour laquelle des sites réussissent l'une et manquent l'autre. La règle de contraste du texte (1.4.3) porte sur la lecture des mots - le texte normal a besoin de 4,5:1 pour qu'une personne malvoyante distingue les lettres. Le contraste non textuel (1.4.11) porte sur le fait de voir les commandes et les formes porteuses de sens - le bord du bouton, le pourtour du champ, l'icône, la courbe du graphique - à un seuil plus bas de 3:1. Le texte de votre paragraphe peut réussir haut la main le 1.4.3 pendant que le bouton « Continuer » en dessous échoue au 1.4.11 parce que son contour est presque invisible. Deux vérifications distinctes, deux seuils, et un vérificateur automatisé en attrapera certaines du texte tout en ratant discrètement la plupart de celles des composants - une raison de plus pour laquelle une analyse n'est pas un audit.
Le contraste des éléments non textuels est-il réellement exigé en Ontario ?
Voici la réponse honnête, parce que la version qui coupe les coins ronds n'aide personne. Le RNAI de l'Ontario pointe vers WCAG 2.0 niveau AA, et le 1.4.11 n'existait pas avant WCAG 2.1. Donc, à la lettre stricte du règlement, un bouton pâle n'est pas en soi une infraction au RNAI comme le seraient un texte de remplacement manquant ou un piège au clavier. C'est la lecture étroite - et c'est une mauvaise raison de le sauter.
Trois choses le rendent important malgré tout. Premièrement, la cible durable de toute construction sérieuse est WCAG 2.2 niveau AA, qui inclut le 1.4.11 - la loi est le plancher, pas le plafond, et le plancher est appelé à monter. Deuxièmement, la vraie voie individuelle en Ontario n'est pas du tout la LAPHO : la LAPHO (Loi sur l'accessibilité pour les personnes handicapées de l'Ontario) ne prévoit aucun droit d'action privé, donc la voie réelle est une plainte au TDPO (Tribunal des droits de la personne de l'Ontario) en vertu du Code des droits de la personne de l'Ontario - et une personne qui n'arrive vraiment pas à trouver votre bouton de caisse a un obstacle, peu importe la version de WCAG qui le nomme. Troisièmement, si vous vendez aux États-Unis, des commandes à faible contraste sont le genre de chose qui apparaît dans les plaintes Web au titre de l'ADA (Americans with Disabilities Act), où WCAG 2.1 et 2.2 niveau AA sont les points de référence habituels. La position défendable est la même que toujours : une remédiation documentée, un registre daté de ce que vous avez vérifié et corrigé, ce qu'un RCL honnête devrait refléter d'ici le 31 décembre 2026.
La bonne nouvelle, c'est que cela se corrige à peu de frais. Renforcer le contour d'un bouton, foncer la bordure d'un champ de formulaire, donner assez de poids à une icône pour qu'elle ressorte - ce sont de petits changements de CSS, pas des reconstructions, et ils rendent le site plus facile à utiliser pour tous ceux qui plissent les yeux devant un téléphone au soleil.
Vérifiez si vos boutons, vos champs de formulaire, vos icônes et vos contours de focus atteignent le seuil de 3:1, et cherchez d'autres problèmes d'accessibilité - rapport Vayle gratuit, environ 30 secondes : vayle.art. Il détecte les surcouches, révèle les vrais manquements WCAG et vous indique exactement ce qui s'applique légalement à votre organisation en Ontario. Sans engagement.
Vayle est un studio d'ingénierie de l'accessibilité, à distance, au service de l'Ontario. Renseignements généraux, pas un avis juridique.