RGAA Lab

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

Le 3.2 protège les mots ; celui-ci protège tout le reste — la bordure qui montre où saisir, la flèche d'un menu déroulant, la courbe d'un graphique, la case cochée.

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.3.1
    Dans chaque page web, le rapport de contraste entre les couleurs d’un composant d’interface dans ses différents états et la couleur d’arrière-plan contiguë vérifie-t-il une de ces conditions (hors cas particuliers) ?
    • Le rapport de contraste est de 3:1, au moins ;
    • Un mécanisme permet un rapport de contraste de 3:1, au moins.
  2. 3.3.2
    Dans chaque page web, le rapport de contraste des différentes couleurs composant un élément graphique, lorsqu’elles sont nécessaires à sa compréhension, et la couleur d’arrière-plan contiguë, vérifie-t-il une de ces conditions (hors cas particuliers) ?
    • Le rapport de contraste est de 3:1, au moins ;
    • Un mécanisme permet un rapport de contraste de 3:1, au moins.
  3. 3.3.3
    Dans chaque page web, le rapport de contraste des différentes couleurs contiguës entre elles d’un élément graphique, lorsqu’elles sont nécessaires à sa compréhension, vérifie-t-il une de ces conditions (hors cas particuliers) ?
    • Le rapport de contraste est de 3:1, au moins ;
    • Un mécanisme permet un rapport de contraste de 3:1, au moins.
  4. 3.3.4
    Dans le mécanisme qui permet d’afficher un rapport de contraste conforme, les couleurs du composant ou des éléments graphiques porteurs d’informations qui le composent, sont-elles suffisamment contrastées ?

Comment le vérifier

  1. Recenser les composants d'interface et repérer, pour chacun, ce qui le rend identifiable : bordure, fond, icône, coche, curseur d'un interrupteur.
  2. Mesurer ces couleurs contre le fond contigu, seuil 3:1, et refaire la mesure dans chaque état — repos, survol, focus, sélectionné, en erreur.
  3. Recenser ensuite les éléments graphiques dont la compréhension dépend des couleurs : parts d'un camembert, séries d'une courbe, zones d'une carte, pictogrammes sans texte.
  4. Mesurer deux choses distinctes : chaque couleur contre le fond contigu, et les couleurs contiguës entre elles — deux parts voisines d'un camembert doivent se distinguer l'une de l'autre.
  5. Écarter ce qui n'est pas nécessaire à la compréhension : un aplat décoratif derrière un graphique dont les valeurs sont étiquetées ne relève pas du critère.

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.

Décider ce qui, dans un composant, est « nécessaire à sa compréhension » est un jugement, pas une mesure — et les couleurs à comparer sont souvent peintes en SVG ou en canevas, hors de portée du DOM. Aucun dispositif du produit ne mesure un couple de couleurs que vous désignez : ce relevé-là reste à votre charge. L'assistant a son propre écran pour ce critère, distinct de celui du 3.2, et y porte votre réponse et rien d'autre. Il vous soumet ce qu'il sait voir : les composants d'interface dont la limite manque de contraste, avec leur ratio mesuré. Ce qu'il ne voit pas — un pictogramme peint en SVG, un graphique en canevas, un état au survol — n'apparaît pas dans cette liste, et son absence ne vaut pas conformité.

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.

  • La règle de contraste renforcé du moteur (seuil 7:1) n'est pas ce critère : elle applique un niveau AAA au texte, quand le 3.3 porte sur ce qui n'est pas du texte, au seuil de 3:1. Les confondre produit des non-conformités sur des pages conformes.
  • Les champs de formulaire dont la seule bordure est un gris très clair sont le manquement le plus répandu, et le plus invisible en revue de maquette.
  • Un composant peut passer au repos et échouer au focus ou au survol : les états sont trois mesures, pas une.
  • Le contraste de l'indicateur de prise de focus se juge ici ; sa présence relève du 10.7.

À lire avec