Le contraste, c’est la différence de luminosité entre deux couleurs, typiquement entre un texte et son fond. Quand cette différence est insuffisante, le texte devient difficile à lire pour de nombreux utilisateurs. Pas seulement pour les personnes malvoyantes, pour tout le monde dans des conditions défavorables : fort ensoleillement, mauvais écran, fatigue visuelle, presbytie.
Comprendre comment le contraste se mesure permet de prendre de meilleures décisions dès la phase de design avant que les problèmes se retrouvent en audit.
Pourquoi le contraste est une question de survie visuelle
Imaginer la scène : Marie travaille dans un cabinet de comptabilité. Ce midi, elle profite du soleil pour déjeuner dans le parc en face de son bureau. Entre deux bouchées, elle consulte le site de l’école de sa fille sur son téléphone pour vérifier les horaires de la cantine scolaire. Le soleil crée un reflet sur l’écran. Le texte en gris clair sur fond blanc devient pratiquement illisible, elle doit plisser les yeux, approcher l’écran, et finit par abandonner.
Ce n’est pas un cas extrême. C’est une situation ordinaire, quotidienne, que vivent des millions d’utilisateurs.
Les personnes directement affectées par un contraste insuffisant :
Les personnes malvoyantes : cataracte, DMLA, glaucome, rétinite pigmentaire. La vision réduite amplifie les problèmes de contraste. Un texte que 90% des utilisateurs lisent sans difficulté devient illisible pour quelqu’un avec une acuité visuelle réduite.
Les personnes daltonniennes : certaines formes de daltonisme réduisent la perception des différences de luminosité. Un rouge sur fond bordeaux, un vert sur fond kaki, etc., des combinaisons qui semblent contrastées à un œil ordinaire peuvent l’être beaucoup moins pour un daltonnien.
Les personnes âgées : la sensibilité au contraste décline naturellement avec l’âge. À 70 ans, l’œil a besoin de 3 fois plus de contraste qu’à 20 ans pour percevoir un même texte avec la même clarté.
Tout le monde dans de mauvaises conditions : soleil, reflet, écran de mauvaise qualité, luminosité basse, fatigue oculaire. Le contraste est une ressource que les conditions dégradent.
Ce que “ratio de contraste” signifie vraiment
Le ratio de contraste est un nombre entre 1:1 (aucune différence, texte et fond identiques) et 21:1 (différence maximale, noir pur sur blanc pur).
Il n’est pas calculé sur la couleur perçue, mais sur la luminance relative, une mesure de la quantité de lumière qu’une couleur émet ou réfléchit. Cette mesure tient compte du fait que l’œil humain perçoit les couleurs différemment selon leur fréquence : le vert est perçu comme plus lumineux que le bleu à intensité égale, le rouge est entre les deux.
Sans entrer dans la formule mathématique, voici quelques repères de luminance relative pour des couleurs courantes :
- Blanc : luminance relative de 1 (maximum)
- Noir : luminance relative de 0 (minimum)
- Gris moyen : luminance relative de ~0,2
- Jaune vif : luminance relative élevée (~0,9), proche du blanc
- Bleu marine : luminance relative faible (~0,02), proche du noir
Le ratio de contraste entre deux couleurs est : (luminance_la_plus_claire + 0,05) / (luminance_la_plus_sombre + 0,05).
Les seuils WCAG : AA vs AAA
WCAG définit deux niveaux de conformité pour le contraste du texte.
Niveau AA (requis par le RGAA)
| Type de texte | Ratio minimum |
|---|---|
| Texte normal (< 18pt / < 14pt gras) | 4.5:1 |
| Grand texte (≥ 18pt / ≥ 14pt gras) | 3:1 |
| Texte dans les composants d’interface | 3:1 |
| Texte décoratif ou logo | Aucune exigence |
Niveau AAA (recommandé, non requis)
| Type de texte | Ratio minimum |
|---|---|
| Texte normal | 7:1 |
| Grand texte | 4.5:1 |
Le niveau AA est ce que le RGAA exige. Le niveau AAA est une recommandation de meilleure pratique, utile pour des cibles d’audience avec des besoins visuels importants (sites de maisons de retraite, services sociaux, administrations pour seniors).
Repères concrets sur l’échelle 1:1 → 21:1
Pour donner une idée des niveaux :
- 1:1 : texte et fond identiques, lecture impossible
- 2:1 : texte à peine visible, presque toujours insuffisant
- 3:1 : seuil AA pour le grand texte et les composants
- 4.5:1 : seuil AA pour le texte normal, le plus courant à respecter
- 7:1 : seuil AAA texte normal, noir sur fond très clair
- 21:1 : noir pur sur blanc pur, contraste maximum
Un gris #767676 sur fond blanc atteint exactement 4.5:1, c’est la valeur limite. En dessous de #767676 (plus clair), le texte est en NC. Au-dessus (plus foncé), conforme.
Texte normal vs grand texte : la frontière et ses pièges
La frontière entre “texte normal” (seuil 4.5:1) et “grand texte” (seuil 3:1) est définie par la taille et la graisse de la police.
Grand texte = ≥ 18pt OU ≥ 14pt en gras
En pratique avec des unités CSS :
- 18pt = 24px, un
<h1>en 24px ou plus bénéficie du seuil 3:1 - 14pt en gras = ~18.67px, un
<strong>ou<b>en 19px ou plus bénéficie du seuil 3:1
Le piège des unités relatives
Quand les tailles de police sont définies en rem ou em, la taille réelle dépend de la taille de base du navigateur. Si l’utilisateur a augmenté sa taille de police par défaut, un texte défini en 1.5rem peut dépasser 24px dans son navigateur et bénéficier du seuil 3:1 même si l’outil de mesure l’évalue à 16px avec les paramètres par défaut.
En audit, mesurer avec les paramètres par défaut du navigateur (taille de base 16px), c’est la référence WCAG.
Le piège des polices fines
Une police définie en font-weight: 300 (light) à 20px est visuellement moins lisible qu’une police normale à 16px. WCAG ne tient pas compte de la graisse pour le grand texte — mais une police fine de grande taille peut nécessiter un contraste plus élevé que le minimum pour être réellement lisible.
En audit, signaler les polices fines de grande taille comme “à vérifier visuellement” même si le ratio 3:1 est atteint.
Les composants d’interface : critère 3.3
Le critère 3.3 du RGAA s’applique aux éléments graphiques qui portent une information, sans être du texte :
- Bordures de champs de formulaire
- Icônes porteuses d’information (icône d’erreur, de succès, d’avertissement)
- Indicateurs d’état (pastilles, badges)
- Indicateurs de progression (barres de progression)
- Éléments graphiques dans les graphiques et diagrammes
- Boutons iconographiques (sans texte)
Pour ces éléments, le seuil est 3:1, mesuré entre la couleur du composant et son arrière-plan.
Ce qui n’est PAS couvert par 3.3
- Le texte, couvert par 3.2
- Les éléments purement décoratifs (bordures décoratives, séparateurs)
- Les éléments inactifs (
disabled), WCAG les exclut explicitement - Les logos et marques, exclure de la conformité par convention WCAG
Ce que le RGAA exige exactement
Critère 3.2 : 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) ?
La formulation “hors cas particuliers” couvre :
- Le texte faisant partie d’un logo ou d’une marque
- Le texte purement décoratif (sans information)
- Le texte dans une image inactive (bouton désactivé)
- Le texte d’une image de contenu dont le contraste n’est pas significatif
Critère 3.3 : Dans chaque page web, les couleurs utilisées dans les composants d’interface ou les éléments graphiques porteurs d’informations sont-elles suffisamment contrastées (hors cas particuliers) ?
Les “cas particuliers” de 3.3 incluent les éléments inactifs et les éléments purement décoratifs.
La subtilité du fond “complexe”
Quand un texte est sur un fond dégradé ou sur une image, la mesure se complique. La règle WCAG est de mesurer le point de contraste minimum, l’endroit où la couleur de fond est la plus proche de la couleur du texte. Si ce point passe le seuil, le critère est respecté.
En pratique, un texte blanc sur un dégradé allant du noir au gris clair : vérifier le contraste au point le plus clair du dégradé sous le texte.
Récapitulatif — les seuils à retenir
| Situation | Seuil minimum | Critère RGAA |
|---|---|---|
| Texte courant (corps, liens, légendes…) | 4.5:1 | 3.2 |
| Grand texte (≥ 24px ou ≥ 19px gras) | 3:1 | 3.2 |
| Bordures de champs de formulaire | 3:1 | 3.3 |
| Icônes porteuses d’information | 3:1 | 3.3 |
| Indicateurs d’état, pastilles | 3:1 | 3.3 |
| Texte décoratif ou logo | Aucune exigence | — |
| Éléments inactifs (disabled) | Aucune exigence | — |
L’article suivant couvre un aspect différent mais complémentaire : quand une information est transmise uniquement par la couleur, et pourquoi c’est insuffisant, indépendamment du contraste.