J'adore les couleurs. Cela ne devrait surprendre personne parmi ceux qui me connaissent (je suis une passionnée de tricot et j'adore observer comment les différentes couleurs interagissent entre elles dans les motifs). Au-delà de leur simple aspect esthétique, les couleurs peuvent être utiles pour analyser des données, fournir des informations et créer une continuité visuelle. Mais l'utilisation de couleurs inappropriées peut donner une mauvaise impression. Essayer de lire un texte de couleur vive sur un fond clair, par exemple, fatigue non seulement les yeux, mais peut aussi rendre le texte carrément illisible, en particulier pour les personnes atteintes de daltonisme.
Comment s'assurer que la palette de couleurs choisie pour votre application offre une bonne expérience utilisateur, même aux personnes malvoyantes ou daltoniennes ? Dans cet article de blog, je vais aborder
- normes générales en matière de contraste des couleurs
- les spécificités des appareils mobiles lors des tests de contraste des couleurs et
- Comment vous assurer que votre application mobile respecte ces normes de contraste des couleurs.
Qu'est-ce qu'un contraste de couleurs acceptable ?
En termes simples, un contraste de couleurs acceptable signifie que tout texte visible dans votre application peut être lu clairement par n’importe quel utilisateur voyant, y compris les personnes malvoyantes ou daltoniennes. Lors de la conception d’une application, il est important de veiller à ce que les couleurs d’arrière-plan n’interfèrent pas avec le texte au premier plan. Alors, à partir de quel moment le contraste entre le texte et son arrière-plan est-il suffisamment bon pour être qualifié d’« acceptable » ? Et comment s’assurer que le texte est lisible par tout le monde, y compris les personnes malvoyantes ou daltoniennes ?
Les Directives pour l'accessibilité des contenus Web (WCAG) comportent une directive spécifique (WCAG 1.4.3) permettant de déterminer si un texte est lisible pour les utilisateurs voyants. Ce critère utilise un algorithme particulier pour convertir les combinaisons de couleurs en rapports comparables. En s'appuyant sur cette formule, les WCAG indiquent qu'un rapport de contraste des couleurs de 4,5:1 entre le texte et son arrière-plan est suffisant pour le texte courant (corps du texte), tandis que le texte en gros caractères (14 points et plus en gras, ou 18 points et plus en caractères normaux) doit présenter un rapport de contraste des couleurs d'au moins 3:1.
Considérations particulières concernant les appareils mobiles
Malheureusement, le mobile n'est pas aussi simple que cela. Avant d'aborder directement les méthodes de test sur mobile, il y a quelques points à garder à l'esprit lorsque l'on teste spécifiquement des applications mobiles. Il s'agit notamment de l'essor du « mode sombre » en tant que paramètre système, et de la manière de gérer les « gros caractères ».
Mode sombre
Au cours des dernières années, iOS et Android ont tous deux intégré une fonctionnalité de « mode sombre » à l'échelle du système. Si votre application prend en charge le mode sombre, vous devez la tester pour détecter d'éventuels problèmes de contraste des couleurs, tant en mode sombre qu'en mode clair. Si votre application propose d'autres thèmes ayant une incidence sur les couleurs d'arrière-plan et de texte, vous devez également tester le contraste des couleurs pour chacun de ces thèmes.
Texte en gros caractères
Il est difficile d'évaluer la taille d'un texte à l'œil nu, en particulier sur les appareils mobiles, qui peuvent présenter une grande variété de DPI et de tailles d'écran. C'est pourquoi, à moins d'être certain qu'une police donnée est de 18 points ou plus, ou de 14 points ou plus en gras (soit 24 px ou 19 px en gras pour le Web), il ne faut pas partir du principe que le texte peut être considéré comme « grand ».
Paramètres de contraste élevé
Il existe plusieurs paramètres de « contraste élevé ». Sous iOS, on trouve « Augmenter le contraste », et sous Android, « Texte à contraste élevé ». Ces deux options sont des paramètres applicables à l’ensemble du système d’exploitation, qui permettent à l’utilisateur d’augmenter le contraste des couleurs sur l’ensemble de son appareil. Même s’il est très utile de prendre en charge ces paramètres dans vos applications, vous ne pouvez pas vous en servir pour satisfaire aux critères WCAG. Lorsque vous testez le contraste des couleurs dans votre application, assurez-vous que tous les paramètres de contraste élevé sont désactivés (« OFF »).
Méthodes d'essai
Il existe plusieurs façons de tester le contraste des couleurs, et tout dépend des informations dont vous disposez. Heureusement, il existe de nombreux sites web et applications de bureau qui permettent de calculer le rapport de contraste des couleurs, ce qui vous évite d'avoir à le faire vous-même ! Ci-dessous, j'ai mis en avant quatre méthodes différentes pour tester le contraste des couleurs sur mobile.
Utilisation des palettes de couleurs
Si vous avez accès aux palettes de couleurs de votre application mobile, cela peut s’avérer très simple. Je recommande personnellement d’utiliser l’outil « Color Contrast Checker » disponible surDeque. Saisissez les couleurs en précisant celles qui correspondent à l’arrière-plan et celles qui correspondent au texte, et l’outil vous indiquera si vos palettes de couleurs sont conformes à la norme WCAG 1.4.3. Si ce n’est pas le cas, il pourra vous proposer d’autres couleurs qui répondront à ces critères. C’est la méthode recommandée pour vérifier le contraste des couleurs, car elle vous fournira les rapports de contraste les plus précis.
Tests sur simulateurs
Si vous n’avez pas accès à la palette de couleurs mais que vous pouvez utiliser l’application mobile sur un simulateur, vous devrez recourir à un site web ou à une application de bureau vous permettant d’utiliser un sélecteur de couleurs. J’ai utilisé à la fois l’outil « Color Contrast Analyzer » (site web) deDeque et l’application de bureau « Colour Contrast Analyzer », et les deux fonctionnent très bien. Pour chaque élément de texte à l’écran, utilisez l’outil de sélection de couleurs pour obtenir les couleurs du texte et de l’arrière-plan telles qu’elles s’affichent. Pour évaluer ces couleurs avec la plus grande précision possible, sélectionnez le pixel le plus clair du texte et le pixel le plus foncé de l’arrière-plan (ou inversement si le texte est foncé et l’arrière-plan clair). Notez que l’utilisation de l’outil de sélection de couleur n’est peut-être pas précise à 100 % ; cependant, il s’agit d’un moyen assez fiable d’estimer le contraste des couleurs.
Sur cette capture d'écran, les éléments de texte qui utilisent le bleu foncé respectent un rapport de contraste des couleurs de 8,77:1 ; cependant, sur la capture d'écran suivante, la couleur par défaut du bouton « Retour », présent dans la plupart des applications iOS, présente un rapport de contraste des couleurs de 3,75:1, ce qui ne répond pas aux critères de conformité des WCAG.
Si la couleur du texte peut changer en fonction des actions de l'utilisateur, vérifiez également le contraste des couleurs ! Dans cet exemple, lorsque le curseur est déplacé vers une valeur plus élevée, la couleur du texte passe du bleu foncé au rouge vif. Le nouveau contraste des couleurs de cet élément de texte est de 3,57:1. Je sais justement que, dans ce cas précis, la taille de la police est de 30 pt en gras ; le contraste des couleurs est donc respecté, car ce texte est considéré comme un texte de grande taille.
Tests sur les appareils
Les tests sur un appareil sont similaires à ceux effectués sur un simulateur, mais comportent une étape supplémentaire. Vous devrez d'abord réaliser une capture d'écran de chaque écran et l'envoyer sur votre ordinateur. Ensuite, vous pourrez suivre les mêmes étapes que pour les tests sur un simulateur. Veillez à réaliser des captures d'écran pour chaque thème différent, ainsi qu'une capture d'écran si la couleur du texte change !
axe DevTools Mobile
Si vous souhaitez gagner du temps lors de vos tests, mais que vous n'avez pas accès à la palette de couleurs, axe DevTools Mobile peut vous aider ! Il peut vérifier avec précision le contraste des couleurs de chaque élément de texte à l'écran, ce qui vous permet d'économiser du temps et de l'argent. Essayez axe pour Android (c'est gratuit) !
Conclusion
Il y a de nombreux éléments à prendre en compte lors du test du contraste des couleurs sur mobile, mais garantir un contraste adéquat peut être un moyen simple d'améliorer votre application pour de nombreux utilisateurs, notamment ceux souffrant d'une déficience visuelle ou de daltonisme. Si vous souhaitez en savoir plus sur l'accessibilité mobile, consultez nos autres articles de blog et essayez nos produits iOS et Android! Si vous avez des questions, n'hésitez pas à nous contacter: nos experts sont toujours prêts à vous aider.
