Aller au contenu principal
RAAMAA

2.3 Dans chaque écran, les couleurs utilisées dans les composants d’interface et les éléments graphiques porteurs d’informations sont-elles suffisamment contrastées (hors cas particuliers) ?

References WCAG
  • 1.4.11 Contraste du contenu non textuel (AA)

Méthodologie officielle pour tester le critère 2.3

Test 1 (2.3)

iOS
  1. Activer l’option Augmenter le contraste (Réglages > Accessibilité > Affichage et taille du texte > Augmenter le contraste) ou s’il est présent dans l’application, activer le mécanisme de remplacement permettant d’afficher les éléments graphiques avec un rapport de contraste suffisant.
  2. Repérer dans l’écran les éléments graphiques porteurs d’information et pour chacun :
    • Identifier quelle(s) couleur(s) du composant sont nécessaires à l’identification de la localisation et/ou de l’information véhiculée (cela peut être la bordure, la couleur d’une icône, la couleur de fond) ;
    • Identifier les couleurs adjacentes qui ont un impact sur la visibilité de la ou les couleurs du composant.
  3. Repérer dans l’écran les composants interactifs qui peuvent avoir plusieurs états (survolés, focus, activé, coché) et pour chacun :
    • Identifier quelle(s) couleur(s) du composant sont nécessaires à l’identification de la localisation et/ou de l’information véhiculée et de l’état (cela peut être la bordure, la couleur d’une icône, la couleur de fond) pour chacun des états ;
    • Identifier les couleurs adjacentes qui ont un impact sur la visibilité de la ou les couleurs du composant.
  4. Activer le logiciel Colour Contrast Analyser{lang=en} sur l’ordinateur et capturer les couleurs d’avant-plan et d’arrière-plan sur le terminal mobile soit :
  5. Vérifier que le rapport de contraste entre les couleurs identifiées est de 3:1 au moins.
  6. Si c’est le cas, le critère est validé. Note : Il est possible d’utiliser l’application Accessibility Inspector{lang=en} disponible sur macOS pour réaliser une évaluation rapide des contrastes des écrans. Le logiciel dispose d’une fonctionnalité « Audit » qui permet de faire des tests automatiques de certains éléments textes et graphiques des écrans. Cette fonctionnalité ne détecte pas l’ensemble des défauts de contraste, des tests complémentaires suivant la méthodologie décrite ci-avant seront nécessaires.
Android
  1. S’il existe dans l’application, activer le mécanisme de remplacement permettant d’afficher les éléments graphiques avec un rapport de contraste suffisant.
  2. Repérer dans l’écran les éléments graphiques porteurs d’information et pour chacun :
    • Identifier quelle(s) couleur(s) du composant sont nécessaires à l’identification de la localisation et/ou de l’information véhiculée (cela peut être la bordure, la couleur d’une icône, la couleur de fond) ;
    • Identifier les couleurs adjacentes qui ont un impact sur la visibilité de la ou les couleurs du composant.
  3. Repérer dans l’écran les composants interactifs qui peuvent avoir plusieurs états (survolés, focus, activé, coché) et pour chacun :
    • Identifier quelle(s) couleur(s) du composant sont nécessaires à l’identification de la localisation et/ou de l’information véhiculée et de l’état (cela peut être la bordure, la couleur d’une icône, la couleur de fond) pour chacun des états ;
    • Identifier les couleurs adjacentes qui ont un impact sur la visibilité de la ou les couleurs du composant.
  4. Activer le logiciel Colour Contrast Analyser{lang=en} sur l’ordinateur et capturer les couleurs d’avant-plan et d’arrière-plan sur le terminal mobile soit :
  5. Vérifier que le rapport de contraste entre les couleurs identifiées est de 3:1 au moins.
  6. Si c’est le cas, le critère est validé. Note : Il est possible d’utiliser l’application Accessibility Scanner pour réaliser une évaluation rapide des contrastes des écrans. L’application ne détecte pas l’ensemble des défauts de contrastes, des tests complémentaires suivant la méthodologie décrite ci-avant seront nécessaires.