Contraste des couleurs et accessibilité : le guide RGAA/WCAG

Si le contraste des couleurs ne tient pas la route, le reste du design ne compte plus vraiment

Nous savons que c'est une affirmation forte, mais c'est le quotidien des personnes malvoyantes, de celles qui vivent avec une forme de daltonisme, ou tout simplement de celles qui lisent leur écran en plein soleil. Si vous voulez en savoir plus sur ces barrières numériques, découvrez ce qu'est l'accessibilité numérique avec notre article dédié et comment rendre un site internet accessible facilement.

Dans cet article, nous voyons comment le contraste des couleurs est mesuré par les WCAG et le RGAA, et quelles sont les erreurs les plus courantes à éviter. Comprendre le lien entre contraste des couleurs et accessibilité numérique permet d'éviter la majorité des problèmes de lisibilité rencontrés sur le web. Découvrez notre vérificateur de contraste des couleurs gratuitement :

Pour en savoir plus, demandez à nos experts un rendez-vous et vérifiez où en est votre site web en matière d'accessibilité.

Qu'est-ce que le rapport de contraste et comment le calculer

Le rapport de contraste mesure la différence de luminance entre deux couleurs et s'exprime sous forme de nombre, de 1:1 (aucun contraste) à 21:1 (blanc sur noir). Plus la valeur est élevée, plus le texte se distingue nettement de son arrière-plan

Le calcul repose sur la luminance relative de chaque couleur. C'est une donnée objective : deux couleurs qui semblent bien distinctes à l'écran peuvent tout de même avoir un rapport insuffisant. Mieux vaut donc mesurer que se fier à l'œil.

Exemples de combinaisons de couleurs et leur rapport de contraste

Quelques repères concrets aident à mieux visualiser ce que représentent ces seuils dans la pratique :

Texte noir sur fond blanc offre un rapport de 21:1, le maximum possible, largement au-dessus de toutes les exigences. Texte gris moyen sur fond blanc tombe souvent autour de 3,5:1 à 4:1, en dessous du seuil AA pour le texte normal, un cas très fréquent sur les sites qui privilégient un design épuré. Texte blanc sur fond bleu marine se situe généralement entre 8:1 et 10:1 selon la nuance exacte de bleu, largement conforme au niveau AA et souvent au niveau AAA. Texte blanc sur fond bleu clair ou pastel descend fréquemment sous 3:1, un écart qui se voit surtout sur les boutons et bannières promotionnelles.

Ces exemples montrent bien que l'intuition visuelle ne suffit pas : deux bleus qui semblent proches à l'œil peuvent donner des résultats très différents une fois mesurés.

Contraste des couleurs et accessibilité : les seuils RGAA et WCAG 2.2

Le RGAA, référentiel de référence en France, et les WCAG 2.2 fixent des seuils différents selon la taille du texte et le niveau de conformité visé. Côté français, c'est le critère RGAA 3.2 sur les contrastes qui encadre le rapport entre la couleur du texte et celle de son arrière-plan.

Niveau AA : 4,5:1 pour le texte normal, 3:1 pour le texte large (à partir de 18 pt, ou 14 pt en gras) et pour les éléments graphiques et composants d'interface. Niveau AAA : 7:1 pour le texte normal, 4,5:1 pour le texte large.

Dans la plupart des projets, le niveau AA constitue la référence pratique, mais il vaut la peine de viser plus haut partout où le design le permet : le gain en lisibilité profite à toutes et à tous, pas seulement aux personnes en situation de handicap visuel.

Modifiez les couleurs pour obtenir un contraste minimum de 4,5:1.

Pour les textes plus grands ou en gras, le contraste minimum peut être réduit à 3:1, mais il doit être respecté aussi sur les petits écrans.

Pour quels éléments faut-il mesurer le contraste des couleurs

La plupart des contrôles s'arrêtent au corps du texte sur un arrière-plan uni, mais le contraste doit aussi être vérifié là où il varie le plus souvent.

Le texte superposé à des images ou des dégradés, où la luminance de l'arrière-plan n'est jamais constanteLes états interactifs comme le survol, le focus et l'état désactivé, souvent plus clairs que la couleur de base et donc plus à risque. Le mode sombre, qui demande une vérification distincte, car inverser les couleurs ne garantit pas le même rapport de contraste. Les formulaires et champs de saisie, où les bordures peu marquées, les libellés en gris clair et les messages d'erreur en rouge pâle sont des erreurs récurrentes, particulièrement problématiques sur les tunnels d'achat et les espaces clients où l'utilisateur doit repérer rapidement ce qui ne va pas.

