Comment vérifier le contraste de couleurs pour l'accessibilité
Environ 1 homme sur 12 et 1 femme sur 200 ont une forme de déficience de vision des couleurs. Des millions d'autres ont une vision basse, une vue qui vieillit ou consultent leur écran en plein soleil. Si votre texte n'a pas assez de contraste avec son fond, ces personnes ne peuvent pas le lire.
Le contraste de couleur n'est pas un « plus » — c'est une exigence centrale d'accessibilité.
Ce qu'exige WCAG
Les Web Content Accessibility Guidelines (WCAG) définissent les ratios de contraste minimum entre texte et fond :
| Niveau | Texte normal | Texte large | Éléments non textuels |
|---|---|---|---|
| AA (minimum) | 4,5 : 1 | 3 : 1 | 3 : 1 |
| AAA (renforcé) | 7 : 1 | 4,5 : 1 | — |
« Texte large » signifie 18 px en gras ou 24 px régulier et plus.
Le ratio de contraste va de 1 : 1 (aucun contraste — blanc sur blanc) à 21 : 1 (contraste maximal — noir sur blanc).
Comment vérifier le contraste
- Sélectionnez vos couleurs — saisissez la couleur du texte (premier plan) et celle du fond via des codes HEX, des valeurs RGB ou des sélecteurs.
- Consultez les résultats — l'outil affiche instantanément le ratio de contraste et si votre combinaison passe WCAG AA et AAA en texte normal et large.
- Ajustez si besoin — si le contraste échoue, assombrissez le texte ou éclaircissez le fond (ou l'inverse) jusqu'à atteindre le niveau requis.
Erreurs de contraste courantes
Texte gris clair sur blanc — #999999 sur #ffffff a un ratio de seulement 2,8 : 1. Cela échoue à WCAG AA. Ça peut paraître « épuré » à un designer à la vue parfaite, mais c'est illisible pour beaucoup.
Texte coloré sur fond coloré — un bouton bleu avec du texte blanc passe souvent, mais un bouton vert avec du texte blanc non. Vérifiez toujours — on ne peut pas juger un ratio de contraste à l'œil.
Texte d'indication — les textes d'indication de champ sont notoirement faibles en contraste. Même si WCAG ne les impose pas strictement, les utilisateurs doivent quand même les lire.
Mode sombre — les designers utilisent souvent du gris moyen sur gris foncé pour un look « subtil ». Cela échoue fréquemment aux contrôles de contraste.
Astuces
- Vérifiez chaque combinaison texte/fond — ne présumez rien. Même des designers expérimentés sont surpris par les combinaisons qui échouent.
- Testez les deux thèmes — si votre site a un mode clair et un mode sombre, vérifiez le contraste dans les deux. Une couleur qui fonctionne sur blanc peut échouer sur gris foncé.
- Utilisez vos couleurs de marque avec discernement — si votre bleu de marque échoue en couleur de texte, utilisez-le pour des éléments plus grands (boutons, en-têtes) où le seuil « texte large » (3 : 1) s'applique, et utilisez une nuance plus foncée pour le corps de texte.
- Ne vous reposez pas uniquement sur la couleur — en plus d'un contraste suffisant, ne véhiculez jamais une information par la seule couleur. Utilisez icônes, libellés ou motifs en complément.
Questions fréquentes
Quel ratio de contraste viser ?
Pour du texte normal, visez au moins 4,5 : 1 (WCAG AA). Pour du texte large (18 px gras ou 24 px régulier), 3 : 1 suffit. Pour le niveau d'accessibilité le plus élevé (AAA), visez 7 : 1 pour du texte normal.
Cela ne s'applique-t-il qu'au texte ?
Non. WCAG 2.1 exige aussi un contraste suffisant pour les composants d'interface et les objets graphiques (icônes, bordures de champs, indicateurs de focus). Le minimum pour les éléments non textuels est 3 : 1.
Et en mode sombre ?
Le mode sombre nécessite les mêmes vérifications de contraste. Texte blanc sur fond sombre passe souvent facilement, mais texte gris sur fond gris foncé échoue souvent. Testez les deux modes.
Le contraste de couleur est-il une exigence légale ?
Dans de nombreuses juridictions, oui. L'ADA (US), EN 301 549 (UE) et des lois similaires imposent l'accessibilité numérique. La conformité WCAG est le standard reconnu pour y répondre.