Contraste des couleurs : la règle WCAG et une charte accessible
En bref — les ratios de contraste à respecter
Le contraste mesure l'écart de luminosité entre une couleur de premier plan (texte, icône) et son fond. Il s'exprime en ratio, de 1:1 (identiques) à 21:1 (noir sur blanc). Pour être conforme à l'EAA (norme WCAG 2.1 niveau AA) :
- Texte courant : 4,5:1 minimum entre le texte et son fond (critère 1.4.3) ;
- Grand texte : 3:1 minimum — à partir de 24 px normal, ou 18,66 px (≈14 pt) en gras ;
- Composants et icônes utiles : 3:1 — bordures de champ, boutons, icônes porteuses de sens, indicateur de focus (critère 1.4.11) ;
- Ne jamais transmettre une information par la seule couleur (critère 1.4.1) : un libellé, un motif ou un texte doit doubler le code couleur ;
- Logos et éléments purement décoratifs : aucune exigence de contraste.
Le contraste est le manquement le plus fréquemment détecté par les outils automatiques — et l'un des plus simples à corriger au stade de la charte graphique.
« Notre marque, c'est ce gris clair élégant. » C'est probablement la phrase qui crée le plus de non-conformités sur le web. Un texte gris pâle sur fond blanc, un bouton dans une couleur de marque trop claire, un libellé d'erreur signalé uniquement en rouge : autant de barrières pour les personnes malvoyantes, daltoniennes, ou simplement pour quiconque consulte un écran en plein soleil. La bonne nouvelle : le contraste se règle au niveau de la charte graphique, une fois, et bénéficie ensuite à tout le site.
Qu'est-ce qu'un ratio de contraste, et pourquoi il compte
Le ratio de contraste compare la luminance (la clarté perçue) de deux couleurs. Le calcul est normalisé par les WCAG : il va de 1:1 (aucun contraste) à 21:1 (noir pur sur blanc pur). Plus le ratio est élevé, plus le texte se détache de son fond. En matière d'accessibilité, deux critères fixent les seuils : WCAG 1.4.3 « Contraste (minimum) » pour le texte, et WCAG 1.4.11 « Contraste des éléments non textuels » pour les composants d'interface et les graphiques. Tous deux sont de niveau AA — donc exigés par la norme EN 301 549, la référence technique de l'European Accessibility Act, applicable aux services de commerce électronique depuis le 28 juin 2025.
Le contraste ne concerne pas qu'une minorité : il améliore la lisibilité pour tout le monde, sur tous les écrans et dans toutes les conditions de lumière. C'est aussi, avec le texte alternatif, l'un des deux manquements que les outils de scan détectent le plus fiablement.
Les 6 règles du contraste accessible
Au moins 4,5:1 entre le texte et son fond
C'est la règle de base : tout texte de taille normale doit afficher un ratio d'au moins 4,5:1 avec sa couleur de fond. Cela vaut pour les paragraphes, les libellés, les prix, les mentions légales, le pied de page. Le piège le plus courant : le gris clair « discret ».
#595959 sur blanc (≈7:1), ou #767676 sur blanc (≈4,5:1, le gris le plus clair encore acceptable).#999999 sur blanc (≈2,8:1) ou un texte placeholder gris très clair : agréable au designer, illisible pour une partie des clients.3:1 suffit, mais seulement à partir d'une certaine taille
Le seuil tombe à 3:1 pour le « grand texte », défini précisément : au moins 24 px en graisse normale, ou au moins 18,66 px (≈14 pt) en gras. En dessous de ces tailles, c'est la règle des 4,5:1 qui s'applique, même pour un titre. Ne supposez donc pas qu'un titre échappe à l'exigence : vérifiez sa taille réelle.
3:1 pour ce qui n'est pas du texte mais porte du sens
Le critère 1.4.11 étend l'exigence aux éléments non textuels essentiels : la bordure ou le fond qui rend un champ de formulaire identifiable, le contour d'un bouton, une icône qui transmet une information (panier, cadenas, alerte), les segments d'un graphique. Chacun doit afficher au moins 3:1 avec ce qui l'entoure. Un champ de saisie cerné d'un gris quasi invisible échoue ici.
#767676 sur fond blanc ; icône d'alerte dans une couleur nettement détachée du fond.Le repère du clavier doit lui aussi être visible
Quand on navigue au clavier (touche Tab), l'élément actif affiche un indicateur de focus — souvent un contour. Cet indicateur est un élément non textuel : il doit contraster d'au moins 3:1 avec le fond adjacent pour être perceptible. Ne supprimez jamais le focus par défaut (outline: none) sans en fournir un, bien contrasté, à la place.
outline: none sans remplacement, ou un focus gris pâle invisible.Une information ne doit pas reposer uniquement sur la couleur
Distinct du contraste mais étroitement lié : le critère 1.4.1 interdit de transmettre une information par la seule couleur. Un champ en erreur signalé seulement par un cadre rouge, un prix soldé écrit uniquement en rouge, un lien dans un paragraphe distingué seulement par sa couleur : tous échouent pour une personne daltonienne. Doublez toujours la couleur d'un libellé, d'un motif, d'une icône ou d'un soulignement.
Le contraste doit tenir partout sous le texte
Un titre blanc posé sur une photo de bannière (hero) est le cas le plus piégeux : le contraste varie d'un pixel à l'autre selon la zone claire ou sombre de l'image. Le ratio doit être respecté sur toute la surface couverte par le texte. Solutions fiables : un voile semi-opaque (overlay sombre ou clair) entre l'image et le texte, un bandeau de couleur unie derrière le texte, ou une ombre portée suffisamment marquée.
Les seuils en un coup d'œil
| Élément | Ratio minimum | Critère WCAG |
|---|---|---|
| Texte courant (<24 px, ou <18,66 px gras) | 4,5:1 | 1.4.3 (AA) |
| Grand texte (≥24 px, ou ≥18,66 px gras) | 3:1 | 1.4.3 (AA) |
| Composant d'interface (bord de champ, bouton, icône utile) | 3:1 | 1.4.11 (AA) |
| Indicateur de focus (vs fond adjacent) | 3:1 | 1.4.11 / 2.4.7 |
| Logo, texte décoratif, élément inactif | aucune exigence | — |
| Niveau AAA (recommandé, hors EAA) | 7:1 | 1.4.6 (AAA) |
Comment vérifier le contraste de vos couleurs
Trois moyens gratuits, du plus large au plus précis :
- Un scan automatique (axe-core, WAVE, Lighthouse) détecte très bien les textes sous le seuil sur fond uni : c'est l'un des manquements qu'il repère le plus fiablement, avec le ratio exact et le sélecteur fautif.
- L'outil de votre navigateur : dans l'inspecteur (DevTools), le sélecteur de couleur affiche directement le ratio de contraste d'un texte et indique s'il passe AA/AAA.
- Un vérificateur de paires (type « contrast checker ») : au moment de définir la charte, testez chaque couple texte/fond avant de l'adopter — c'est là que la correction coûte le moins cher.
L'angle mort des outils : le texte sur image ou sur dégradé, que les scans n'évaluent pas de façon fiable (le fond n'est pas une couleur unique). Ces cas demandent une vérification humaine.
→ Méthode complète : comment tester l'accessibilité de son site. Le contraste fait aussi partie de la checklist des 24 points.
Vérifiez le contraste de votre site gratuitement
DeclareAccess analyse une page de votre boutique avec le moteur axe-core selon les WCAG 2.1 AA, liste les textes et composants sous le seuil de contraste (avec le ratio exact) et les autres manquements, puis génère la déclaration d'accessibilité prête à publier — modèle français (RGAA), allemand (BFSG), italien ou espagnol. Gratuit, sans carte bancaire.
Rapport WCAG par e-mail sous 24 h ouvrées.
C'est noté. Votre client e-mail va s'ouvrir avec la demande pré-remplie — il vous suffit de l'envoyer.
Questions fréquentes
Comment calcule-t-on un ratio de contraste ?
Les WCAG définissent une formule basée sur la luminance relative des deux couleurs : (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance de la couleur la plus claire et L2 celle de la plus sombre. Le résultat va de 1:1 à 21:1. En pratique, on ne le calcule pas à la main : un vérificateur de contraste, l'inspecteur du navigateur ou un scan automatique donnent le ratio instantanément à partir de deux codes couleur.
La règle des 4,5:1 s'applique-t-elle à mon logo ?
Non. Les logos et les marques (le texte qui fait partie d'un logotype) sont explicitement exemptés de l'exigence de contraste, de même que le texte purement décoratif et les éléments d'interface inactifs (par exemple un bouton désactivé). En revanche, dès qu'un texte transmet une information utile — un titre, un prix, un libellé — la règle s'applique.
Ma couleur de marque ne passe pas le seuil, que faire ?
Vous n'êtes pas obligé de changer votre identité visuelle. La solution habituelle est de définir une variante foncée de la couleur de marque, réservée au texte et aux éléments interactifs (liens, boutons), tout en gardant la teinte d'origine pour les aplats, les fonds et les décors. La couleur reste reconnaissable, et le texte devient lisible. À défaut, posez le texte sur un fond neutre (blanc, gris foncé) plutôt que sur la couleur elle-même.
Le mode sombre change-t-il les exigences de contraste ?
Non, les seuils sont les mêmes (4,5:1 et 3:1) — mais ils doivent être respectés dans chaque thème. Une couleur qui passe en mode clair peut échouer en mode sombre, et inversement. Si vous proposez un mode sombre, vérifiez le contraste séparément dans les deux. Beaucoup d'oublis viennent d'un texte gris hérité du mode clair, devenu illisible sur fond foncé.
Comment gérer du texte posé sur une photo de bannière ?
C'est le cas le plus délicat, car le fond n'est pas une couleur unique. Le contraste doit être respecté partout où le texte se trouve. Les solutions fiables : ajouter un voile semi-transparent (overlay) entre l'image et le texte pour uniformiser le fond, placer le texte sur un bandeau de couleur unie, ou utiliser une ombre portée marquée. Les scans automatiques n'évaluant pas bien ce cas, vérifiez-le à l'œil sur l'image réelle.