Cet article a été rédigé conjointement par Chris McMeeking, Alistair Barrell et Jennifer Dailey.
La manière dont les applications utilisent les couleurs peut poser des problèmes aux utilisateurs en situation de handicap. Pour les utilisateurs non voyants, le recours aux couleurs pour signaler des informations, telles que le rôle des éléments, pose problème. Il est risqué de supposer que les utilisateurs ont accès aux informations relatives aux attributs via VoiceOver. Les utilisateurs atteints de daltonisme ou d’autres handicaps visuels peuvent avoir des difficultés à distinguer ces couleurs, mais leur acuité visuelle est suffisante pour ne pas dépendre de VoiceOver. Si les informations de rôle ne sont disponibles que sous forme de couleurs ou d’attributs VoiceOver, ces utilisateurs ne pourront pas connaître le rôle d’un élément. Cela peut entraîner de nombreux problèmes lors de l’utilisation des contrôles par défaut, car lorsque ceux-ci sont utilisés dans un contexte inapproprié, leur style par défaut n’est pas accessible.
Cet article abordera les thèmes suivants :
- Problèmes généraux pouvant survenir en matière de couleurs dans les applications.
- Critères WCag applicables
- Problèmes spécifiques liés à la barre de navigation supérieure sous iOS
Les questions abordées dans cet article relèvent des critères de succès suivants de la norme WCAG 2.0 :
- 1.4.1 – Utilisation de la couleur (A)
- 1.4.3 – Contraste des couleurs (AA)
- 1.4.6 – Contraste des couleurs amélioré (AAA)
Remarque : cet article porte principalement sur iOS, car il existe certains problèmes de couleur spécifiques à ce système d'exploitation, mais les principes exposés s'appliquent tout autant à Android.
Problèmes liés à la couleur
L'utilisation de la couleur peut soulever de nombreux problèmes. Vous trouverez ci-dessous quelques exemples, accompagnés d'une description des paramètres par défaut et des pratiques courantes.
La couleur comme source d'information (1.4.1)
En matière d’accessibilité, il est important de garder à l’esprit que votre application contient des informations qui ne se limitent pas à son contenu textuel. Il est assez courant d’utiliser la couleur comme principal indicateur pour distinguer différents types de contrôles. Par exemple, le style par défaut sous iOS consiste à afficher du texte bleu sur un bouton, avec un arrière-plan blanc sur blanc (c’est-à-dire transparent sur fond blanc). Il s’agit là d’un exemple d’utilisation de la couleur à des fins informatives.
L'exemple ci-dessous présente deux séries de boutons. Dans l'exemple de gauche, nous utilisons le texte en bleu pour indiquer à l'utilisateur que ces éléments sont des boutons. Notez que dans l'exemple de droite, nous avons ajouté un effet 3D discret à nos boutons. Désormais, la couleur n'est plus le seul indicateur visuel permettant de communiquer la fonction de ces éléments aux utilisateurs voyants. Lorsque le contexte ne suffit pas à lui seul à faire comprendre la fonction des éléments visibles, la couleur ne doit pas être le seul indicateur.
Contraste du texte (1.4.3, 1.4.6)
C'est assez simple. Lorsque vous intégrez du texte dans votre application, veillez à ce que celui-ci soit placé sur un arrière-plan permettant aux utilisateurs de distinguer facilement les deux. Par exemple, ceci(ceci) est difficile à lire. Pour respecter ce critère, vous devez respecter un rapport de contraste des couleurs de 4,5:1 pour tous les éléments (à l'exception du texte dont la taille est supérieure à 18 pt). Un rapport de contraste de 7:1 est requis pour satisfaire à l'exigence AAA correspondante.
Contraste de la barre supérieure sous iOS
Le « contraste de la barre supérieure » désigne le contraste chromatique entre la couleur des éléments affichés dans la barre supérieure des iPad (qui comprend notamment l’heure et l’état de la batterie) et la couleur ou l’image d’arrière-plan de l’application en cours d’utilisation. L’iPad ne disposant pas de barre de navigation, contrairement à l’iPhone, la couleur d’arrière-plan de la barre supérieure varie en fonction de celle de l’application. Si ce contraste n’est pas suffisant, les utilisateurs risquent de ne pas pouvoir utiliser efficacement la barre supérieure.
Le contraste des couleurs est important non seulement du point de vue de l’accessibilité, mais aussi de celui de l’ergonomie. Si la couleur d’arrière-plan ne contraste pas suffisamment avec celle du texte de la barre de navigation supérieure, les utilisateurs, qu’ils soient malvoyants ou non, risquent de ne pas pouvoir lire correctement les informations importantes relatives à l’appareil. Par exemple, si l'arrière-plan principal de votre application est noir, lorsque vous utilisez une tablette en mode « Split View », l'arrière-plan noir s'affiche derrière la barre de navigation supérieure. Comme les éléments de cette barre de navigation sont noirs, ils disparaissent complètement !
Définition de la couleur d'arrière-plan de la barre supérieure
Dans cet exemple, notre application est en soi entièrement accessible ; cependant, certains choix de conception au sein de celle-ci ont entraîné un dysfonctionnement des éléments iOS. Pour résoudre ce problème, il suffit d’ajouter une vue supplémentaire dans notre hiérarchie. N’appliquez pas de couleur d’arrière-plan à la vue racine de la mise en page. Laissez la vue racine blanche (ou transparente), puis ajoutez une vue par-dessus, en laissant un peu d’espace pour la barre de navigation supérieure. Si vous ajoutez des contraintes, celles-ci doivent se référer au « guide de mise en page supérieur ». Ajoutez ensuite la couleur d'arrière-plan principale de votre application à cette vue, puis déplacez-y le reste de vos vues, en la considérant comme la nouvelle vue racine de votre application.
Bonnes pratiques
Il n’existe pas de méthode simple pour garantir le contraste des couleurs dans vos applications. Seule une inspection manuelle minutieuse de tous les éléments textuels vous permettra de vous assurer que votre application est conforme. Nous vous recommandons de respecter un rapport de contraste des couleurs de 4,5:1 pour tous les éléments textuels. Il est également important de garder à l'esprit que vos arrière-plans doivent être vérifiés non seulement par rapport à votre contenu, mais aussi par rapport au contexte dans lequel ils s'inscrivent. Comme dans notre exemple de barre supérieure iOS, il est possible que vos couleurs d'arrière-plan aient une incidence au-delà du simple contenu de votre application.
Pour découvrir d'autres tutoriels sur l'accessibilité, consultez nos autres articles de blog et téléchargez notre application «Deque University » pour iOS, disponible sur l'App Store et sur GitHub !
En savoir plus…
- En savoir plus : articles sur les bonnes pratiques en matière d'accessibilité
- Inscrivez-vous à un webinaire sur l'accessibilité mobile
- Découvrez comment les produits «Deque » peuvent vous aider à garantir l'accessibilité totale de vos applications et sites web
