RGAA 3.3 — Dans chaque page web, le contraste des composants d'interface est-il suffisamment élevé ?

Contraste des composants d'interface insuffisant

Le problème

Le contraste insuffisant des composants d'interface non textuels concerne les éléments visuels nécessaires à la compréhension du contenu et à l'utilisation de l'interface : bordures de champs de formulaire, icônes fonctionnelles, indicateurs de focus, coches dans les cases à cocher, curseurs de slider, bordures de boutons, et tout élément graphique qui transmet une information ou permet une interaction. Le critère RGAA 3.3 (correspondant au WCAG 1.4.11, niveau AA) exige un ratio de contraste d'au moins 3:1 pour ces composants par rapport à leur arrière-plan.

Ce critère est souvent négligé car les développeurs et designers se concentrent sur le contraste du texte (critère 3.2) en oubliant les éléments d'interface. Un champ de formulaire avec une bordure gris très clair (#e0e0e0) sur fond blanc (#fff) n'a qu'un ratio de 1,4:1 -- les utilisateurs malvoyants ne peuvent même pas repérer le champ. Des icônes grises fonctionnelles, des boutons dont la bordure se confond avec l'arrière-plan, ou des états (actif, désactivé, sélectionné) distingués par des couleurs à faible contraste posent le même problème.

Les tendances du design « flat » et « minimaliste » ont aggravé ce problème en favorisant les bordures fines et les couleurs pastel qui, bien qu'esthétiques, ne remplissent pas les critères de contraste minimum.

Impact sur les utilisateurs

Les utilisateurs malvoyants ne peuvent pas identifier les zones interactives de la page. Si la bordure d'un champ de formulaire est à peine visible, l'utilisateur ne sait pas où cliquer pour saisir du texte. Si une icône de statut (succès, erreur, avertissement) a un contraste insuffisant, l'information est perdue.

Les personnes daltoniennes sont particulièrement affectées quand des états (sélectionné/non sélectionné, actif/inactif) sont différenciés uniquement par des couleurs à faible contraste entre elles. Les utilisateurs âgés, dont la sensibilité au contraste diminue naturellement, peinent à repérer les éléments d'interface subtils.

Ce défaut impacte aussi l'utilisabilité générale : dans des conditions de luminosité défavorables (écran ensoleillé, projecteur en salle de réunion), des composants d'interface à faible contraste deviennent invisibles pour tous les utilisateurs.

Votre site a-t-il ce problème ?

106 critères RGAA analysés en 5 minutes par notre IA.

Testez votre site gratuitement

Exemple de code

Avant (non conforme)

/* Champ de formulaire à bordure quasi invisible */
input {
  border: 1px solid #e0e0e0; /* ratio 1,4:1 */
  background: #fff;
}

/* Icône fonctionnelle à faible contraste */
.icon-status {
  color: #c0c0c0; /* ratio 1,6:1 */
}

/* Bouton dont la bordure se confond */
.btn-outline {
  border: 1px solid #d0d0d0; /* ratio 1,5:1 */
  color: #d0d0d0;
}

Après (conforme)

/* Champ de formulaire accessible */
input {
  border: 1px solid #767676; /* ratio 4,5:1 */
  background: #fff;
}

/* Icône fonctionnelle avec contraste suffisant */
.icon-status {
  color: #595959; /* ratio 7:1 */
}

/* Bouton avec bordure visible */
.btn-outline {
  border: 2px solid #595959; /* ratio 7:1 */
  color: #595959;
}

Comment Scrutia détecte ce problème

Scrutia analyse le contraste de chaque composant d'interface sur vos pages : bordures de champs, icônes, boutons, indicateurs d'état et contrôles de formulaire. Il calcule le ratio de contraste entre l'élément et son arrière-plan effectif, en tenant compte des dégradés et de l'opacité. Le rapport identifie chaque composant non conforme avec son ratio actuel et suggère une couleur de remplacement.

Questions fréquentes

Quelle est la différence entre le contraste textuel (RGAA 3.2) et non textuel (RGAA 3.3) ?

Le critère 3.2 concerne le texte et exige 4,5:1 (ou 3:1 pour les grands textes). Le critère 3.3 concerne les composants d'interface non textuels (bordures, icônes, graphiques) et exige 3:1. Un bouton doit respecter les deux : 4,5:1 pour son texte et 3:1 pour sa bordure.

Les éléments décoratifs sont-ils concernés ?

Non. Seuls les éléments non textuels qui transmettent une information ou permettent une interaction sont concernés. Un séparateur purement décoratif ou une ombre de boîte esthétique ne sont pas soumis à ce critère.

Comment mesurer le contraste d'une bordure de champ ?

Utilisez un outil comme le Colour Contrast Analyser (CCA) de TPGi pour échantillonner la couleur de la bordure et la couleur de l'arrière-plan adjacent. Le ratio doit être d'au moins 3:1.

Les focus indicators sont-ils concernés par ce critère ?

Oui. L'indicateur de focus doit avoir un contraste d'au moins 3:1 par rapport à l'arrière-plan. C'est un cas fréquent de non-conformité : un contour bleu clair sur fond blanc ne suffit pas toujours.

Votre site a-t-il ce problème ?

Scrutia audite votre site sur 106 critères RGAA en 5 minutes. Navigation clavier, composants ARIA, focus visible, contrastes, et bien plus.

Lancer un audit gratuit