RGAA Lab

RGAA 4.1.2 · Couleurs · 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) ?

Un texte gris clair sur fond blanc reste lisible à vingt ans dans un bureau ; il disparaît à soixante ans, en plein soleil, ou sur un écran mal réglé.

Ce que dit le référentiel

Transcription du RGAA 4.1.2, sans interprétation. C’est ce texte qui fait foi, et celui que vous citez dans un rapport.

  1. 3.2.1
    Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions (hors cas particuliers) ?
    • Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins ;
    • Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.
  2. 3.2.2
    Dans chaque page web, le texte et le texte en image en gras d’une taille restituée inférieure à 18,5px vérifient-ils une de ces conditions (hors cas particuliers) ?
    • Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins ;
    • Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.
  3. 3.2.3
    Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée supérieure ou égale à 24px vérifient-ils une de ces conditions (hors cas particuliers) ?
    • Le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins ;
    • Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins.
  4. 3.2.4
    Dans chaque page web, le texte et le texte en image en gras d’une taille restituée supérieure ou égale à 18,5px vérifient-ils une de ces conditions (hors cas particuliers) ?
    • Le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins ;
    • Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins.
  5. 3.2.5
    Dans le mécanisme qui permet d’afficher un rapport de contraste conforme, le rapport de contraste entre le texte et la couleur d’arrière-plan est-il suffisamment élevé ?

Comment le vérifier

  1. Relever, pour chaque zone de texte, la couleur du texte, la couleur réellement peinte derrière, la taille restituée et la graisse.
  2. Appliquer le seuil correspondant : 4,5:1 pour le texte courant, 3:1 seulement à partir de 24px sans graisse ou 18,5px en gras. Ces bornes sont en pixels restitués, pas en points ni en rem.
  3. Balayer les états : survol, focus, visité, désactivé, ainsi que les textes posés sur une image ou un dégradé — c'est là que les mesures s'effondrent.
  4. Écarter les cas particuliers prévus par le référentiel — texte purement décoratif, logos, texte d'une image de marque — plutôt que de les corriger à tort.
  5. Si la page offre un mécanisme d'affichage à fort contraste, vérifier qu'il est atteignable depuis la page et que le résultat qu'il produit passe, lui, les seuils.

Ce que notre outil fait

Détecté automatiquement

Notre moteur tranche seul sur ce critère : un échec est une non-conformité, avec la preuve qui va avec.

Le moteur mesure chaque nœud de texte visible et compare au seuil qui lui revient, sans arrondi de complaisance. Il s'abstient quand le fond dépend de l'endroit — une photo, un dégradé qui change de couleur : les pixels réels ne sont pas lisibles depuis le DOM, et ce cas vous revient à l'œil. Un aplat, lui, se mesure : linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)) est la façon standard de teinter une photo, et c'est la même couleur partout — l'outil la compose avec ce qu'elle recouvre au lieu de renoncer. Quand il renonce, il nomme ce qui l'en empêche, fichier à l'appui. Il ne sait rien non plus d'un mécanisme de contraste renforcé proposé par la page. Une réserve sur la borne du gras : la règle bascule au seuil de 3:1 à partir de 18,66px, la valeur de WCAG, quand le référentiel bascule dès 18,5px. Entre les deux — font-size: 1.16rem; font-weight: 700 par exemple — le moteur exige 4,5:1 et peut déclarer un échec sur un texte que le critère accepte. Cas rare, mais à reprendre à la main plutôt qu'à recopier dans le rapport.

Règles ACT du W3C mises en œuvre : afw4f7

Comment nous mesurons ce que l'outil sait faire · ce critère s'audite dans l'extension RGAA Lab.

Les pièges

Les erreurs qu’on rencontre vraiment, relevées au fil des audits.

  • Un texte sur image de fond n'est pas « conforme parce que l'outil n'a rien dit » : c'est une abstention, pas un constat. Il faut le mesurer sur une capture.
  • Une couleur semi-transparente ne vaut pas la couleur déclarée : c'est la composition avec ce qu'il y a dessous qui compte.
  • Le seuil de 3:1 attire les erreurs de conversion : 1.5rem ne fait 24px que si la racine est à 16px, et un font-weight: 600 n'est pas du gras au sens du test.
  • Le texte désactivé d'un champ ou d'un bouton relève des cas particuliers, mais uniquement s'il est réellement inactif — un aria-disabled sur un contrôle encore utilisable ne l'exempte pas.

À lire avec