Contraste composants interface : critère RGAA 3.3, ratio 3:1

C'est quoi

Le critère RGAA 3.3 couvre les composants d'interface et les éléments graphiques porteurs d'information. Il exige un ratio de contraste d'au moins 3:1 entre la couleur porteuse d'information et la couleur adjacente.

Éléments concernés :

La bordure d'un champ de formulaire par rapport au fond de la page.
La couleur d'un bouton (fond ou contour) par rapport au fond adjacent.
Une icône fonctionnelle (loupe, fermer, menu) par rapport à son fond.
Les indicateurs visuels d'état (focus visible, case cochée, bouton actif).

Éléments non concernés :

Le texte dans les composants (couvert par le critère 3.2, ratio 4,5:1).
Les composants désactivés (l'exigence s'applique aux éléments actifs).

Qui est touché

Les personnes malvoyantes : un bouton ou un champ sans contour visible est difficile à identifier comme interactif.
Les personnes daltoniennes : certaines combinaisons perdent leur contraste selon le type de daltonisme.
Tout le monde en conditions difficiles : écran en plein soleil, luminosité réduite, écran de mauvaise qualité.

Impact business

Un composant dont le contour ou la couleur ne contraste pas suffisamment peut être confondu avec du texte inactif ou du fond. L'utilisateur ne sait plus si l'élément est cliquable, ce qui casse la navigation et augmente l'abandon.

L'erreur est fréquente sur les designs minimalistes où les champs de formulaire n'ont qu'une fine bordure gris clair, invisible sur fond blanc.

Sources des chiffres

Comment le détecter

Audit Mynto : le scan évalue le contraste des composants interactifs visibles.
Manuel : utilise le WebAIM Contrast Checker en saisissant la couleur de la bordure et la couleur du fond adjacent.
Navigateur : Chrome DevTools affiche le ratio de contraste d'un élément sélectionné dans le panneau "Accessibility".

Comment corriger

Avant - CSS

/* Champ formulaire : bordure trop claire */
input {
  border: 1px solid #cccccc; /* ratio ~1,6:1 sur fond blanc - échec */
  background: #ffffff;
}

Après - CSS

/* Champ formulaire : bordure suffisamment contrastée */
input {
  border: 1px solid #767676; /* ratio ~4,5:1 sur fond blanc - au-dessus du seuil 3:1 */
  background: #ffffff;
}

Pour les bordures de champs et les contours de boutons, le contraste se calcule entre la couleur de la bordure et la couleur du fond adjacent (la page, pas le fond du composant lui-même).

Viser au moins 3:1. Si la bordure est proche d'une couleur de texte, cibler 4,5:1 simplifie la validation globale du thème.

Pour les icônes fonctionnelles sans texte, assure-toi que la couleur de l'icône contraste à 3:1 avec son fond direct.

Questions fréquentes

Le critère 3.3 s'applique-t-il au focus visible ?

Oui. L'indicateur de focus (outline, ring) doit contraster à 3:1 avec le fond adjacent. C'est aussi couvert par le critère RGAA 10.7 (focus visible). Les deux critères se cumulent.

Quelle différence entre le critère 3.2 et le critère 3.3 ?

3.2 concerne le contraste du texte (ratio 4,5:1 pour le texte normal, 3:1 pour le texte large). 3.3 concerne les composants d'interface et les éléments graphiques fonctionnels (ratio 3:1).

Un bouton entièrement coloré a-t-il un problème de contraste ?

Un bouton plein est évalué différemment : c'est le texte du bouton qui doit contraster à 4,5:1 avec le fond du bouton. Le fond du bouton lui- même n'a pas besoin de contraster avec la page entière.

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.

Contraste des composants d'interface insuffisant