Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Un tiers des seniors perçoit moins bien les contrastes ; pour eux, un texte gris clair sur fond blanc n’est pas inconfortable : il est invisible. Ajoutez les utilisateurs daltoniens, ceux qui consultent votre site en plein soleil ou sur un écran de piètre qualité, et vous comprendrez pourquoi le contraste insuffisant est l’anomalie la plus fréquente dans les audits d’accessibilité.
Le critère 3.2 fixe deux seuils selon la taille et la graisse du texte. Pour le texte courant (sans graisse et inférieur à 24 px, ou en gras et inférieur à 18,5 px), le rapport de contraste doit être d’au moins 4,5:1. Pour les grands textes (sans graisse à partir de 24 px, ou en gras à partir de 18,5 px), le seuil descend à 3:1. Ce n’est pas une recommandation : c’est une exigence de niveau AA.
Une échappatoire est prévue : si le contraste par défaut est insuffisant, un mécanisme sur la page peut permettre à l’utilisateur d’afficher le texte avec un rapport conforme. Ce mécanisme lui-même doit être lisible (test 3.2.5). Si le bouton « Basculer en mode contraste élevé » est illisible, personne ne peut s’en servir.
Pour mesurer, utilisez le Includdy (pipette directe sur l’écran) ou l’onglet Accessibilité des DevTools Firefox. Calculez toujours le rapport entre la couleur du texte et celle de l’arrière-plan immédiat, pas la couleur du body si un autre élément est intercalé.
5 tests pour contrôler le niveau de contraste du texte
Contraste texte normal sans graisse (< 24 px)
Ce test concerne les textes normaux (sans graisse) dont la taille restituée est inférieure à 24 px.
- Identifiez tous les textes suspects : corps de texte, libellés, légendes, liens, sans graisse et taille < 24 px.
- Pour chaque texte, mesurez le rapport de contraste entre sa couleur et celle de son arrière-plan direct.
- Vérifiez l’une des deux conditions :
- Le rapport est ≥ 4,5:1, ou
- Un mécanisme sur la page permet d’atteindre ce rapport (voir test 3.2.5).
- Si au moins un texte échoue aux deux conditions, le test est non conforme.
Contraste texte gras (< 18,5 px)
Ce test concerne les textes en gras dont la taille restituée est inférieure à 18,5 px.
- Identifiez tous les textes en gras (font-weight ≥ 700) dont la taille est < 18,5 px.
- Pour chaque texte, mesurez le rapport de contraste entre sa couleur et celle de son arrière-plan direct.
- Vérifiez l’une des deux conditions :
- Le rapport est ≥ 4,5:1, ou
- Un mécanisme sur la page permet d’atteindre ce rapport (voir test 3.2.5).
- Si au moins un texte échoue aux deux conditions, le test est non conforme.
Contraste grand texte sans graisse (≥ 24 px)
Ce test concerne les grands textes normaux (sans graisse) dont la taille restituée est supérieure ou égale à 24 px — typiquement les titres.
- Identifiez tous les textes sans graisse avec une taille ≥ 24 px.
- Pour chaque texte, mesurez le rapport de contraste entre sa couleur et celle de son arrière-plan direct.
- Vérifiez l’une des deux conditions :
- Le rapport est ≥ 3:1, ou
- Un mécanisme sur la page permet d’atteindre ce rapport (voir test 3.2.5).
- Si au moins un texte échoue aux deux conditions, le test est non conforme.
Contraste grand texte gras (≥ 18,5 px)
Ce test concerne les grands textes en gras dont la taille restituée est supérieure ou égale à 18,5 px.
- Identifiez tous les textes en gras (font-weight ≥ 700) avec une taille ≥ 18,5 px.
- Pour chaque texte, mesurez le rapport de contraste entre sa couleur et celle de son arrière-plan direct.
- Vérifiez l’une des deux conditions :
- Le rapport est ≥ 3:1, ou
- Un mécanisme sur la page permet d’atteindre ce rapport (voir test 3.2.5).
- Si au moins un texte échoue aux deux conditions, le test est non conforme.
Contraste du mécanisme de contraste alternatif
Ce test vérifie que les mécanismes proposés pour compenser un contraste insuffisant sont eux-mêmes accessibles.
- Repérez tous les mécanismes de contraste alternatif sur la page : bouton « mode contraste élevé », sélecteur de thème, lien vers une version alternative.
- Pour chacun, mesurez le rapport de contraste du texte du mécanisme par rapport à son propre arrière-plan.
- Ce texte doit respecter les seuils des tests 3.2.1 à 3.2.4 selon sa taille et sa graisse.
- Un mécanisme illisible ne compte pas : le test est non conforme.
Exemples
❌ Non conforme : Texte gris clair sur fond blanc
<p style="color: #999999; background-color: #ffffff; font-size: 16px;">
Consultez nos conditions générales d’utilisation.
</p>La couleur #999999 sur fond blanc (#ffffff) produit un rapport de contraste de 2,8:1. Pour un texte de 16 px sans graisse, le seuil requis est 4,5:1. Un utilisateur malvoyant ou daltonien lira difficilement ce texte ; un senior avec une sensibilité réduite aux contrastes ne le lira pas du tout.
✅ Conforme : Même texte avec un gris suffisamment foncé
<p style="color: #595959; background-color: #ffffff; font-size: 16px;">
Consultez nos conditions générales d’utilisation.
</p>La couleur #595959 sur fond blanc atteint un rapport de 7:1, bien au-delà du seuil de 4,5:1. Le texte reste sobre visuellement tout en étant lisible pour les utilisateurs ayant une sensibilité au contraste réduite.
❌ Non conforme : Grand titre avec contraste insuffisant même au seuil réduit
<h1 style="color: #aaaaaa; background-color: #ffffff; font-size: 32px; font-weight: 400;">
Bienvenue sur notre plateforme
</h1>Pour un titre de 32 px sans graisse, le seuil abaissé est de 3:1. Pourtant, #aaaaaa sur blanc ne produit qu’un rapport de 2,32:1. Les grands textes bénéficient d’un seuil plus souple, pas d’une exemption.
✅ Conforme : Bouton avec texte blanc sur fond bleu conforme
<button style="
background-color: #0066cc;
color: #ffffff;
font-size: 16px;
border: none;
padding: 12px 24px;
">
Valider la commande
</button>Le texte blanc (#ffffff) sur fond bleu (#0066cc) produit un rapport de 5,57:1, conforme pour un texte de 16 px (seuil : 4,5:1). Le critère 3.2 est satisfait. La présence ou l’absence de bordure sur le bouton relève du critère 3.3, pas de 3.2.
Astuces et pièges
⚠️ Mesurer la mauvaise couleur de fond
L’erreur la plus fréquente en audit : utiliser la pipette sur le body alors que le texte est posé sur un div avec background-color: #f5f5f5. Le rapport doit être calculé entre le texte et l’arrière-plan immédiat. Si un <span> a son propre fond coloré, c’est ce fond qui fait foi.
⚠️ Confondre critère 3.2 et critère 3.3
Le critère 3.2 concerne uniquement le texte et son arrière-plan. Le critère 3.3 concerne les composants d’interface et les éléments graphiques porteurs d’information. Sur un bouton avec texte blanc sur fond bleu : le texte relève de 3.2, la bordure (si elle porte une information) relève de 3.3. Ce sont deux vérifications distinctes.
💡 Passer au gras pour baisser le seuil requis
Un texte de 18,5 px en gras (font-weight : 700) relève du test 3.2.4 avec un seuil de 3:1. Le même texte sans graisse relève du test 3.2.1 avec un seuil de 4,5:1. Ajouter font-weight: 700 peut rendre un texte conforme sans toucher à la couleur — à condition que la taille soit ≥ 18,5 px. C’est contre-intuitif, mais légitimé par les WCAG : les caractères plus épais sont intrinsèquement plus lisibles.
⚠️ Texte sur fond dégradé ou image de fond
Quand le texte est posé sur un dégradé ou une image, il n’y a pas de couleur unique à comparer. La pratique consiste à mesurer le rapport au point de contraste le plus faible, là où le texte est le moins lisible. Si ce minimum passe le seuil, le critère est satisfait.
⚠️ Textes hors champ du critère
Quatre cas sont explicitement exclus (les « cas particuliers » de l’intitulé) : les textes faisant partie d’un logo ou d’une marque, les textes purement décoratifs sans information, les textes dans des composants d’interface désactivés, et les textes sur photographie dont le fond naturel échappe au contrôle. Ces exceptions doivent être documentées dans la déclaration d’accessibilité.
💡 Viser 4,6:1 plutôt que 4,5:1 exactement
Le seuil de 4,5:1 est strict, mais le rendu des couleurs varie légèrement selon les écrans et les profils ICC. En pratique, visez 4,6:1 ou plus pour absorber ces variations et éviter un refus lors d’un audit sur matériel différent du vôtre.
Questions fréquentes
Comment mesurer le contraste d'un texte sur fond dégradé ou sur une image ?
Mesurez au point le plus défavorable, là où le fond est le plus proche de la couleur du texte. Utilisez Includdy : son outil pipette permet de prélever la couleur exacte à l’écran. Si le ratio passe sous le seuil en un seul endroit, le texte est non conforme. Ajoutez un fond opaque derrière le texte ou une ombre portée pour sécuriser le contraste sur tout le fond.
Quelle différence entre la taille CSS et la taille affichée pour évaluer le contraste RGAA ?
C’est la taille restituée — ce que le navigateur affiche réellement, après application des styles. Un texte déclaré à 1.5rem sur une base de 16 px est restitué à 24 px : il tombe dans la catégorie « grand texte » (seuil 3 :1 sans graisse). Pensez également aux transformations CSS comme transform: scale() qui modifient la taille perçue sans changer la valeur calculée.
Quand un texte décoratif sur image est-il exempté du critère de contraste RGAA ?
Non, si le texte est purement décoratif et ne transmet aucune information utile. Mais « décoratif » a un sens strict : le texte ne doit pas être nécessaire à la compréhension de la page. Une accroche marketing, un slogan, une date — même sur une belle photo — transmettent de l’information et doivent être conformes. En cas de doute, appliquez le critère.
Quel seuil de contraste s'applique aux placeholders des champs de formulaire en RGAA ?
Oui. L’attribut placeholder génère du texte rendu dans le champ : il est soumis au critère 3.2. Or, les navigateurs appliquent par défaut une couleur très claire pour les placeholders (souvent aux alentours de #767676 ou plus clair encore). Définissez explicitement la couleur avec ::placeholder { color: #595959; } pour garantir la conformité.
Quelle différence entre les niveaux AA (4,5:1) et AAA (7:1) pour le contraste de texte RGAA ?
Le RGAA 4.1 exige le niveau AA, soit 4,5 :1 pour le texte normal et 3 :1 pour le grand texte. Le niveau AAA (7 :1 et 4,5 :1) n’est pas requis mais recommandé pour les interfaces à haute fréquentation ou les publics seniors. En pratique, viser 4,5 :1 minimum sur tous les textes, y compris les grands titres, couvre la majorité des situations sans effort supplémentaire.