Les 3 erreurs les plus courantes à éviter sur le contraste des couleurs

Trois corrections suffisent pour couvrir la plupart des problèmes qui échappent à un test superficiel.

Confondre le test de contraste avec la simulation du daltonisme

Le rapport de contraste mesure la luminance, pas la perception des couleurs. Une combinaison peut réussir le test WCAG et rester malgré tout difficile à distinguer pour une personne daltonienne, car le problème se situe dans la teinte, pas dans la luminosité. Les deux vérifications sont nécessaires, mais elles répondent à des questions différentes.

Limiter le contrôle à la page d'accueil

C'est la page la plus soignée, souvent la seule testée avant le lancement. Les pages internes, comme les fiches produit, les formulaires ou le tunnel d'achat, héritent de styles plus anciens ou de composants réutilisés d'ailleurs sur le site, et c'est justement là que le contraste se dégrade sans que personne ne s'en aperçoive.

Ignorer les documents liés, comme les PDF et les fichiers Word

Ils suivent les mêmes seuils WCAG et RGAA que le site, mais sont perçus comme des contenus statiques et donc rarement testés. Un rapport téléchargeable avec le même texte gris clair que sur le site pose le même problème, simplement moins visible car il sort du flux de test principal. Le même principe que pour la remédiation s'applique ici : il ne suffit pas de corriger la page, il faut couvrir tout ce qu'elle génère ou relie.

Pourquoi le contraste des couleurs est aussi un enjeu légal

Au-delà de la lisibilité, le contraste des couleurs fait partie des critères vérifiés dans le cadre du RGAA et de l'EAA, entrée en application en juin 2025 pour de nombreux secteurs privés.

Concrètement, un audit de conformité RGAA inclut systématiquement le contrôle des ratios de contraste sur l'ensemble du site, pas seulement sur la page d'accueil. Un écart sur ce critère peut suffire à faire échouer la conformité d'une page entière, même si le reste du contenu est parfaitement accessible.

Pour les organisations soumises à l'obligation de conformité, intégrer le contrôle du contraste dès la conception évite des corrections coûteuses une fois le site en production.

Contraste des couleurs et accessibilité : ce qu'il faut retenir

Le contraste insuffisant reste le problème d'accessibilité le plus répandu sur le web, mais c'est aussi l'un des plus simples à corriger

Un bon point de départ consiste à tester manuellement les combinaisons principales de l'interface, puis à étendre le contrôle à l'ensemble du site avec un outil automatique

Si vous voulez vérifier dans quelle mesure votre site respecte les seuils WCAG et RGAA sur le contraste et sur les autres critères d'accessibilité, la plateforme Accessiway peut vous offrir une vue d'ensemble complète, page par page.

Questions fréquentes sur le test de contraste des couleurs

Pourquoi le contraste des couleurs et l'accessibilité sont-ils liés?

Un contraste insuffisant rend le texte illisible pour une part importante des visiteurs, notamment les personnes malvoyantes ou daltoniennes, mais aussi toute personne qui consulte un écran dans de mauvaises conditions de luminosité. C'est pour cela que le contraste des couleurs est l'un des critères fondamentaux de l'accessibilité numérique

Quel est le rapport de contraste minimum requis par les WCAG ?

Les WCAG 2.2 exigent un rapport minimum de 4,5:1 pour le texte normal et de 3:1 pour le texte large et les éléments graphiques, au niveau de conformité AA.

Quelle est la différence entre le niveau AA et le niveau AAA?

Le niveau AAA exige des seuils plus élevés (7:1 pour le texte normal, 4,5:1 pour le texte large) que le niveau AA, pour une lisibilité encore meilleure dans les contextes qui l'imposent.

Le contraste doit-il aussi être testé sur les icônes et les boutons, pas seulement sur le texte?

Oui, les WCAG comme le RGAA exigent un rapport minimum de 3:1 aussi pour les éléments graphiques et les composants interactifs de l'interface, pas seulement pour le texte.

Un outil de vérification du contraste suffit-il pour être conforme aux WCAG?

Non, un outil ne couvre que le contraste : la conformité WCAG et RGAA exige aussi le respect d'autres critères, comme le texte alternatif, la structure sémantique et la navigation au clavier.

Le contraste doit-il aussi être vérifié en mode sombre?

Oui, le mode sombre demande une vérification distincte, car inverser les couleurs ne garantit pas automatiquement le même rapport de contraste qu'en mode clair.