Le critère 3.2 couvre le texte. Le critère 3.3 couvre le reste, tous les éléments graphiques non textuels qui portent une information. Son seuil est 3:1, moins exigeant que le 4.5:1 du texte, mais souvent négligé parce que moins visible dans les audits automatiques.
Pourquoi 3.3 est différent de 3.2
Le texte est la forme d’information la plus dense : des formes complexes, précises, à haute fréquence spatiale, qui nécessitent un contraste élevé pour rester lisibles à petite taille. D’où le seuil 4.5:1.
Les composants d’interface sont des formes plus simples, souvent plus grandes, dont la perception ne requiert pas le même niveau de précision. Une bordure de 2px sur un champ de formulaire, une icône de 24px, ces éléments sont perçus différemment du texte. D’où le seuil plus accommodant de 3:1.
Mais 3:1 n’est pas négligeable. Un gris moyen (#9CA3AF) sur fond blanc n’atteint que 2.32:1, bien en dessous du seuil. Ce sont pourtant les couleurs par défaut de nombreux thèmes WordPress pour les bordures de champs et les icônes secondaires.
Les bordures de champs de formulaire
La bordure d’un champ <input> délimite visuellement la zone de saisie. Sans contraste suffisant avec le fond, la zone de saisie n’est pas identifiable, l’utilisateur ne voit pas où il peut écrire.
Ce qui est mesuré
Le ratio de contraste entre la couleur de la bordure et la couleur du fond sur lequel elle apparaît.
Bordure #D1D5DB sur fond blanc #FFFFFF → 1,61:1 ✗
Bordure #9CA3AF sur fond blanc #FFFFFF → 2,32:1 ✗
Bordure #6B7280 sur fond blanc #FFFFFF → 4,63:1 ✓
Bordure #374151 sur fond blanc #FFFFFF → 10,7:1 ✓✓Les bordures grises pâles, très courantes dans les designs minimalistes, échouent systématiquement.
Ce qui n’est PAS mesuré
- La couleur du texte dans le champ (couverte par 3.2)
- Le label au-dessus du champ (couvert par 3.2)
- Le placeholder (couvert par 3.2, souvent en NC car les placeholders sont pâles par convention)
Cas WordPress Full Site Editing (FSE)
La plupart des thèmes FSE définissent les bordures de champs dans leurs styles globaux. Vérifier dans les DevTools la couleur calculée de border-color sur un <input>.
Correction dans theme.json :
{
"styles": {
"blocks": {
"core/form-input": {
"border": {
"color": "#374151",
"width": "1px"
}
}
}
}
}Ou en CSS additionnel :
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
select,
textarea {
border: 1px solid #6B7280; /* 4,63:1 sur fond blanc */
}Les champs sur fond coloré
Quand le formulaire est sur un fond coloré (section grise, fond de couleur primaire), la mesure change. Mesurer la bordure contre le fond réel du formulaire, pas contre blanc.
Bordure #6B7280 sur fond gris #F3F4F6 → 3.71:1 ✓
Bordure #6B7280 sur fond bleu #1A56A0 → 2.31:1 ✗, adapter la couleur de bordureLes icônes porteuses d’information
Une icône porte une information quand elle a une signification fonctionnelle indépendante, et non quand elle est purement décorative.
Icônes porteuses d’information (couvertes par 3.3) :
- Icône de loupe dans un bouton de recherche sans texte
- Icône d’enveloppe dans un lien “Nous écrire” sans texte
- Icône ⚠ dans un message d’erreur
- Icône de validation ✓ pour indiquer un champ valide
- Flèches de navigation d’un carrousel
Icônes décoratives (non couvertes) :
- Icône de maison à côté du texte “Accueil”, le texte porte l’information
- Icône de téléphone à côté d’un numéro de téléphone, le numéro porte l’information
- Séparateurs et ornements visuels
Ce qui est mesuré
Le ratio entre la couleur de l’icône et le fond sur lequel elle apparaît.
Icône SVG #9CA3AF sur fond blanc → 2.32:1 ✗
Icône SVG #6B7280 sur fond blanc → 4.63:1 ✓
Icône SVG #1A56A0 sur fond blanc → 5.9:1 ✓Les icônes dans les boutons
Un bouton avec une icône SVG colorée sur fond de la couleur primaire du site :
Icône blanche #FFFFFF sur fond bouton #1A56A0 → 5.9:1 ✓
Icône gris clair #E5E7EB sur fond bouton #1A56A0 → 2.94:1 ✗Les icônes “ghost” (contour, pas de remplissage) sur fond clair sont souvent en NC car leur épaisseur de trait est faible.
Les indicateurs d’état : badges, pastilles, puces
Les petits éléments graphiques qui signalent un statut : disponibilité, validation, catégorie, priorité.
Ce qui est mesuré
Pour un badge avec du texte : mesurer le texte du badge (critère 3.2) ET le badge lui-même si sa couleur de fond porte l’information (critère 3.3).
Pour une pastille sans texte (point coloré) : mesurer la pastille contre son fond.
<!-- Pastille de statut sans texte -->
<span class="pastille pastille-disponible"
aria-label="Disponible"></span>Pastille verte #22C55E sur fond blanc #FFFFFF → 1.79:1 ✗
Pastille verte #15803D sur fond blanc #FFFFFF → 5.13:1 ✓Les verts vifs et saturés échouent fréquemment, ils semblent intenses visuellement mais leur luminance relative est élevée, ce qui réduit le contraste avec les fonds clairs.
La règle de taille minimale (WCAG 2.2)
WCAG 2.2 précise qu’un indicateur graphique non textuel doit avoir une superficie minimale pour être couvert par la règle 3.3 : au moins 3×3 pixels. En dessous de cette taille, l’élément est trop petit pour être significatif.
Le focus visible et son contraste
Le focus est un composant d’interface, son contraste est couvert par 3.3. Mais WCAG 2.2 introduit des critères spécifiques plus exigeants (2.4.11).
La mesure minimale (RGAA 4.1.2 / WCAG 2.1)
Le critère 10.7 demande que le focus soit visible. La mesure de contraste 3:1 vient du critère 3.3, l’outline de focus est un composant d’interface.
Outline bleu #1A56A0 sur fond blanc #FFFFFF → 5.9:1 ✓
Outline bleu ciel #93C5FD sur fond blanc #FFFFFF → 1.64:1 ✗
Outline gris clair #D1D5DB sur fond blanc #FFFFFF → 1.61:1 ✗Les outlines pâles ou pastels échouent systématiquement.
Le double anneau : contraste garanti sur tous les fonds
La technique du double anneau (outline foncé + anneau blanc) garantit la visibilité sur fond clair ET fond foncé :
:focus-visible {
outline: 3px solid #1A56A0; /* anneau bleu — visible sur fond clair */
outline-offset: 0;
box-shadow:
0 0 0 2px white, /* anneau blanc — visible sur fond foncé */
0 0 0 5px #1A56A0; /* deuxième anneau bleu */
}Sur fond blanc : l’outline bleu à 5,9:1 ✓ Sur fond bleu marine : l’anneau blanc à 21:1 ✓
Les boutons : fond, texte, bordure, état hover
Un bouton concentre plusieurs mesures à vérifier simultanément.
Bouton avec fond et texte
Bouton fond #1A56A0, texte #FFFFFF
→ Texte blanc sur fond bleu : 5.9:1 ✓ (critère 3.2)Bouton “ghost” (contour sans fond)
Bouton ghost : contour #1A56A0 sur fond page #FFFFFF
→ Contour bleu sur fond blanc : 5.9:1 ✓ (critère 3.3)
Bouton ghost : texte #1A56A0 sur fond page #FFFFFF
→ Texte bleu sur fond blanc : 5.9:1 ✓ (critère 3.2)Cas problématique d’un bouton ghost clair sur fond foncé :
Bouton ghost : contour #93C5FD sur fond sombre #1F2937
→ Contour bleu clair sur fond sombre : 3.07:1 ✓ (juste au-dessus de 3:1)
→ Texte bleu clair #93C5FD sur fond sombre : 3.07:1 ✗ (insuffisant pour le texte — seuil 4.5:1)Un bouton ghost peut passer 3.3 (bordure) tout en échouant 3.2 (texte), les deux critères s’appliquent indépendamment.
État hover
L’état hover doit aussi passer les seuils. Si le fond du bouton s’éclaircit au hover pour indiquer l’interactivité, vérifier que le texte reste lisible sur ce fond plus clair.
.bouton { background: #1A56A0; color: white; } /* 5.9:1 ✓ */
.bouton:hover { background: #2563EB; color: white; } /* 5.13:1 ✓ */
.bouton:hover { background: #93C5FD; color: white; } /* 1.64:1 ✗ */État désactivé : exception WCAG
Les boutons et champs désactivés (disabled) sont explicitement exclus des exigences de contraste par WCAG. L’intention est de les rendre visuellement distincts des éléments actifs, ce qui implique souvent un contraste plus faible, signalant que l’interaction est impossible.
Ce n’est pas une validation pour rendre les éléments disabled complètement invisibles, mais un ratio de 2:1 ou 2.5:1 est acceptable.
Récapitulatif : les mesures par composant
| Composant | Ce qu’on mesure | Seuil | Critère |
|---|---|---|---|
| Texte courant | Couleur texte / fond | 4.5:1 | 3.2 |
| Grand texte | Couleur texte / fond | 3:1 | 3.2 |
| Bordure de champ | Couleur bordure / fond | 3:1 | 3.3 |
| Icône informative | Couleur icône / fond | 3:1 | 3.3 |
| Pastille de statut | Couleur pastille / fond | 3:1 | 3.3 |
| Outline de focus | Couleur outline / fond | 3:1 | 3.3 |
| Texte de bouton | Couleur texte / fond bouton | 4.5:1 | 3.2 |
| Bordure de bouton ghost | Couleur bordure / fond page | 3:1 | 3.3 |
| Élément disabled | Aucune exigence minimale | — | — |
| Élément décoratif | Aucune exigence minimale | — | — |
En audit, traiter ces mesures dans l’ordre : texte d’abord (4.5:1, le plus restrictif), puis composants (3:1). Un composant qui passe 3:1 mais échoue 4.5:1 est en non-conformité (NC) uniquement si c’est du texte, pas si c’est une icône ou une bordure.