La bordure grise d’un champ de formulaire, la loupe d’un bouton de recherche, le contour d’une case à cocher… Quand ces éléments sont trop pâles, une partie du public ne les voit pas. Elle ne sait pas qu’il y a là quelque chose à remplir ou à cliquer.
Pour ces éléments, les WCAG 2.2 fixent un seuil précis : un ratio de contraste de 3 : 1. Le ratio de contraste est un nombre de 1 : 1 à 21 : 1 qui mesure l’écart de clarté entre deux couleurs ; son calcul est détaillé dans notre guide Comprendre le contraste WCAG. Ce guide sur le contraste non textuel explique ce qui doit atteindre ce seuil et ce qui en est dispensé, avec des exemples calculés par le moteur de nos outils gratuits.
Que demande le critère WCAG 1.4.11 pour les composants d’interface ?
Le critère 1.4.11 des WCAG 2.2, les règles internationales d’accessibilité du web, se nomme « Contraste du contenu non textuel ». Il est de niveau AA, l’un des deux niveaux (A et AA) que retient le RGAA. Il demande un ratio d’au moins 3 : 1 avec les couleurs adjacentes pour deux familles d’éléments.
- Les composants d’interface : les informations visuelles nécessaires pour identifier un composant et ses états. Un composant d’interface est un élément avec lequel on agit : bouton, champ, case à cocher, onglet, curseur…
- Les éléments graphiques : les parties d’une image ou d’un graphique nécessaires pour comprendre le contenu, comme une icône seule, une courbe ou une barre.
Le RGAA 4.1.2, le référentiel français, le reprend dans son critère 3.3. Le seuil est strict : 2,999 : 1 n’atteint pas 3 : 1, car le W3C précise que le ratio n’est jamais arrondi.
Mesurer contre quoi ?
Les couleurs adjacentes d’un composant sont celles qui le touchent. Prenons un champ blanc, à la bordure sombre, sur une page blanche : la couleur adjacente est le blanc de la page. Mesurez toujours contre le fond réel, car un même gris peut réussir sur un fond et échouer sur un autre.
Un seul signe suffit : si la bordure atteint 3 : 1, le fond du champ peut rester pâle. Sans bordure, en revanche, le fond devient le signe. Un champ blanc sur une page #f3f3f3 n’a que 1,10 : 1 : il échoue.
Le texte d’un bouton relève d’un autre critère
Le libellé d’un bouton est du texte. Il suit le critère WCAG 1.4.3 (critère RGAA 3.2), soit 4,5 : 1, ou 3 : 1 pour un grand texte (au moins 24 px, ou 18,5 px en gras). Le critère 1.4.11 ne concerne que le reste : bordure, icône, case cochée, indicateur de focus. Le calcul du ratio est détaillé dans Comprendre le contraste WCAG.
Contraste de la bordure d’un champ de formulaire
La bordure est le cas le plus fréquent. Beaucoup de sites choisissent un gris très clair pour la discrétion, et le champ disparaît presque.
Avant : à éviter
Bordure gris clair #cccccc : 1,60 : 1 sur blanc. Le champ est à peine visible.
Après : à privilégier
Bordure grise #767676 : 4,54 : 1 sur blanc. Le champ se repère nettement.
| Bordure | Ratio sur blanc | 3 : 1 atteint |
|---|---|---|
#cccccc | 1,60 : 1 | Échec |
#bdbdbd | 1,87 : 1 | Échec |
#959595 | 2,99 : 1 | Échec |
#949494 | 3,03 : 1 | Réussi |
#767676 | 4,54 : 1 | Réussi |
Le gris #949494 est le plus clair des gris neutres qui atteigne 3 : 1 sur blanc (3,03 : 1). Le gris #959595 n’en est séparé que d’un cran, mais il reste en dessous (2,99 : 1) et échoue. Visez plutôt le gris #767676, qui laisse de la marge : à l’écran, un trait de 1 px paraît souvent plus pâle que sa couleur, à cause du lissage des bords.
Tester une bordure pâle sur blanc
Le vérificateur s’ouvre avec le gris #cccccc comme couleur du texte et #ffffff comme fond. La ligne « Composants d’interface » donne le verdict à 3 : 1. Essayez ensuite #767676.
Contraste d’un bouton : fond, bordure et libellé
Un bouton à fond pâle, sans bordure, est-il un échec ? Pas forcément. Si le bouton affiche un libellé, ce texte suffit à le repérer : son fond ou son contour n’ont alors pas à atteindre 3 : 1.
Prenons un bouton « Envoyer » en indigo profond #241f52 sur un fond lavande #dbd6f4. Son fond n’a que 1,40 : 1 avec le blanc de la page : le critère 1.4.11 ne l’exige pas ici. En revanche, son libellé atteint 10,72 : 1 avec le fond du bouton, bien au-dessus des 4,5 : 1 demandés par le critère 1.4.3.
Le contour ou le fond compte dès qu’il est le seul signe du composant.
- Un bouton sans libellé, avec une icône seule : l’icône doit atteindre 3 : 1.
- Un champ de saisie, que rien d’autre que sa bordure ou son fond ne signale : la bordure doit atteindre 3 : 1.
Cases à cocher, boutons radio et états d’un composant
Le critère vaut pour chaque état. La coche d’une case, le remplissage d’un bouton radio, la poignée d’un curseur ou la flèche d’un menu ouvert doivent atteindre 3 : 1 avec les couleurs qui les entourent.
Avant : à éviter
Le contour et la coche sont gris clair (1,60 : 1 sur blanc). On distingue à peine la case, vide ou cochée.
Après : à privilégier
Contour gris #767676 (4,54 : 1). La case cochée est remplie d’indigo clair #5f55b8, avec une coche blanche (6,03 : 1).
Les changements de couleur entre deux états n’ont pas à contraster entre eux : un survol plus foncé que l’état normal n’a pas à atteindre 3 : 1 avec lui. Le composant ne doit simplement jamais perdre son contraste avec ce qui l’entoure.
Indicateur de focus : contraste et critères WCAG 2.2
Le focus est l’élément que le clavier sélectionne à un instant donné, généralement signalé par un contour. Le critère 2.4.7 (Focus visible, AA) exige que cet indicateur existe. Comme il est nécessaire pour identifier l’état du composant, il doit aussi atteindre 3 : 1.
- Le contour par défaut du navigateur est exempté, tant que vous ne le modifiez pas.
- Un contour personnalisé doit atteindre 3 : 1. S’il est à l’extérieur du composant, on le mesure contre le fond de la page. S’il est à l’intérieur, contre le fond du composant.
Un contour indigo clair #5f55b8 atteint 6,03 : 1 sur blanc et réussit. Un contour bleu pâle #9aa0ff n’atteint que 2,37 : 1 et échoue.
Le RGAA 4.1.2 repose sur les WCAG 2.1 et ne reprend pas encore les deux critères ajoutés pour le focus par les WCAG 2.2. Le critère 2.4.11 (AA) demande que le composant qui reçoit le focus ne soit pas entièrement masqué par un contenu fixe, comme un bandeau. Le critère 2.4.13 (AAA) précise l’épaisseur et le contraste de l’indicateur.
Icônes et éléments graphiques porteurs d’information
Une icône seule, comme une loupe ou une imprimante, est un élément graphique. Si elle est nécessaire pour comprendre ou agir, elle doit atteindre 3 : 1 avec son fond.
Avant : à éviter
La loupe est gris clair #aaaaaa : 2,32 : 1 sur blanc.
Après : à privilégier
La loupe est gris encre #5e5a78 : 6,54 : 1 sur blanc.
Graphiques et diagrammes
Dans un graphique, les courbes, les barres et les graduations dont on a besoin pour lire les valeurs doivent atteindre 3 : 1 avec le fond. Le W3C admet que ces éléments ne soient plus nécessaires à la compréhension si les valeurs sont écrites en texte contrasté ou données dans un tableau ; vérifiez que votre auditeur RGAA l’accepte aussi. Pour distinguer les séries autrement que par la couleur, voir Information donnée uniquement par la couleur.
Ce qui est exempté du contraste non textuel
Le critère 1.4.11 ne s’applique pas dans les cas suivants.
- Les composants inactifs. Un bouton désactivé (attribut
disabled) est visible mais inutilisable pour le moment. - L’apparence native du navigateur, non modifiée. Dès que vous changez la bordure, le fond ou la couleur d’un composant, il n’est plus exempté.
- Les logotypes et les présentations essentielles. Un logo est exempté. Un drapeau, une photographie ou une carte de chaleur le sont aussi quand leurs couleurs font partie de l’information.
- Ce qui est décoratif ou disponible autrement. Une partie de graphique non nécessaire, ou dont l’information figure aussi en texte ou dans un tableau.
Une exemption se justifie : un champ qui a l’air désactivé mais qu’on peut remplir n’est pas inactif. Voir Comprendre le contraste WCAG.
Vérifier le contraste des composants avec le vérificateur
Dans le vérificateur de contraste, saisissez la couleur de la bordure ou de l’icône comme « couleur du texte » et la couleur adjacente comme « couleur du fond » : la ligne « Composants d’interface » donne le verdict à 3 : 1, mais ses suggestions de couleurs visent 4,5 : 1 et 7 : 1, au-delà de ce qu’exige un composant. Pour une charte entière, suivez Créer une palette de couleurs accessible.
Tester des couleurs de composants dans la matrice
La matrice teste toutes les paires d’une palette d’un coup. Elle s’ouvre avec le blanc, trois gris de bordure, l’indigo clair et Lavande 200 de ce guide, et l’objectif 3 : 1.
Aller plus loin
Appliquez ces notions à vos propres couleurs avec nos outils gratuits.
Questions fréquentes
Quel contraste minimum pour un bouton ou un champ de formulaire ?
Le critère WCAG 1.4.11 demande un ratio d’au moins 3 : 1 pour les informations visuelles nécessaires à l’identification du composant et de ses états, comme la bordure d’un champ ou l’icône d’un bouton. Le texte du bouton ou du champ, lui, demande 4,5 : 1 (critère 1.4.3).
Faut-il une bordure autour des boutons ?
Non, pas si le libellé du bouton suffit à le repérer : le W3C ne demande alors aucun contraste pour son fond ou son contour. La bordure devient nécessaire quand rien d’autre n’identifie le composant, par exemple un champ de saisie. Délimiter tous les contrôles reste une bonne pratique.
Quelle couleur de bordure choisir pour un champ sur fond blanc ?
Un gris au moins aussi foncé que #949494, le plus clair qui atteigne 3 : 1 sur blanc (3,03 : 1). Le gris #767676 (4,54 : 1) laisse de la marge, utile car un trait fin paraît souvent plus pâle à l’écran.
L’indicateur de focus doit-il respecter un contraste ?
Si vous personnalisez le contour de focus, oui : il doit atteindre 3 : 1 avec les couleurs adjacentes, en plus d’exister (critère 2.4.7). Le contour par défaut du navigateur, non modifié, est exempté. Les WCAG 2.2 ajoutent le critère 2.4.11 (focus non masqué, AA) et le critère 2.4.13 (apparence du focus, AAA).
Quel critère du RGAA concerne le contraste des composants d’interface ?
Le critère RGAA 3.3 (RGAA 4.1.2), qui correspond au critère WCAG 1.4.11 et vise les composants d’interface et les éléments graphiques. Le contraste du texte relève du critère RGAA 3.2.
Sources
Textes officiels consultés pour ce guide. Dernière vérification : 26 octobre 2026.