RGAA Lab

RGAA 4.1.2 · Présentation de l’information · Critère 10.5

Dans chaque page web, les déclarations CSS de couleurs de fond d’élément et de police sont-elles correctement utilisées ?

Qui impose ses propres couleurs — ou lit avec un mode sombre forcé par le système — se retrouve avec du texte noir sur fond noir dès qu'une déclaration n'a pas son pendant.

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. 10.5.1
    Dans chaque page web, chaque déclaration CSS de couleurs de police (color), d’un élément susceptible de contenir du texte, est-elle accompagnée d’une déclaration de couleur de fond (background, background-color), au moins, héritée d’un parent ?
  2. 10.5.2
    Dans chaque page web, chaque déclaration de couleur de fond (background, background-color), d’un élément susceptible de contenir du texte, est-elle accompagnée d’une déclaration de couleur de police (color) au moins, héritée d’un parent ?
  3. 10.5.3
    Dans chaque page web, chaque utilisation d’une image pour créer une couleur de fond d’un élément susceptible de contenir du texte, via CSS (background, background-image), est-elle accompagnée d’une déclaration de couleur de fond (background, background-color), au moins, héritée d’un parent ?

Comment le vérifier

  1. Recenser les éléments susceptibles de contenir du texte qui déclarent une couleur de police, et vérifier qu'une couleur de fond est déclarée sur eux ou héritée d'un parent.
  2. Faire l'inverse : chaque fond déclaré doit s'accompagner d'une couleur de police, sur l'élément ou héritée.
  3. Traiter les images de fond comme des fonds : elles doivent être doublées d'une couleur de fond.
  4. Se souvenir que le contrôle porte sur les déclarations CSS, pas sur le rendu : c'est la feuille de styles qu'on lit, pas la capture d'écran.

Ce que notre outil fait

Jugement humain

Aucune machine ne tranche ce critère. L’outil vous présente les éléments et enregistre votre constat.

Ce critère se juge dans les feuilles de style, et l'outil les lit — deux moteurs, chacun là où il sait répondre. Le style calculé dit ce qui est peint : il établit qu'aucun fond n'est déclaré nulle part dans la chaîne (10.5.1), et qu'une image de fond n'a pas de couleur dessous (10.5.3). Les feuilles disent ce qui est déclaré : elles seules distinguent une couleur d'auteur du noir que le navigateur pose à défaut, ce qui débloque le troisième test (10.5.2). Deux limites, dites plutôt que tues : une feuille servie par un autre domaine refuse ses règles à la page, et l'extension va alors la chercher elle-même — son service worker n'est pas soumis à la même origine, et le texte obtenu est analysé sans jamais être appliqué ; celles qui résistent encore, adresse morte ou réseau coupé, sont nommées à l'écran ; et seules les règles qui s'appliquent au moment du relevé sont lues — les autres états de média ne sont pas évalués, parce que le référentiel demande une déclaration accompagnée « au moins, héritée d'un parent », donc sur l'élément une fois la cascade faite et non sur chaque règle prise à part.

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.

  • Le cas courant : une classe utilitaire qui ne pose qu'une couleur de texte, appliquée sur un fond venu d'ailleurs.
  • Une image de fond seule, sans couleur de fond de secours, laisse le texte sur le fond du navigateur quand l'image ne charge pas.
  • Un contraste correct à l'écran ne dit rien de ce critère : le 3.2 mesure le rendu, le 10.5 vérifie les déclarations.

À lire avec