Les boutons, icônes et graphiques porteurs d'information sont-ils suffisamment contrastés par rapport à leur fond ?
Critère officiel 3.3 — 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) ?
Pourquoi c'est important
Un bouton « Envoyer » trop pâle, une icône de téléphone peu visible ou une courbe de graphique trop claire sur fond blanc deviennent invisibles pour les personnes malvoyantes. Elles ne peuvent pas interagir avec le site ou lire les données présentées.
Exemples concrets
Ce qui est conforme
Le bouton « Envoyer votre demande » du formulaire de contact est affiché en blanc sur fond bleu foncé (#1A56A0) : le rapport de contraste est de 5,2:1, au-dessus du minimum de 3:1 exigé pour les éléments graphiques.
Ce qui pose problème
Les icônes de réseaux sociaux du pied de page sont en gris clair (#AAAAAA) sur fond blanc : leur contraste de 2,3:1 est insuffisant. Une personne malvoyante ne les voit pas et ne sait pas que ces liens existent.
Comment agir
Ce critère est plus récent (WCAG 2.1) et souvent ignoré lors de la création du site. Demandez à votre prestataire de vérifier spécifiquement les boutons, les icônes fonctionnelles et les graphiques — pas seulement le texte. Un audit visuel rapide de la page d'accueil et des formulaires suffit pour identifier les problèmes les plus évidents.
Règles clés
- Ratio minimum 3:1 pour tous les composants d'interface et éléments graphiques porteurs d'information.
- Le ratio se mesure entre la couleur de la partie informative du composant et la couleur adjacente (fond de page, fond du composant).
- Les composants inactifs (disabled) sont exemptés — mais signaler leur état par un autre moyen que la couleur seule (critère 3.1).
- Les éléments purement décoratifs sont exemptés.
- L'indicateur de focus est un composant d'interface — il doit avoir un ratio de 3:1 avec le fond adjacent (voir aussi critère 10.7).
- Pour les graphiques : chaque segment ou série doit être distinguable par un contraste de 3:1 avec les segments/séries adjacents OU avec le fond.
Erreurs fréquentes
- Bordure de champ de formulaire gris clair sur fond blanc (ratio souvent < 3:1)
- Indicateur de focus trop fin ou trop clair — non perceptible
- Icône SVG informationnelle en gris clair sur fond blanc
- Bouton ghost (bordure uniquement, fond transparent) avec bordure insuffisamment contrastée
- Graphique avec des séries de couleurs dont certaines ont un contraste < 3:1 avec le fond
- Cases à cocher et boutons radio custom avec bordure trop claire
- Indicateurs d'état (point vert 'en ligne', badge rouge 'erreur') sans contraste suffisant avec leur fond
Exemples de code
bordure de champ insuffisante
✗ Non conformeinput {
border: 1px solid #cccccc; /* sur fond #ffffff */
/* Ratio #cccccc/#ffffff : 1,60:1 — insuffisant */
background: #ffffff;
}Une bordure gris clair (#cccccc) sur fond blanc a un ratio de seulement 1,6:1 — bien en dessous du seuil de 3:1. L'utilisateur malvoyant ne perçoit pas les limites du champ.
bordure de champ conforme
✓ Conformeinput {
border: 1px solid #767676; /* sur fond #ffffff */
/* Ratio #767676/#ffffff : 4,54:1 — conforme (dépasse le seuil de 3:1) */
background: #ffffff;
}
/* Minimum strict pour 3:1 sur fond blanc : */
input-min {
border: 1px solid #949494;
/* Ratio #949494/#ffffff : 3,03:1 — juste conforme */
}#767676 est recommandé — il passe aussi le critère 3.2 pour le texte, ce qui simplifie la palette. #949494 est le strict minimum pour 3:1 sur fond blanc.
icône informationnelle insuffisante
✗ Non conforme<button type="button" aria-label="Supprimer">
<svg aria-hidden="true" fill="#bbbbbb">
<!-- icône poubelle -->
</svg>
</button>
/* Ratio #bbbbbb/#ffffff : 1,73:1 — insuffisant */L'icône est porteuse d'information (même si le bouton a un aria-label). Si l'utilisateur malvoyant ne la perçoit pas, il ne sait pas visuellement que c'est un bouton de suppression.
icône informationnelle conforme
✓ Conforme<button type="button" aria-label="Supprimer">
<svg aria-hidden="true" fill="#595959">
<!-- icône poubelle -->
</svg>
</button>
/* Ratio #595959/#ffffff : 7,0:1 — très conforme */#595959 ou plus foncé assure un ratio largement supérieur à 3:1. Pour les icônes, viser 4,5:1 ou plus est une bonne pratique car elles sont souvent de petite taille.
bouton ghost (outline)
✗ Non conforme.btn-ghost {
background: transparent;
border: 2px solid #d4d4d4; /* sur fond #ffffff */
color: #333333;
/* Ratio bordure : #d4d4d4/#ffffff : 1,40:1 — insuffisant */
}Le bouton ghost dont la seule indication visuelle est sa bordure doit avoir une bordure avec un ratio ≥ 3:1. Ici la bordure est imperceptible pour un utilisateur malvoyant.
bouton ghost conforme
✓ Conforme.btn-ghost {
background: transparent;
border: 2px solid #767676; /* sur fond #ffffff */
color: #333333;
/* Ratio bordure : #767676/#ffffff : 4,54:1 — conforme */
}Bordure suffisamment contrastée pour être perceptible. Le texte du bouton passe également le critère 3.2 avec #333333 sur fond blanc.
Référence WCAG : 1.4.11