Dans chaque page web, les couleurs utilisées dans les composants d’interface ou les éléments graphiques porteurs d’informations sont-elles suffisamment contrastées (hors cas particuliers) ?
Un utilisateur malvoyant ouvre votre formulaire de contact. Le champ de saisie est là, mais sa bordure grise se fond dans le fond blanc — rapport de contraste 1,6:1. Il ne sait pas où cliquer. Le critère 3.3 impose un minimum de 3:1 pour tout composant d’interface et tout élément graphique porteur d’information. Deux seuils distincts, deux critères distincts.
Deux catégories sont concernées. Les composants d’interface d’abord : boutons, champs texte, cases à cocher, boutons radio, onglets, curseurs. Chaque état doit tenir ce seuil : repos, focus, survol, actif, erreur. Les éléments graphiques ensuite : icônes sans libellé textuel, courbes de graphique, contours de zones sur une carte — dès qu’une couleur est nécessaire à la compréhension, elle entre dans le périmètre.
Le critère 3.2 exige 4,5:1 pour le texte courant ; le critère 3.3 accepte 3:1 pour les composants. Confondre les deux seuils est l’erreur la plus fréquente en audit. Un bouton avec un texte à 4,5:1 peut tout de même échouer au 3.3 si sa bordure n’atteint pas 3:1.
Pour mesurer : identifiez la couleur caractéristique du composant (bordure d’un champ, remplissage d’un bouton, couleur d’une icône) et la couleur du fond adjacent. L’outil Includdy ou l’inspecteur d’accessibilité de Firefox vous donnent ce rapport en quelques secondes.
4 tests pour vérifier le contraste des composants d'interface
Contraste des composants d'interface
- Repérez tous les composants d’interface susceptibles de manquer de contraste : boutons, champs de formulaire, cases à cocher, boutons radio, onglets, interrupteurs (toggle), curseurs.
- Pour chaque composant, testez chaque état : repos, focus (:focus), survol (:hover), actif (:active), sélectionné, en erreur.
- Pour chaque état, mesurez le rapport entre la couleur caractéristique du composant (bordure, fond, indicateur) et la couleur d’arrière-plan adjacent.
- Condition de réussite : le rapport est ≥ 3:1, OU un mécanisme accessible permet à l’utilisateur d’afficher le composant avec un rapport ≥ 3:1.
- Si tous les composants satisfont cette condition, le test est validé.
Contraste des éléments graphiques sur fond
- Repérez tous les éléments graphiques porteurs d’information : icônes sans équivalent textuel, pictogrammes, courbes de graphique, zones colorées sur une carte, barres de progression.
- Pour chaque élément, identifiez les couleurs nécessaires à sa compréhension (la couleur d’une courbe, le contour d’une icône, la teinte d’une zone).
- Mesurez le rapport entre chacune de ces couleurs et la couleur d’arrière-plan adjacent.
- Condition de réussite : le rapport est ≥ 3:1, OU un mécanisme permet d’afficher l’élément avec ce rapport.
- Les éléments purement décoratifs, sans information portée, sont exclus du test.
Contraste entre couleurs contiguës d'un élément graphique
- Repérez les éléments graphiques dont plusieurs couleurs adjacentes sont nécessaires à leur compréhension : camembert avec secteurs contigus, diagramme de barres groupées, légende de carte.
- Pour chaque paire de couleurs contiguës nécessaires à la compréhension, mesurez le rapport entre elles (et non par rapport au fond — c’est ce qui distingue ce test du 3.3.2).
- Condition de réussite : chaque paire de couleurs contiguës porteuses d’information atteint ≥ 3:1, OU un mécanisme permet d’afficher l’élément avec ce rapport.
- Ce test s’applique en complément du 3.3.2 : les deux tests doivent être passés pour un même élément graphique multicolore.
Contraste du mécanisme de contraste renforcé
Ce test porte sur les mécanismes de repli : les boutons ou liens permettant d’activer une version à contraste renforcé.
- Repérez tout mécanisme offrant une version améliorée du contraste (bouton « Contraste élevé », lien « Mode accessible »).
- Vérifiez que ce mécanisme lui-même est suffisamment contrasté — ses couleurs et ses éléments graphiques doivent respecter le seuil de 3:1.
- Si le mécanisme est invisible ou illisible, le test échoue.
Cas de non-applicabilité :
- Composant avec attribut
disabled(inactif, aucune action possible) - Style de focus géré entièrement par le navigateur, sans modification de l’auteur
- Composant dont la couleur n’est pas nécessaire à son identification (position, taille et texte suffisent)
- Élément graphique décoratif ou disposant d’une alternative textuelle équivalente
- Logo ou nom de marque
- Élément graphique dont la présentation est essentielle à l’information (drapeau, photo, carte de chaleur, capture d’écran)
- Élément graphique dynamique dont le contraste au survol ou au focus est suffisant
Exemples
❌ Non conforme : Champ de saisie avec bordure insuffisamment contrastée
<label for="email">Adresse e-mail</label>
<input
type="email"
id="email"
name="email"
style="border: 1px solid #cccccc; background-color: #ffffff; padding: 8px 12px; border-radius: 4px;"
>La bordure #cccccc sur fond blanc #ffffff affiche un rapport de contraste de 1,6:1, largement en dessous du seuil de 3:1. Un utilisateur malvoyant ne distingue pas les limites du champ et ne sait pas où saisir son texte. La bordure est ici le seul indicateur visuel du composant : si elle est imperceptible, le champ disparaît.
✅ Conforme : Champ de saisie avec bordure suffisamment contrastée
<label for="email">Adresse e-mail</label>
<input
type="email"
id="email"
name="email"
style="border: 2px solid #767676; background-color: #ffffff; padding: 8px 12px; border-radius: 4px;"
>La bordure #767676 sur fond blanc #ffffff atteint un rapport de 4,54:1, au-dessus du seuil de 3:1. Le contour du champ est clairement perceptible. L’utilisateur identifie sans ambiguïté la zone de saisie, quel que soit son niveau d’acuité visuelle.
Astuces et pièges
⚠️ Oublier l’état survol (:hover) dans le test 3.3.1
Tous les états d’un composant doivent atteindre 3:1 — y compris au survol. Un bouton correctement contrasté au repos mais qui vire à une teinte pâle au passage de la souris fait échouer le test 3.3.1. Le WCAG 1.4.11 et le RGAA 3.3 couvrent explicitement les états focus, hover et active : testez-les tous.
⚠️ Confondre le seuil texte (4,5:1) et le seuil composant (3:1)
Le critère 3.2 exige 4,5:1 pour le texte courant, le critère 3.3 exige 3:1 pour les composants. Un bouton avec un libellé textuel à 4,5:1 peut tout de même échouer au 3.3 si sa bordure n’atteint pas 3:1. En audit, identifiez toujours ce que vous mesurez avant de choisir le seuil à appliquer.
💡 Le mécanisme de contraste renforcé doit lui-même être contrasté (test 3.3.4)
Si vous proposez un bouton « Activer le contraste élevé » pour compenser un contraste insuffisant ailleurs, ce bouton doit lui-même respecter le 3:1. C’est ce que vérifie le test 3.3.4 : la porte de sortie doit être visible. Un mécanisme de repli illisible annule son propre intérêt.
⚠️ Les composants désactivés (disabled) sont hors périmètre
Un bouton avec l’attribut disabled n’est pas actionnable. Le RGAA l’exclut explicitement du critère 3.3. Idem pour un style de focus géré entièrement par le navigateur sans modification de l’auteur — le contour natif de Chrome ou Firefox n’est pas à auditer au titre de ce critère.
⚠️ Icône accompagnée d’un libellé texte visible
Une icône qui apparaît toujours avec un texte adjacent portant la même information n’est pas « porteuse d’information » au sens du critère 3.3. Le texte transmet déjà l’information : l’icône est redondante. En revanche, si l’icône est seule à communiquer l’action ou l’état, elle doit respecter le 3:1. La règle : supprimez mentalement l’icône. Si l’utilisateur perd une information que rien d’autre ne lui donne, l’icône est porteuse d’information.
Questions fréquentes
Quelle partie exacte d'un bouton doit respecter le ratio de contraste 3:1 en RGAA ?
Cela dépend de ce qui identifie visuellement le bouton. Si le bouton a un fond coloré sans bordure, c’est le fond du bouton contre le fond de page. Si le bouton a une bordure comme seul indicateur visuel, c’est la bordure contre le fond de page. Si le texte suffit à identifier le composant (exception « Boundaries »), le ratio 3 :1 pour la bordure n’est pas exigé — mais le critère 3.2 s’applique toujours au texte.
Comment auditer le contraste des icônes SVG inline selon le critère RGAA 3.3 ?
Mesurez le contraste entre la couleur de remplissage (fill) ou de contour (stroke) de l’icône et la couleur d’arrière-plan adjacent. Utilisez la pipette des DevTools directement sur les pixels rendus à l’écran — les variables CSS ou les valeurs héritées peuvent différer de la couleur finale. Si l’icône est purement décorative et accompagnée d’un texte équivalent, elle est exemptée.
Dans quels cas un graphique avec légende textuelle est exempté du critère RGAA 3.3 ?
Partiellement. Si les informations véhiculées par les couleurs du graphique sont intégralement disponibles dans un texte visible sur la page (tableau de données, description dans le corps du texte), les parties graphiques concernées sont exemptées du critère 3.3. Mais si la légende se contente de nommer les séries sans donner les valeurs, les couleurs restent porteuses d’information et le critère s’applique.
Comment évaluer le contraste du mode sombre d'un site selon le critère RGAA 3.3 ?
Oui. Si votre site propose un sélecteur de thème clair/sombre, chaque thème doit respecter le critère 3.3 indépendamment. Le sélecteur lui-même est un mécanisme au sens du test 3.3.4 : ses composants graphiques doivent atteindre 3 :1. Le thème préféré du système (prefers-color-scheme) ne dispense pas de vérifier le contraste dans chaque mode activable par l’utilisateur.
Quelle différence existe entre les critères RGAA 3.2 et 3.3 pour les placeholders de formulaire ?
Par le critère 3.2, car le texte de placeholder est du texte. Le seuil applicable est 4,5 :1 pour un texte normal (ou 3 :1 si la taille dépasse 24px ou 18,66px en gras). Le critère 3.3 s’applique à la bordure ou au fond du champ, pas au texte qu’il contient. Les deux peuvent échouer sur un même champ pour des raisons différentes.