Le contraste des couleurs est un sujet d'actualité dans le domaine des tests d'accessibilité. Or, les bonnes pratiques en matière de contraste des couleurs spécifiques au Web mobile sont souvent négligées. Commençons par nous pencher sur les directives d'accessibilité des contenus Web, également connues sous le nom de WCAG, et sur le critère de succès relatif au contraste minimal. Nous aborderons également les éléments que les concepteurs Web doivent garder à l'esprit lors de la conception et passerons en revue les outils qu'ils peuvent utiliser pour analyser le contraste des couleurs de leurs créations.
Si vous le souhaitez, vous pouvez suivre mon tutoriel vidéo ici :
WCAG 2.0 et contraste des couleurs
Dans les WCAG 2.0, les Directives pour l'accessibilité des contenus Web du W3C, le critère de succès de niveau AA relatif au contraste des couleurs est le 1.4.3. Ce critère de succès stipule : « Contraste minimal : la présentation visuelle du texte et des images représentant du texte présente un rapport de contraste d'au moins 4,5 pour 1, sauf dans les cas suivants » :
- Texte en gros caractères : le texte en gros caractères et les images représentant ce texte doivent présenter un rapport de contraste d'au moins 3 pour 1 ;
- Remarque : si le texte ou les images contenant du texte font partie d'un composant d'interface utilisateur inactif qui est purement décoratif, qui n'est visible par personne, ou qui fait partie d'une image contenant d'autres éléments visuels importants, ils ne sont soumis à aucune exigence de contraste.
- Logotypes : le texte faisant partie d'un logo ou d'un nom de marque n'est soumis à aucune exigence minimale en matière de contraste.
Examinons la notion de « texte de grande taille », qui peut désigner une police en gras de 18 ou 14 points, ou une taille de police équivalente. Il est important de noter que l’échelle en points était autrefois utilisée pour l’impression. Aujourd’hui, nous travaillons sur le Web et les concepteurs doivent envisager les dimensions en termes de pixels, de pourcentages et d’EM. En résumé, les tailles de 18 points et 14 points ne correspondent pas à 18 pixels et 14 pixels. La taille en pixels est d’autant plus importante lors de la conception pour le mobile. L’environnement joue un rôle prépondérant : il peut par exemple y avoir différentes conditions d’éclairage. Vous pouvez vous rendre dans un restaurant où la lumière est tamisée ou à l’extérieur, sous le soleil et en pleine lumière.
Outils automatisés d'analyse du contraste des couleurs
Les outils automatisés constituent un moyen de déterminer le rapport de contraste des couleurs. Par exemple, l’outil aXe disponible sur Dequeanalyse très efficacement ce que l’on appelle le code hexadécimal. Tout outil automatisé qui vous convient bien devrait également très bien analyser le code hexadécimal. L’un des défis posés par les outils automatisés survient lorsqu’il y a une couleur d’arrière-plan et une couleur de premier plan, mais qu’une image se trouve entre les deux. Cette image peut être décorative ou constituer un dégradé. Les images contenant du texte posent également un problème aux outils automatisés. Dans ce cas, il convient d’utiliser un outil de sélection de couleur. Pour utiliser aXe, cliquez avec le bouton droit de la souris et sélectionnez « Inspecter l’élément » afin d’analyser la page. Le rapport indiquera alors si les éléments présentent ou non un contraste suffisant.
Créateurs : points à retenir
Il convient de noter que, s’il s’agit d’une police en gras de 18 ou 14 points, le rapport de contraste doit être strictement de 3 pour 1. Dans tous les autres cas, le rapport de contraste doit être d’au moins 4,5 pour 1. Il est également important de noter que les graphistes peuvent modifier l’opacité du texte. Dans ce cas, le code hexadécimal peut correspondre à une couleur, mais l’opacité peut avoir changé, ce qui donne l’impression que la couleur est plus claire. De plus, le texte et les images doivent être analysés à l’aide d’un outil pipette afin d’analyser le pixel du texte en tant que premier plan et celui de l’image en tant qu’arrière-plan. Une fois que vous avez cliqué sur le pixel que vous souhaitez analyser, le code hexadécimal est copié dans votre presse-papiers.
Types d'outils à utiliser
WebAIM est un site web qui vous permet de copier-coller des codes hexadécimaux pour analyser le rapport de contraste des couleurs. Tanaguru est un autre excellent outil de contraste. Cet outil vous permet de manipuler les deux couleurs que vous vérifiez et d’ajuster le rapport maximal. Il arrive souvent que les designers ne sachent pas comment corriger un contraste de couleurs insuffisant, et bien souvent, les couleurs qu’ils utilisent sont des couleurs propres à leur marque. Dans ce cas, les experts en la matière diront certes que le contraste n'est pas conforme, mais au final, les couleurs de marque constituent une exception. Cet outil leur permettra d'utiliser la couleur de leur choix et de la modifier pour se rapprocher le plus possible de 4,5.
Récapitulatif : la téléphonie mobile dépend de l'environnement
Il est également important de garder à l’esprit qu’avec les appareils mobiles et le fonctionnement de leurs écrans, la taille du texte relève d’un tout autre domaine. Soyez attentifs à ce genre de détails. Par exemple, les différentes fenêtres d’affichage et les différents appareils mobiles posent des problèmes liés à l’épaisseur des polices qui ont une incidence sur l’accessibilité. Le redimensionnement du texte est un autre facteur qui influe sur le contraste des couleurs et la lisibilité. Cette vidéo présente brièvement comment les concepteurs peuvent résoudre les problèmes de contraste des couleurs et quels outils ils peuvent utiliser. J’ai également abordé quelques points auxquels les concepteurs doivent prêter attention lorsqu’ils conçoivent des interfaces web pour mobiles. Vous trouverez ci-dessous quelques liens utiles qui vous aideront dans vos futurs tests et vos travaux de conception :
- Outil de conversion de taille de police
- Outil de recherche de contrastes Tanaguru
- Outil de vérification du contraste des couleurs de WebAIM
- hache
- Les bons et les mauvais exemples de contraste des couleurs présentés par CB
N'hésitez pas à laisser vos commentaires ci-dessous ou à poser des questions, je serais ravi de vous lire.
