L’accessibilité des couleurs : le guide complet

Pourquoi l’accessibilité des couleurs est cruciale

La couleur est l’un des outils les plus utilisés dans le design web : elle attire l’attention, signale une action, hiérarchise l’information ou encore transmet une émotion. Mais s’appuyer uniquement sur la couleur peut créer des obstacles majeurs pour certains utilisateurs.

  • Personnes daltoniennes : environ 8 % des hommes et 0,5 % des femmes sont touchés par une forme de daltonisme. Pour elles, certaines combinaisons (rouge/vert, bleu/violet) deviennent indiscernables.

  • Personnes malvoyantes : une mauvaise perception des contrastes rend la lecture difficile, surtout si le texte est clair sur fond clair ou sombre sur fond sombre.

  • Utilisateurs en mobilité : une forte luminosité sur un écran peut réduire la lisibilité des couleurs, même sans handicap visuel.

  • Personnes âgées : avec l’âge, la sensibilité aux contrastes diminue, ce qui rend la lecture sur écran encore plus exigeante.

Garantir une bonne accessibilité des couleurs, ce n’est pas seulement respecter la loi, c’est surtout permettre à tous de comprendre et d’utiliser un contenu sans ambiguïté.

C’est pourquoi les WCAG imposent deux règles majeures :

  • Critère 1.4.1 “Utilisation de la couleur” : la couleur ne doit jamais être le seul moyen de transmettre une information.

  • Critères 1.4.3 et 1.4.11 “Contraste” : le contraste entre le texte et son arrière-plan doit être suffisant.
     

Le RGAA reprend ces obligations dans ses critères 3.1, 3.2 et 3.3.

Les bonnes pratiques à respecter

1. Ne jamais véhiculer l’information uniquement par la couleur

Prenons un exemple courant : un formulaire où les champs obligatoires sont indiqués en rouge. Pour une personne daltonienne, cette différence peut être imperceptible. <label for= »email »>Email (obligatoire)</label> <input type= »text » id= »email » aria-required= »true »> Ici, la mention “obligatoire” est écrite en toutes lettres, et l’attribut aria-required= »true » permet aux technologies d’assistance d’annoncer correctement l’information. Autres cas fréquents à corriger :
  • Liens différenciés uniquement par la couleur : il est conseillé d’ajouter un soulignement ou un effet visuel supplémentaire.
  • Tableaux codés en couleurs : prévoir une légende textuelle, ou utiliser des motifs/formes distinctives.
  • État actif ou erreur d’un bouton : combiner la couleur avec un pictogramme ou un message textuel.

2. Garantir des contrastes suffisants pour les textes

Les WCAG (critère 1.4.3) imposent des ratios minimum de contraste :

  • Texte normal (< 24px ou 18,5px gras) : 4,5:1.

  • Texte large (≥ 24px ou 18,5px gras) : 3:1.

Ces ratios garantissent que le texte reste lisible pour la majorité des utilisateurs, y compris avec une basse vision.

