Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung →
Barrierefreiheit
Quel contraste les boutons et champs d'entrée ont-ils besoin sur les sites ?
Les boutons, les champs d'entrée et les graphiques significatifs ont besoin d'un ratio de contraste d'au moins 3:1 par rapport à leur environnement. Ce seuil vient de la norme WCAG. Il garantit qu'un visiteur malvoyant reconnaît où cliquer et où écrire — un champ blanc avec une bordure gris clair sur fond blanc est pratiquement invisible.
Les contrôles doivent se distinguer
Tandis que la règle de contraste bien connue concerne le texte, ici il s'agit de tout ce qui est visible d'autre et porte une fonction : la bordure du champ, la surface du bouton, l'icône de loupe de la recherche, la coche dans la case. La mise en page moderne très réduite est le piège le plus courant ici — des bordures gris clair sur fond blanc semblent élégantes, mais sont souvent bien en dessous de 3:1. Un visiteur avec une vision qui baisse voit alors un formulaire sans champs visibles : il ne sait pas où mettre le curseur. Même les symboles sans étiquette de texte — comme le menu hamburger — doivent avoir au moins 3:1 de contraste avec le fond, sinon la navigation n'existe pas pour lui.
Comment notre noyau de mesure mesure le contraste des contrôles
Notre noyau de mesure sélectionne un échantillon des contrôles de votre page — champs d'entrée, boutons, boutons de lien stylisés — et photographie chacun avec son environnement dans le navigateur. À partir des pixels, il calcule la luminosité de la bordure, du remplissage et de l'environnement, puis le ratio de contraste réel à la limite de l'élément. Si les limites mesurées sont en dessous de 3:1, le rapport l'indique consciemment comme un cas de contrôle établi, pas immédiatement une violation : un champ apparemment trop faible peut être porté visuellement par un conteneur environnant — un humain juge cela au standard or sur la base de la capture d'écran livrée. Le critère n'est considéré comme satisfait que si l'échantillon est suffisamment grand et complètement discret ; les objets purement graphiques comme les diagrammes restent une affaire de contrôle humain.
Beispiele
Eingabefeld mit blassem Rahmen
input { border: 1px solid #dddddd; background: #fff; } /* 1,3:1 */input { border: 1px solid #767676; background: #fff; } /* 4,5:1 */Rahmen, Symbole und Fokusrahmen brauchen 3:1 zum Hintergrund, sonst ist das Feld nicht als Feld erkennbar.
- Vérifiez vos formulaires : chaque champ d'entrée a besoin d'une bordure ou d'un remplissage qui contraste clairement avec le fond.
- Demandez à votre agence de vérifier les couleurs de bordure des champs contre le seuil 3:1 et de les assombrir si nécessaire.
- Vérifiez les symboles sans texte — recherche, menu, panier — pour avoir un contraste suffisant avec le fond.
- Faites attention aux états : même le marquage d'un onglet sélectionné ou d'une case cochée a besoin de 3:1.
- Regardez vos formulaires de deux mètres de distance — si les champs disparaissent visuellement, le contraste est trop faible.