Accessibilit\u00e9<\/h3>\n
Dans notre domaine, l’accessibilit\u00e9<\/strong> est la pratique consistant \u00e0 rendre les sites web ou les applications utilisables par le plus grand nombre de personnes possible<\/strong>. Nous pensons souvent qu’elle ne s’applique qu’aux personnes handicap\u00e9es, ce qui est par d\u00e9finition le cas, mais elle profite certainement \u00e0 d’autres groupes de personnes dans certains cas ou contextes sp\u00e9cifiques. On attend alors de ces interfaces qu’elles soient perceptibles, exploitables, compr\u00e9hensibles et robustes, les 4 principes de l’accessibilit\u00e9.<\/p>\n L\u00e0 o\u00f9 l’exp\u00e9rience de l’utilisateur<\/strong> tend \u00e0 satisfaire un groupe pr\u00e9cis de personnes, l’accessibilit\u00e9<\/strong> tend \u00e0 inclure le plus grand nombre possible de personnes dans une exp\u00e9rience positive, mais les deux ne s’excluent pas mutuellement, loin de l\u00e0.<\/p>\n Cet article est une r\u00e9ponse et un argumentaire \u00e0 l’article \u00e9ponyme en anglais. De mani\u00e8re g\u00e9n\u00e9rale, je vous invite \u00e0 prendre le contenu de ce site avec des pincettes car il s’agit principalement de l’avis d’un unique individu sans aucune recherche ni parfois aucun fondement. Vous verrez par la suite pourquoi.<\/p>\n J’aimerais cependant remercier Anthony (l’auteur de l’article cit\u00e9) d’avoir mis en \u00e9vidence certaines choses qui semblent \u00eatre des mythes dans la communaut\u00e9 des designers. J’ai personnellement d\u00e9couvert certains d’entre eux en lisant l’article. L’article guide les lecteurs \u00e0 travers plusieurs exemples visuels avec une solution qui est cens\u00e9e \u00eatre accessible et une autre qui est cens\u00e9e \u00eatre inaccessible, en faisant valoir que la solution inaccessible est pr\u00e9f\u00e9r\u00e9e par les personnes handicap\u00e9es. Cela vous am\u00e8ne \u00e0 une conclusion faussement risqu\u00e9e : la solution inaccessible pourrait-elle \u00eatre une meilleure (la meilleure ?) solution ?<\/p>\n Je veux travailler et vous guider sur une meilleure voie : analyser la question et trouver une meilleure solution pour chaque exemple pr\u00e9sent\u00e9 par Anthony. Ce guide vous aidera \u00e0 comprendre un peu mieux le principe de contraste, les solutions possible et surtout la validation d’une hypoth\u00e8se en la testant r\u00e9ellement aupr\u00e8s d’utilisateurs, puisqu’au final c’est bien cela qui nous int\u00e9resse.<\/p>\n En effet, elles ne le sont pas. Comme leur nom l’indique, les WCAG ne sont que des lignes directrices destin\u00e9es \u00e0 aider les concepteurs et les d\u00e9veloppeurs \u00e0 construire de meilleures interfaces. Lorsque vous commencez \u00e0 construire votre design avec des couleurs, les go\u00fbts des gens et les besoins des utilisateurs vont certainement perturber votre sens de la beaut\u00e9 et vos sentiments personnels sur ce qui est agr\u00e9able \u00e0 l’\u0153il ou non.<\/p>\n Peu importe, le design n’est pas une question de pr\u00e9f\u00e9rences ou de go\u00fbts. C’est une question de convivialit\u00e9 et d’ad\u00e9quation aux besoins de l’utilisateur. La plupart du temps, la couleur n’est pas essentielle en termes de convivialit\u00e9. Commencez par des nuances de gris, si vous arrivez \u00e0 faire une interface utilisable ainsi, la couleur ne devrait \u00eatre qu’une \u00ab\u00a0couche de peinture\u00a0\u00bb (je suis le premier \u00e0 d\u00e9tester cette expression \ud83d\ude0b) vous raccrochant \u00e0 l’identit\u00e9 de votre marque.<\/p>\n Certains amis et confr\u00e8res vont bien plus loin que moi : ils font leur design compl\u00e8tement en noir et blanc. (wink wink Inclusive-Components.design<\/a> par Heydon<\/a>)<\/p>\n Mais revenons \u00e0 nos moutons color\u00e9es. Prenons le m\u00eame exemple qu’Anthony.<\/p>\n J’ai utilis\u00e9 un fond blanc et un fond sombre sur cette illustration parce qu’Anthony a eu l’id\u00e9e de faire un sondage en utilisant l’image sombre, mais en argumentant ensuite sur le contraste des couleurs sur son billet de blog avec un fond blanc. Voici les donn\u00e9es sur les contrastes entre couleur de texte et couleur de fond (bleu). Les tests sont effectu\u00e9s avec une taille de police de 16px et une graisse de police \u00ab\u00a0medium\u00a0\u00bb, car ces deux styles de texte sont importants dans l’analyse :<\/p>\n D’apr\u00e8s la \u00ab\u00a0source<\/a>\u00a0\u00bb d’une enqu\u00eate, le texte blanc est pr\u00e9f\u00e9r\u00e9 par les personnes qui ont r\u00e9pondu<\/strong>.<\/p>\n Bien ! J’ai un probl\u00e8me avec \u00e7a<\/strong>. Consid\u00e9rant le simple fait que pr\u00e8s de 4% des personnes dans le monde sont daltoniennes (pour les d\u00e9pist\u00e9es, on monte \u00e0 beaucoup plus en incluant le syndrome d’Irlen), et que 29% des personnes ayant r\u00e9pondu au sondage pr\u00e9f\u00e8rent la version accessible… Je ne veux pas transposer ou comparer les chiffres, mais potentiellement les personnes ayant r\u00e9pondu sont daltoniennes, et m\u00eame si elles ne le sont pas, certaines d’entre elles pr\u00e9f\u00e8rent la version accessible… beaucoup d’entre elles.<\/p>\n Une autre chose est que vous ne pouvez pas trouver la bonne solution en demandant \u00ab\u00a0pr\u00e9f\u00e9rez-vous A ou B\u00a0\u00bb. Vous devez demander : \u00ab\u00a0Combien de personnes lisent facilement A ?\u00a0\u00bb puis, sur une autre question s\u00e9par\u00e9e, \u00ab\u00a0Combien de personnes lisent facilement B ? Et id\u00e9alement, au lieu d’une question binaire \u00ab\u00a0facilement lisible\u00a0\u00bb, vous devriez probablement utiliser une \u00e9chelle d’\u00e9valuation.<\/p>\n Dans le cas du sondage d’Anthony, je dirais que les deux solutions ne sont pas acceptables ici, mais pourquoi ?<\/p>\n Peut-\u00eatre parce que les WCAG utilisent les math\u00e9matiques pour calculer des choses qui ne sont \u00e0 la base que perception, et c’est un vrai probl\u00e8me. Cela a m\u00eame \u00e9t\u00e9 enregistr\u00e9 comme une\u00a0issue<\/em><\/span> sur le r\u00e9pertoire WCAG<\/a>.<\/p>\n Pour aller plus loin, Anthony a totalement oubli\u00e9 l’intensit\u00e9 <\/strong>lumineuse et les diff\u00e9rences de couleur<\/strong>, qui sont tr\u00e8s importantes dans l’analyse du \u00ab\u00a0contraste\u00a0\u00bb des couleurs. Il couvre un autre aspect de la perception des couleurs, \u00e9galement connu sous le nom de syndrome d’Irlen<\/a> : ce syndrome concerne la sensibilit\u00e9 aux contrastes \u00e9lev\u00e9s. Je dirais que le WCAG parle de \u00ab\u00a0contraste des couleurs\u00a0\u00bb, mais il ne s’agit pas vraiment de contraste mails plut\u00f4t de diff\u00e9rence de luminance entre 2 couleurs.<\/p>\n Bref. L’intensit\u00e9 lumineuse<\/strong> n’a rien \u00e0 voir avec le contraste, elle est li\u00e9e \u00e0 la perception de la lumi\u00e8re. C’est pourquoi analyser le contraste l\u00e0 o\u00f9 la luminosit\u00e9 agit est une sorte de non-sens.<\/p>\n Revenons \u00e0 notre jeu de couleurs.<\/p>\n Les deux ont un manque de diff\u00e9rences. C’est pourquoi le bleu fonc\u00e9 ne suffit toujours pas \u00e0 cr\u00e9er une r\u00e9elle diff\u00e9rence quand on interroge les gens. Ils seront plus enclins \u00e0 r\u00e9pondre en fonction de leurs pr\u00e9f\u00e9rences personnelles.<\/p>\n Donc oui, le WCAG utilise la mauvaise mesure, mais les solutions propos\u00e9es ne sont pas du tout correctes. Trouvons ensemble comment am\u00e9liorer un peu la lisibilit\u00e9 de nos boutons.<\/p>\n Si la combinaison pr\u00e9f\u00e9r\u00e9e semble \u00eatre le blanc sur bleu, vous pr\u00e9f\u00e8rerez certainement garder le blanc comme couleur de texte et changer pour un meilleur fond bleu afin d’am\u00e9liorer votre contraste et la diff\u00e9renciation des couleurs.<\/p>\n J’adore jouer avec Color.review,<\/a> un outil utile qui vous donne des indicateurs pour vous aider \u00e0 choisir le bon ensemble de couleurs accessibles, avec une projection du rendu. Les courbes vous aident \u00e9galement \u00e0 mieux comprendre la perception de la couleur.<\/p>\n En jouant un peu avec le bleu, je trouve enfin quelque chose qui respecte les exigences du niveau AA (niveau interm\u00e9diaire dans le r\u00e9f\u00e9rentiel d’accessibilit\u00e9), et de bien meilleures diff\u00e9rences de couleur et d’intensit\u00e9 lumineuse.<\/p>\n Avec ce nouveau fond bleu, nous obtenons de nouvelles donn\u00e9es qui sont tr\u00e8s proches des exigences attendues en mati\u00e8re de WCAG :<\/p>\n Et pour confirmer qu’il s’agit d’une v\u00e9ritable solution et non d’une question de go\u00fbt personnel, j’ai construit un questionnaire<\/a> sur les pr\u00e9f\u00e9rences des gens en mati\u00e8re de lisibilit\u00e9, et j’ai \u00e9galement demand\u00e9 aux r\u00e9pondants s’ils \u00e9taient daltoniens. Voir la section suivante pour plus de d\u00e9tails sur les chiffres.<\/p>\n Ce n’est pas une surprise : si vous demandez s\u00e9par\u00e9ment ce qui est le plus lisible, les gens seront plus enclins \u00e0 vous donner la r\u00e9ponse \u00ab\u00a0lisibilit\u00e9\u00a0\u00bb et pas seulement leur go\u00fbt en termes de couleur. Quoi qu’il en soit, voici quelques donn\u00e9es extraites.<\/p>\n Pour chaque proposition visuelle d’un bouton, j’ai pos\u00e9 la m\u00eame question : \u00ab\u00a0Pouvez-vous facilement lire le texte de ce bouton ?\u00a0\u00bb. Pour chacune d’entre elles, la m\u00eame r\u00e9ponse \u00e9tait disponible sous la forme d’une note entre 1 et 5, o\u00f9 1 est \u00ab\u00a0Pas facilement [lisible]\u00a0\u00bb, et 5 est \u00ab\u00a0Oui, je le lis facilement\u00a0\u00bb.<\/p>\n Sur les graphiques suivants, vous verrez des chiffres entre 1 et 5 sur l’axe horizontal, qui sont la notation de la proposition visuelle. Sur l’axe vertical, vous trouverez le nombre de r\u00e9ponses.<\/p>\n Les gens sont assez \u00e0 l’aise avec ce contraste, m\u00eame si beaucoup (31,2%) notent encore moins de 4\/5 ce visuel.<\/p>\n Les r\u00e9ponses sont \u00e9parses ici, avec une note de 3 pr\u00e9dominante. Cette solution n’est pas du tout bonne si nous voulons atteindre notre objectif. (53,5% en dessous de 4)<\/p>\n Cette solution ne fait pratiquement l’objet d’aucun d\u00e9bat. Je pense que nous avons fait notre travail de designer. (10,5% sous la note de 4)<\/p>\n Ce dernier essai voulait r\u00e9soudre le probl\u00e8me de contraste gr\u00e2ce \u00e0 une ombre port\u00e9e sous le texte tout en gardant l’ensemble de couleurs non-accessibles. Cela n’a pas eu l’effet attendu.<\/p>\n Arbitrairement, je prendrai pour \u00ab\u00a0assez lisible\u00a0\u00bb le pourcentage de personnes incluses dans la fourchette sup\u00e9rieure (4 et 5 points) pour pouvoir comparer nos solutions.<\/p>\n Le r\u00e9sultat est ici une question d’accessibilit\u00e9 : nous avons r\u00e9ussi \u00e0 proposer une solution qui rend le bouton lisible par 89,5% de la population si nous ne gardons que les notes 4 et 5, et 90% des personnes daltoniennes. (les scores auraient probablement \u00e9t\u00e9 assez proches avec davantage de votants)<\/p>\n M\u00eame si vous ne trouverez probablement jamais une solution qui fonctionne \u00e0 100 %, votre travail de concepteur consiste \u00e0 inclure autant de personnes que possible – et si vous n’\u00eates pas s\u00fbr, donnez-leur le contr\u00f4le de votre interface.<\/p>\n Lorsque les gens pensent \u00e0 l’accessibilit\u00e9 des couleurs, ils ont g\u00e9n\u00e9ralement l’id\u00e9e que leur design finira par \u00eatre laid. Je ne sais pas vraiment d’o\u00f9 vient cette id\u00e9e, mais je suis vraiment curieux de mieux comprendre pourquoi.<\/p>\n En tant que designer, vous savez d\u00e9j\u00e0 que le design consiste toujours \u00e0 travailler dans un certain cadre avec plein de types de contraintes<\/p>\n L’accessibilit\u00e9 ne devrait \u00eatre qu’une consid\u00e9ration de plus, et comme les autres, elle devrait \u00eatre consid\u00e9r\u00e9e comme source de cr\u00e9ativit\u00e9 et non comme un obstacle.<\/p>\n Daryl Koopersmith<\/a> et Wilson Miner<\/a> ont \u00e9crit un tr\u00e8s bon article sur le sujet \u00ab\u00a0Designing Accessible Color Systems<\/a>\u00ab\u00a0. C’est un bon exemple de la fa\u00e7on dont vous pouvez travailler sur votre syst\u00e8me de couleurs pour le rendre accessible et construire des composants efficaces avec.<\/p>\n PS. J’ai entendu des choses sur le fait que Stripe n’est pas accessible aux lecteurs d’\u00e9cran. C’est un autre sujet, un pas apr\u00e8s l’autre est mieux que rien.<\/p>\n Je vous ai dit plus t\u00f4t que les boutons test\u00e9s \u00e9taient sur fond blanc, mais je vous ai volontairement montr\u00e9 deux fonds diff\u00e9rents.<\/p>\n Le contexte peut changer la perception de la couleur et notamment son interpr\u00e9tation par vos yeux et votre cerveau. La perception des couleurs est une chose complexe r\u00e9f\u00e9renc\u00e9e sous l’abr\u00e9viation HVS<\/a> (Human Visual System model<\/em><\/span>).<\/p>\n Pour expliquer rapidement mon propos ici, quand vous avez une interface claire, un bouton bleu et un texte blanc, votre \u0153il n’a pas vraiment besoin de s’adapter. \u00c0 l’inverse, si vous travaillez avec un texte sombre sur le bouton, votre \u0153il devra s’adapter un peu plus et sera per\u00e7u comme plus difficile \u00e0 lire. C’est ce que l’on suppose. C’est un peu comme lorsque vous \u00eates dans une pi\u00e8ce lumineuse et que vous passer dans une pi\u00e8ce sombre, vos yeux mettent un certain temps \u00e0 s’adapter au peu de lumi\u00e8re pour commencer \u00e0 dessiner les contours des objets.<\/p>\n Comme je l’ai dit, la perception et le cerveau sont des choses complexes.<\/p>\n Malgr\u00e9 le fait que je n’ai jamais entendu parler de ce mythe auparavant, le minimum requis pour la plupart des sites web de l’administration europ\u00e9enne est AA.<\/p>\n [\u2026] dans les \u00c9tats membres de l’UE sont tenus par la loi de veiller \u00e0 ce que les informations qu’ils publient soient soumises \u00e0 des normes d’accessibilit\u00e9, en particulier les normes AA des Web Content Accessibility Guidelines<\/span> (WCAG<\/span>). Patrick H. Lauke<\/a>, se d\u00e9crivant lui-m\u00eame comme le raton laveur des WCAG, expert en mati\u00e8re de normes et d’accessibilit\u00e9 du Web, a tent\u00e9 de m’expliquer en termes tr\u00e8s simplifi\u00e9s, que je vous partage avec son accord :<\/span><\/p>\n Le point essentiel des \u00ab\u00a0A\u00a0\u00bb\/AA<\/strong>\/AAA<\/strong> est qu’ils constituent des niveaux de conformit\u00e9 distincts, et qu’ils couvrent des choses diff\u00e9rentes en fonction de la population concern\u00e9e et de l’importance d’une d\u00e9faillance d’un crit\u00e8re. Un crit\u00e8re \u00ab\u00a0A<\/strong>\u00a0\u00bb affecte beaucoup de gens et sera un probl\u00e8me tr\u00e8s pr\u00e9judiciable\/critique. Un crit\u00e8re AAA<\/strong> affectera un pourcentage relativement plus faible de la population, serait probablement moins un obstacle et plus un probl\u00e8me surmontable mais ennuyeux qui affectera de mani\u00e8re disproportionn\u00e9e cette population d’utilisateurs particuli\u00e8re. En outre, les AAA<\/strong> sont g\u00e9n\u00e9ralement des crit\u00e8res qui n\u00e9cessitent des changements plus fondamentaux (dans la conception\/la mise en page, etc.) pour les traiter. Le mythe n’a donc raison d’\u00eatre que dans la mesure o\u00f9 vous devez satisfaire aux exigences de l’AAA<\/strong> si vous voulez revendiquer la conformit\u00e9 \u00e0 l’AAA<\/strong> et \u00eatre accessible au plus large public. L’AA<\/strong> est g\u00e9n\u00e9ralement accept\u00e9 comme la base de r\u00e9f\u00e9rence. L’AAA<\/strong> va plus loin, pour aider les personnes souffrant de troubles visuels plus graves.<\/p><\/blockquote>\n L\u00e0 encore, le but avec le minimum est d’encourager les gens \u00e0 faire un effort pour les personnes dans le besoin d’une meilleure lisibilit\u00e9. Si le WCAG comporte 3 niveaux d’exigences, c’est pour vous encourager \u00e0 aller plus loin et \u00e0 apprendre les avantages d’\u00eatre accessible. Si vous couvrez toutes les exigences du niveau simple A<\/strong>, c’est d\u00e9j\u00e0 un bon travail. Prochaine \u00e9tape AA \ud83d\ude0a<\/strong><\/p>\n Si on vous dit que les exigences de l’AAA ne concernent que les personnes \u00e2g\u00e9es<\/a> (parce qu’elles sont \u00ab\u00a0pour la plupart\u00a0\u00bb les seules \u00e0 avoir une perte de vision de 20\/80) et les personnes qui n’utilisent pas de lecteur d’\u00e9cran, juste pour vous donner une excuse pour ne pas r\u00e9pondre \u00e0 ces exigences, alors vous ne faites pas les choses de mani\u00e8re inclusive.<\/p>\n En outre, ma source<\/a> semble indiquer que le nombre de personnes souffrant de troubles de la vision est de plusieurs millions aux \u00c9tats-Unis. En 2017, 3 894 406 personnes ont une d\u00e9ficience visuelle de moins de 20\/40, 1 483 703 personnes de moins de 20\/60 et 1 082 790 de 20\/200 ou moins. Et ces d\u00e9ficiences prennent en compte les personnes de plus de 45 ans.<\/p>\n Il y a deux bonnes raisons pour faire du niveau AA au minimum, ou de l’AAA si vous le pouvez :<\/p>\n Utilisez les \u00e9tudes mondiales pour vous donner une tendance, mais ne vous y arr\u00eatez pas : faites vos propres recherches<\/strong> pour votre population\/utilisateurs.<\/p>\n \u00c7a d\u00e9pend.<\/p>\n Lors de nos r\u00e9cents tests d’utilisateurs que j’ai effectu\u00e9s au Foyer, la premi\u00e8re compagnie d’assurance du Luxembourg, 100% de nos testeurs se sont retrouv\u00e9s avec le m\u00eame comportement : penser que les boutons gris \u00e9taient d\u00e9sactiv\u00e9s malgr\u00e9 le contraste effectif. Souvent, les boutons gris sont utilis\u00e9s pour des actions secondaires ou des actions d’annulation, des actions qui sont volontairement moins accrocheuses pour aider l’utilisateur \u00e0 se concentrer sur ce que nous attendons de lui.<\/p>\n Pour ce faire, vous pouvez utiliser un autre ensemble de combinaisons stylistiques, par exemple :<\/p>\n Vos limites de bouton (la bordure ou le fond par exemple) n’ont pas besoin de correspondre \u00e0 un bon rapport de contraste tant que le texte sur le fond de la page respecte ce contraste.<\/p>\n Si un bouton avec texte a \u00e9galement une bordure color\u00e9e, puisque la bordure ne fournit pas la seule indication, il n’y a pas d’exigence de contraste au-del\u00e0 du contraste du texte. Encore une fois, faites vos propres recherches et n’oubliez pas que vous ferez des erreurs, et c’est tr\u00e8s bien ainsi ! Tirez les le\u00e7ons de ces erreurs<\/strong>.<\/p>\n Ce n’est pas un mythe, ce sont les bases de l’accessibilit\u00e9, c’est m\u00eame une connaissance de base de l’utilisabilit\u00e9 et l’ergonomie. Cette section prend en compte Use of Colors<\/a> comme r\u00e9f\u00e9rence, mais aussi les handicaps logiques et cognitifs.<\/p>\n Vous ne pouvez pas prendre le th\u00e8me des couleurs s\u00e9par\u00e9ment d’autres th\u00e8mes de l’accessibilit\u00e9 ou de l’ergonomie. L’accessibilit\u00e9 de vos couleurs n’est qu’une petite partie du domaine et doit \u00eatre combin\u00e9e avec d’autres types de sujets comme les troubles cognitifs, de mobilit\u00e9 ou la d\u00e9ficience auditive.<\/p>\n Les exigences d’accessibilit\u00e9 stipule que :<\/p>\n \u201cLa couleur ne doit pas \u00eatre utilis\u00e9e comme le seul moyen visuel pour transmettre une information, indiquer une action ou distinguer un \u00e9l\u00e9ment.\u201d<\/p><\/blockquote>\n Toutefois, cette norme ne s’applique que dans les cas o\u00f9 les diff\u00e9rentes couleurs ont une signification sp\u00e9cifique pour informer l’utilisateur. En d’autres termes, si vous utilisez des diff\u00e9rences de couleur pour transmettre des informations, vous avez besoin d’un indice suppl\u00e9mentaire. C’est important pour les d\u00e9ficiences visuelles mais aussi pour les d\u00e9ficiences cognitives.<\/p>\n \u00ab\u00a0Mais si vous utilisez les couleurs claires et sombres pour transmettre des informations, vous n’avez pas besoin d’un indice suppl\u00e9mentaire tant que la diff\u00e9rence de contraste est suffisamment \u00e9lev\u00e9e\u00a0\u00bb, explique Anthony (l’auteur de l’article critiqu\u00e9). Qu’est-ce que cela signifie ? Donc oui, techniquement, Anthony a raison, \u00e0 la lecture stricte du WCAG. Mais de mani\u00e8re concr\u00e8te, ce n’est pas suffisant : il en r\u00e9sulte toujours une confusion potentielle pour les utilisateurs.<\/p>\n Pour reprendre l’exemple de cet \u00e9l\u00e9ment t’interface proposant une sorte de boutons radio activable, le probl\u00e8me est que si vous n’avez pas assez d’objets, vous ne savez pas quel est l’\u00e9tat initial des boutons – s’ils sont activ\u00e9s ou non. De m\u00eame, si par d\u00e9faut tous les \u00e9l\u00e9ments sont gris, vous ne savez pas ce qui est coch\u00e9 et ce qui ne l’est pas.<\/p>\n Avec un \u00e9l\u00e9ment suppl\u00e9mentaire, votre cerveau peut vous guider en d\u00e9finissant un pattern. Les \u00e9l\u00e9ments d’apparence similaire ont le m\u00eame \u00e9tat et vous pouvez commencer \u00e0 deviner l’\u00e9tat de chaque \u00e9l\u00e9ment. Mais arr\u00eatons de deviner et commen\u00e7ons \u00e0 utiliser des indices visuels auxquels les gens sont habitu\u00e9s, et qui sont en faits pour dire \u00ab\u00a0celui-ci est s\u00e9lectionn\u00e9\u00a0\u00bb. Une autre partie de l’accessibilit\u00e9 regroupe les handicaps cognitifs. Faire deviner aux gens ce que vous voulez dire finit parfois mal, c’est encore plus vrai avec les personnes souffrant de handicaps cognitifs.<\/p>\n Et voil\u00e0 ! Je veux dire, \u00e7a co\u00fbte quoi ? Mais m\u00eame l\u00e0, les ic\u00f4nes sont facilement interpr\u00e9tables, mais c’est un autre sujet.<\/p>\n Je sais que je vous ai donn\u00e9 beaucoup d’informations, parfois en contradiction avec ce que d’autres experts peuvent crier haut et fort. Voici quelques \u00e9l\u00e9ments \u00ab\u00a0\u00e0 emporter\u00a0\u00bb :<\/p>\n Je suis disponible : commentaires et Twitter<\/a> sont faits pour cela \ud83d\ude42 Lorsque vous devez travailler sur des interfaces, le contraste des couleurs est une r\u00e9alit\u00e9 dont vous devez tenir compte pour la rendre accessible. Vous avez le droit de craindre de perdre une partie de l’esth\u00e9tique de votre interface, notamment si vous \u00eates habitu\u00e9 \u00e0 un mauvais rapport de contraste.<\/p>\n","protected":false},"author":4,"featured_media":6977,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[875],"tags":[85,267,344,578],"coauthors":[597],"class_list":["post-7438","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-experience-utilisateur","tag-accessibilite","tag-couleur","tag-sondage","tag-ux"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=7438"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7438\/revisions"}],"predecessor-version":[{"id":7506,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7438\/revisions\/7506"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/6977"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=7438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=7438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=7438"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=7438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Les mythes sur l’accessibilit\u00e9 des couleurs<\/h2>\n
\nLe probl\u00e8me n’est peut-\u00eatre pas tant ce qu’Anthony dit que la fa\u00e7on dont il le dit – il vous fait penser que vous ne devriez pas faire confiance \u00e0 l’une des guidelines<\/em><\/span> d’accessibilit\u00e9 les plus connues (WCAG), parce que ce n’est pas ce dont les utilisateurs ont besoin.<\/p>\nMythe 1 : Les exigences des WCAG sont toujours optimales<\/h3>\n
Les couleurs test\u00e9es<\/h4>\n
\nLorsque vous devez concevoir des interfaces accessibles avec des couleurs, deux choses ne sont pas importantes :<\/p>\n\n
\nMais je sais que ce n’est pas toujours possible. Une autre id\u00e9e pourrait \u00eatre une feuille de style alternative, mais pour moi c’est la derni\u00e8re solution pour satisfaire \u00e0 la fois les utilisateurs et les gens de la marque.<\/li>\n<\/ul>\n![\"Two](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/10\/color-contrast-guess@2x.png\")
<\/p>\n
\nJuste pour que vous le sachiez : le contexte change la fa\u00e7on dont vous percevez et dont vous lisez les \u00e9l\u00e9ments color\u00e9es<\/strong>. Mais c’est un autre sujet<\/a> (j’y reviendrai plus tard<\/a> dans cet article). Pour le reste de l’article, je vais \u00e9tudier les boutons avec un fond clair. Je ne vais pas jouer avec toutes les couleurs de fond, je suis s\u00fbr que vous aurez compris l’id\u00e9e avec un exemple.<\/p>\n\n
\n<\/strong>Blanc : #FFF, Bleu : #57ACF9
\nFont-size : 16px – Font-Weight : medium.
\nRatio de contraste : 2.5:1 (minimum 4.5:1)<\/li>\n
\n<\/strong>Fonc\u00e9 : #2D2D2D, Bleu : #57ACF9
\nRatio de contraste : 5.6:1 – (attendu 4.5:1)<\/li>\n<\/ul>\n\n
\nDiff\u00e9rence d’intensit\u00e9 lumineuse : 107 (minimum 125)
\nDiff\u00e9rence de couleur : 277 (minimum 500)<\/li>\n
\nDiff\u00e9rence d’intensit\u00e9 lumineuse : 103 (minimum 125)
\nDiff\u00e9rence de couleur : 353 (minimum 500)<\/li>\n<\/ul>\nComment corriger le contraste des couleurs ?<\/h4>\n
![\"Color](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/10\/color-review-accessibility.png\")
<\/a><\/p>\n![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/color-contrast-ok@2x.png\")
\n
\n<\/strong>Blanc : #FFF, Bleu : #57ACF9<\/strong>
\nRatio de contraste : 2.5:1<\/strong> (minimum 4.5:1)
\nDiff\u00e9rence d’intensit\u00e9 lumineuse : 107<\/strong> (minimum 125)
\nDiff\u00e9rence de couleur : 277<\/strong> (minimum 500)<\/li>\n
\n<\/strong>Blanc : #FFF, Bleu : #0B77D8<\/strong>
\nRatio de contraste : 4.5:1<\/strong> (minimum 4.5:1)
\nDiff\u00e9rence d’intensit\u00e9 lumineuse : 158<\/strong> (minimum 125)
\nDiff\u00e9rence de couleur : 419<\/strong> (minimum 500)<\/li>\n<\/ul>\nMesures comparatives<\/h4>\n
Proposition 1 : Bouton avec texte blanc et fond bleu<\/h5>\n
![\"Results](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/result-1@2x.png\")
<\/p>\nProposition 2 : Bouton avec texte sombre et fond bleu clair<\/h5>\n
![\"Results](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/result-2@2x.png\")
<\/p>\nProposition 3 : Bouton avec texte blanc et fond bleu accessible<\/h5>\n
![\"Results](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/result-3@2x.png\")
<\/p>\nProposition 4 : Bouton avec texte ombr\u00e9 en blanc et fond clair en bleu<\/h5>\n
![\"Results](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/result-4@2x.png\")
<\/p>\n\n
\n
\nSatisfaction : 89.5%<\/li>\n
\nSatisfaction : 68.8%<\/li>\n
\nSatisfaction : 56,6%<\/li>\n
\nSatisfaction : 46,5%<\/li>\n<\/ol>\n<\/li>\n\n
\nSatisfaction : 90%<\/li>\n
\nSatisfaction : 80%<\/li>\n
\nSatisfaction : 50%<\/li>\n
\nSatisfaction : 50%<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n![\"Statistics](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/stats-color-blind-color-contrast@2x.png\")
<\/p>\nAller plus loin avec le contraste des couleurs<\/h3>\n
\n
A propos de contexte : Interface fonc\u00e9e ou claire<\/h3>\n
<\/p>\nMythe 2 : Le texte doit r\u00e9pondre \u00e0 l’exigence de l’AAA, ou il est inaccessible<\/h2>\n
\n\u2014Source<\/a><\/p><\/blockquote>\n![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/impairments-visual-blindness-US-stats.png\")
<\/p>\n\n
Mythe 3 : le texte en gris et les boutons sont inaccessibles et ont l’air d\u00e9sactiv\u00e9s.<\/h2>\n
\nMalheureusement, je ne peux pas vous fournir les enregistrements ou les statistiques ici, mais je peux certainement vous donner le m\u00eame conseil : l’affordance est li\u00e9e \u00e0 de nombreux param\u00e8tres contextuels.<\/p>\n![\"Propositions](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/10\/color-contrast-secondary-actions@2x.png\")
<\/p>\n
\n\u2014WCAG 1.4.3 – Contrast (Minimum)<\/a><\/p><\/blockquote>\nMythe 4 : L’utilisation d’une couleur ne suffit pas \u00e0 elle seule pour transmettre l’information<\/h2>\n
\nJ’ai essay\u00e9 de retravailler la formulation mais je n’y arrive pas : utiliser la diff\u00e9renciation des couleurs pour apporter des significations ne suffit pas, point final. Vous pouvez utiliser la luminance et les contrastes si vous voulez, c’est toujours jouer avec des choses qui n’ont pas de sens du tout.<\/p>\n![\"2](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/Toggle-tokens@2x.png\")
<\/p>\n![\"3](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/Toggle-tokens-multiple@2x.png\")
<\/p>\n![\"Toggle](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/11\/Toggle-tokens-checked@2x.png\")
<\/p>\n
\nLa couleur, c’est pour la d\u00e9coration, l’ambiance, le th\u00e8me. Elle doit soutenir votre message, et non pas \u00eatre le seul moyen de le transmettre. Les couleurs n’ont pas de r\u00e9elle signification malgr\u00e9 les nombreuses interpr\u00e9tations purement culturelles que vous pouvez facilement trouver sur le web. Bien s\u00fbr, vous utiliserez la couleur rouge pour les erreurs, mais la vraie signification est celle des mots que vous mettez sur vos messages, et l’indicateur visuel \u00e0 c\u00f4t\u00e9. (ic\u00f4nes, images, par exemple)<\/p>\nAstuces \u00e0 retenir<\/h2>\n
\n
\nA grand merci \u00e0 Patrick H. Lauke<\/a> pour son expertise et ses nombreux conseils.<\/p>\nSources et liens externes<\/h2>\n
\n