1. Couleurs
1.1 Dans chaque écran, l'information ne doit pas être transmise uniquement par la couleur.
Tests et références du critère 1.1
Tests et références du critère 1.1
1.1.1 Pour chaque élément de l'interface dont la mise en couleur est porteuse d'information, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
Méthodologie du test 1.1.1
iOS et Android
- Repérer dans l'écran les mots ou ensemble de mots, les textes, les éléments graphiques porteurs d'information et les médias temporels dont la mise en couleur est porteuse d'information.
- Vérifier qu'il existe un autre moyen visuel de récupérer cette information : présence d'une icône ou d'un effet graphique de forme ou de position, un effet typographique, etc.
- Avec le lecteur d'écran, accéder à l'information donnée par la couleur.
- Vérifier qu'une information équivalente est restituée par le lecteur d'écran (par exemple, l'état « sélectionné » d'un bouton vert).
- Si c'est le cas, le critère est validé.
1.1.2 Pour chaque indication de couleur donnée par un texte (écrit ou vocalisé), l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
Méthodologie du test 1.1.2
Références
WCAG 2.1
Critère(s) de succès :
RGAA 4.1.2
Critère(s) de référence :
1.2 Dans chaque écran, le contraste entre la couleur du texte et la couleur de son arrière-plan est suffisamment élevé (hors cas particuliers).
Tests et références du critère 1.2
Test et références du critère 1.2
1.2.1 Pour chaque texte, le contraste entre la couleur du texte et la couleur de son arrière-plan respecte-t-il une de ces conditions ?
- Le rapport de contraste entre le texte et son arrière-plan est d'au moins 4.5:1 pour le texte en taille normale et d'au moins 3:1 pour le texte de grande taille;
- Un mécanisme de remplacement permet à l'utilisateur d'afficher le texte en taille normale avec un rapport de contraste de 4.5:1 au moins et le texte de grande taille avec un rapport de contraste de 3:1 au moins.
Méthodologie du test 1.2.1
iOS
- S'il existe dans l'application, activer le mécanisme de remplacement permettant d'afficher l'application avec un rapport de contraste suffisant.
- Repérer dans l'écran les textes, les textes contenus dans des éléments graphiques et les textes incrustés dans les vidéos qui pourraient poser des problèmes de contraste.
- Activer le logiciel Colour Contrast Analyser sur l'ordinateur et capturer les couleurs d'avant-plan et d'arrière-plan sur le terminal mobile soit :
- En diffusant l'écran du terminal mobile sur l'ordinateur ;
- En réalisant des captures d'écran des éléments à évaluer (et en les important sur l'ordinateur).
- Vérifier :
- Pour les textes en taille normale, que la valeur de contraste est de 4.5:1, au moins ;
- Pour les textes de grande taille, que la valeur de contraste est de 3:1 au moins.
- Si c'est le cas, le critère est validé.
Note
Il est possible d'utiliser l'application Xcode Accessibility Inspector 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
- S'il existe dans l'application, activer le mécanisme de remplacement permettant d'afficher l'application avec un rapport de contraste suffisant.
- Repérer dans l'écran les textes, les textes contenus dans des éléments graphiques et les textes incrustés dans les vidéos qui pourraient poser des problèmes de contraste.
- Activer le logiciel Colour Contrast Analyser sur l'ordinateur et capturer les couleurs d'avant-plan et d'arrière-plan sur le terminal mobile soit :
- En diffusant l'écran du terminal mobile sur l'ordinateur ;
- En réalisant des captures d'écran des éléments à évaluer (et en les important sur l'ordinateur).
- Vérifier :
- Pour les textes en taille normale, que la valeur de contraste est de 4.5:1, au moins ;
- Pour les textes de grande taille, que la valeur de contraste est de 3:1 au moins.
- 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.
Cas particuliers
Dans ces situations, le critère est non applicable pour ces éléments.
- Le texte fait partie d'un logo ou d'un nom de marque d'un organisme ou d'une société ;
- Le texte ou l'image de texte est purement décoratif ;
- Le texte fait partie d'une image véhiculant une information, mais le texte lui-même n'apporte aucune information essentielle ;
- Le texte ou l'image de texte fait partie d'un élément d'interface sur lequel aucune action n'est possible (par exemple, un bouton ayant un état désactivé).
Références
WCAG 2.1
Critère(s) de succès :
RGAA 4.1.2
Critère(s) de référence :
1.3 Dans chaque écran, les couleurs utilisées dans les composants d'interface ou les éléments graphiques porteurs d'informations sont suffisamment contrastées (hors cas particuliers).
Tests et références du critère 1.3
Tests et références du critère 1.3
1.3.1 Dans chaque écran, le rapport de contraste entre les couleurs d'un composant d'interface dans ses différents états et les couleurs adjacentes vérifie-t-il une de ces conditions (hors cas particuliers) ?
- Le rapport de contraste est de 3:1, au moins ;
- Un mécanisme de remplacement permet d'afficher le composant d'interface avec un rapport de contraste de 3:1, au moins.
Méthodologie du test 1.3.1
iOS et Android
- S'il existe dans l'application, activer le mécanisme de remplacement de l'application permettant d'afficher les éléments graphiques avec un rapport de contraste suffisant.
- 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.
- 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.
- Activer le logiciel Colour Contrast Analyser sur l'ordinateur et capturer les couleurs d'avant-plan et d'arrière-plan sur le terminal mobile soit :
- En diffusant l'écran du terminal mobile sur l'ordinateur ;
- En réalisant des captures d'écran des éléments à évaluer (et en les important sur l'ordinateur).
- Vérifier que le rapport de contraste entre les couleurs identifiées est de 3:1 au moins.
- Si c'est le cas, le critère est validé.
1.3.2 Dans chaque écran, le rapport de contraste de chaque couleur nécessaire à la compréhension d'un élément graphique et les couleurs adjacentes, vérifie-t-il une de ces conditions (hors cas particuliers) ?
- Le rapport de contraste est de 3:1, au moins ;
- Un mécanisme de remplacement permet un rapport de contraste de 3:1, au moins.
Méthodologie du test 1.3.1
iOS et Android
- S'il existe dans l'application, activer le mécanisme de remplacement de l'application permettant d'afficher les éléments graphiques avec un rapport de contraste suffisant.
- 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.
- 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.
- Activer le logiciel Colour Contrast Analyser sur l'ordinateur et capturer les couleurs d'avant-plan et d'arrière-plan sur le terminal mobile soit :
- En diffusant l'écran du terminal mobile sur l'ordinateur ;
- En réalisant des captures d'écran des éléments à évaluer (et en les important sur l'ordinateur).
- Vérifier que le rapport de contraste entre les couleurs identifiées est de 3:1 au moins.
- Si c'est le cas, le critère est validé.
Cas particuliers
Les cas suivants sont non applicables pour ce critère :
- Composant d'interface inactif (par exemple, un bouton ayant un état désactivé) sur lequel aucune action n'est possible.
- Composant d'interface pour lequel la couleur n'est pas nécessaire pour identifier le composant ou son état (exemple un groupe de liens faisant office de navigation dont la position dans la page, la taille et la couleur du texte permettent de comprendre qu'il s'agit de liens même si la couleur du soulignement des liens avec le fond blanc n'a pas un ratio de 3:1 et que le texte lui a un ratio de 4.5:1).
- élément graphique ou parties d'élément graphique non porteur d'information ou ayant une alternative (description longue, informations identiques visibles dans la page).
- élément graphique ou parties d'élément graphique faisant partie d'un logo ou du nom de marque d'un organisme ou d'une société.
- élément graphique ou parties d'élément graphique dont la présentation est essentielle à l'information véhiculée (exemple drapeaux, logotypes, photos de personnes ou de scènes, captures d'écran, diagrammes médicaux, carte de chaleurs).
- élément graphique ou parties d'élément graphique dynamiques dont le contraste au survol / focus est suffisant
Références
WCAG 2.1
Critère(s) de succès :
RGAA 4.1.2
Critère(s) de référence :
1.1 Dans chaque écran, l'information ne doit pas être transmise uniquement par la couleur.
1.2 Dans chaque écran, le contraste entre la couleur du texte et la couleur de son arrière-plan est suffisamment élevé (hors cas particuliers).
1.3 Dans chaque écran, les couleurs utilisées dans les composants d'interface ou les éléments graphiques porteurs d'informations sont suffisamment contrastées (hors cas particuliers).