Exemple correct : texte noir (#000000) sur fond blanc (#FFFFFF) → contraste 21:1.
Exemple incorrect : texte gris clair (#999999) sur fond blanc (#FFFFFF) → contraste 2,5:1.

exemple de ratio de contraste satisfaisant (21:1) et non suffisant (2.5:1) pour un texte.

Des outils comme Contrast Checker de WebAIM ou l’extension “Colour Contrast Analyser” permettent de tester rapidement les combinaisons.

3. Garantir des contrastes suffisants pour les éléments interactifs

Les éléments interactifs, tels que les boutons, les champs de formulaires ou les pictogrammes interactifs, doivent également avoir un contraste suffisant avec leur arrière-plan. 

La règle imposée par le WCAG et le RGAA est d’avoir un contraste d’au moins 3:1 entre l’élément interactif et son fond.

Voyez l’exemple ci-dessous avec un champ de formulaire au contour bleu, sur fond gris. Le premier en haut présente un contraste suffisant, avec la couleur bleu (#0051FF) sur le fond gris (#EDEBEB). Celui du bas est insuffisant, puisque le bleu (#AEC7FF) est trop clair par rapport au fond gris.

exemple d'un ratio de contraste suffisant (4.9:1) et insuffisant (1.4:1) pour un composant interactif comme un contour de bouton.

4. Vérifier l’accessibilité des états interactifs

Les liens et boutons doivent rester identifiables à toutes les étapes : état normal, survol (hover), focus clavier, clic (active). Les changements de couleur doivent être renforcés par d’autres signaux visuels, comme le soulignement ou l’épaisseur de la bordure. Et les contrastes de ces éléments interactifs doivent respecter le ratio minimum de 3:1, peu importe leur état.

5. Garantir la lisibilité dans différents modes d’affichage

Tous les utilisateurs ne voient pas votre site dans les mêmes conditions. Certains activent des modes spécifiques d’affichage, qui peuvent transformer totalement les couleurs d’une interface.
  • Mode contraste élevé (Windows, Linux, extensions de navigateur) Dans ce mode, les couleurs définies par le CSS peuvent être remplacées par celles choisies par l’utilisateur. Le fond peut devenir noir et le texte blanc, ou l’inverse. Les images de fond, dégradés et ombres portées sont souvent désactivés.
Conséquence : si un texte repose sur une image de fond pour être lisible, il disparaîtra. Si une icône est affichée uniquement en couleur claire sur fond clair, elle risque d’être invisible.
  • Mode sombre ou thèmes personnalisés (dark mode / high contrast custom) De plus en plus de systèmes (iOS, Android, macOS, Windows) et de navigateurs proposent un “dark mode”. Si votre site n’est pas conçu pour gérer ces bascules, un texte foncé peut devenir illisible sur un fond devenu sombre.
  • Personnalisation des couleurs par l’utilisateur Certains utilisateurs malvoyants définissent leurs propres combinaisons de couleurs (par exemple texte jaune sur fond noir). Cela signifie que vos styles par défaut doivent être suffisamment flexibles pour s’adapter.
Bonnes pratiques à adopter :
  • Ne pas utiliser d’images de fond ou de dégradés pour transmettre une information essentielle.
  • Vérifier que les icônes et boutons restent visibles lorsque le fond change (utiliser des bordures, des symboles, ou des contrastes forts).
  • S’assurer que l’interface fonctionne même quand le contraste système prend le dessus. Par exemple, tester la page avec le mode contraste élevé de Windows.
  • Utiliser les media queries CSS (prefers-contrast, prefers-color-scheme) pour proposer une version adaptée en mode sombre ou en contraste élevé. Exemple :
@media (prefers-color-scheme: dark) {   body {     background: #000;     color: #fff;   } }

Les Erreurs fréquentes

  • Utiliser uniquement la couleur pour indiquer une erreur dans un formulaire.

  • Choisir des palettes “tendance” sans vérifier les contrastes. Les modes passent, mais les contraintes restent les mêmes.

  • Oublier de tester les icônes et pictogrammes : une icône jaune sur fond blanc peut être invisible pour beaucoup d’usager.

  • Retirer le soulignement des liens sans ajouter un autre indicateur visuel.

 

Les couleurs et contrastes sont des éléments essentiels de l’accessibilité numérique. Ils garantissent que le contenu reste lisible et compréhensible, quels que soient le handicap visuel, l’environnement lumineux ou l’âge de l’utilisateur.

Pour concevoir un site ou une application accessible, il faut retenir trois principes simples : ne jamais s’appuyer uniquement sur la couleur, assurer un contraste suffisant pour tous les textes et éléments interactifs, et tester les interfaces dans différents contextes d’affichage.

Ce travail en amont évite de nombreux problèmes et offre à tous les utilisateurs une expérience de navigation claire, agréable et équitable.

Réservez
un appel de découverte

Évaluez l’ampleur de votre besoin en accessibilité numérique, développement ou branding
Obtenez des pistes de réflexion concrètes sur vos points d’amélioration
Bénéficiez des conseils d’experts qui ont une expérience approfondie et une vision stratégique dans le domaine
Réserver un appel de découverte

Gratuit • 45 minutes • En ligne