Lorsque nous parlons d'accessibilité, tout designer aime parler des couleurs. Mais, ironiquement, peu comprennent comment les rendre vraiment accessibles.
Dans cette vidéo, je vais énumérer quelques points importants pour travailler avec les couleurs de manière accessible, et je fournirai également des conseils pour éviter les erreurs courantes qui surviennent à mesure que l'équipe grandit et pour faire évoluer le produit.
〰️
➽ Matériel de support :
〰️
➽ Description de la vidéo :
L'arrière-plan ressemble à du papier. Tout au long du récit, il y a des textes et des images animés, qui apportent une aide visuelle au discours. De plus, il y a quelques phrases dans la vidéo, appelées « conseils de Mari ». Tous n'ont pas été mentionnés dans l'audio, car la vidéo serait trop longue. Cela dit, je vais lister tous les conseils :
- Pour éviter l'implémentation, n'oubliez pas de documenter toutes les combinaisons testées et approuvées.
- Avez-vous vu à quel point il est difficile de remarquer la différence en utilisant uniquement des couleurs ? Cela nuit à l'expérience des personnes atteintes d'achromatopsie et des personnes ayant des handicaps cognitifs… J'utilise Colorblindly pour faire ce test (lien dans la description). À ce moment-là, il y a quelques images comparant la visualisation normale et en niveaux de gris pour un composant d'onglet, utilisant uniquement des couleurs et une autre couleur + soulignement.
- Concevoir des produits numériques, ce n'est pas un défilé de mode pour sortir les choses les plus étranges ! L'interface doit être simple et facile à utiliser, comme vos vêtements de travail à domicile ! Si vous voulez exprimer votre créativité, cherchez un hobby à la place. En dehors de cela, il y a une photo d'un modèle extravagant et la phrase : « Personne n'utilise ça pendant les jours de travail » !
- Avant de créer des milliers de configurations internes, faites les bases et faites-les bien ! Assurez-vous que toutes les options que la personne a définies sur l'appareil ou le navigateur fonctionnent correctement. Plus de détails dans le matériel de support.
〰️
➽ Outils pour aider dans les tests d'accessibilité des couleurs :
〰️
➽ Recommandations liées aux couleurs :
WCAG, Comprendre le critère de succès 1.4.1 : Utilisation de la couleur :
WCAG, Comprendre le critère de succès 1.4.6 : Contraste (amélioré) :
GAIA, Recommandation 1 - Vocabulaire visuel et textuel :
Gaia, Recommandation 5 - Personnalisation :
〰️
➽ Devoirs :
Passez en revue les écrans de votre dernier projet et recherchez des erreurs liées à l'accessibilité des couleurs, et corrigez-en au moins une.
N'hésitez pas à reproduire cette vidéo lors d'une réunion de bureau pour lancer une discussion sur ce thème aujourd'hui.
〰️
Merci d'avoir regardé. J'espère que cette vidéo vous a été utile !