Contrastes et couleurs : les seuils et les pièges
La thématique des couleurs porte deux exigences que l'on confond souvent : le contraste suffisant, et l'interdiction de porter une information par la couleur seule. La première se calcule, la seconde se juge. Les deux figurent parmi les manquements les plus fréquents, et parmi les moins coûteux à corriger.
Les seuils
| Élément | Seuil | Définition du « grand texte » |
|---|---|---|
| Texte courant | 4,5:1 | Moins de 24 px, ou moins de 18,5 px en gras |
| Texte de grande taille | 3:1 | Au moins 24 px, ou au moins 18,5 px en gras |
| Composants d'interface | 3:1 | Bordures de champs, boutons, indicateur de focus |
| Éléments graphiques informatifs | 3:1 | Icônes signifiantes, courbes d'un graphique |
Pour la méthode de calcul et les cas limites, voyez le vérificateur de contraste.
L'oubli systématique
Le seuil de 3:1 s'applique aux bordures de champs de formulaire, aux limites de boutons et à l'indicateur de focus. Une bordure gris clair sur fond blanc rend le champ invisible — et c'est une non-conformité au même titre qu'un texte illisible.
C'est l'oubli le plus répandu, y compris chez des équipes averties. Nous l'avons nous-mêmes détecté sur ce site en calculant les valeurs : les bordures étaient à 2,59:1, elles sont aujourd'hui à 4,12:1. Voir notre déclaration.
L'information portée par la couleur seule
C'est la seconde exigence, et elle ne se règle pas par le contraste. Quatre situations reviennent constamment.
| Situation | Correction |
|---|---|
| Champ en erreur signalé par une bordure rouge | Ajouter un message textuel associé au champ |
| Statut indiqué par une pastille colorée | Ajouter un intitulé ou un pictogramme distinct |
| Légende de graphique distinguée par la teinte | Ajouter motifs, formes de points ou étiquettes directes |
| Lien identifiable par sa seule couleur dans un texte | Souligner, ou garantir un contraste suffisant avec le texte environnant |
Ce que le calcul ne voit pas
- Texte sur photographie — mesurer sur la zone la plus défavorable, pas sur la moyenne.
- Texte sur dégradé — mesurer aux deux extrémités.
- Couleur semi-transparente — calculer la couleur composite réelle.
- États au survol et au focus — chaque état se vérifie séparément.
- Thème sombre — rien ne se transpose, tout se recalcule.
Corriger au bon endroit
Les contrastes se corrigent dans le système de design, pas page par page. Une poignée de valeurs modifiées répare des centaines d'occurrences, et empêche la réapparition du problème sur les écrans suivants. C'est le meilleur rendement de tout un chantier de mise en conformité — voir le design system accessible.
Viser au-dessus du seuil
Un texte à 4,6:1 est conforme et fatigant. Quand le choix existe, viser franchement plus haut ne coûte rien et sert les personnes malvoyantes, les lecteurs en plein soleil et les écrans de mauvaise qualité.
Poursuivre
Pour le test le plus révélateur d'un audit, voyez la navigation au clavier.