Accessibilit\u00e9 :<\/strong> Dans notre domaine, l\u2019accessibilit\u00e9 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\u2019elle ne s\u2019applique qu\u2019aux personnes handicap\u00e9es, ce qui est par d\u00e9finition le cas, mais elle profite certainement \u00e0 d\u2019autres groupes de personnes dans certains cas ou contextes sp\u00e9cifiques. On attend alors de ces interfaces qu\u2019elles soient perceptibles, exploitables, compr\u00e9hensibles et robustes, les 4 principes de l\u2019accessibilit\u00e9.<\/p>\n L\u00e0 o\u00f9 l\u2019exp\u00e9rience de l\u2019utilisateur<\/strong> tend \u00e0 satisfaire un groupe pr\u00e9cis de personnes, l\u2019accessibilit\u00e9<\/strong> tend \u00e0 inclure le plus grand nombre possible de personnes dans une exp\u00e9rience positive, mais les deux ne s\u2019excluent pas mutuellement, loin de l\u00e0.<\/p>\n Pour les personnes qui n’ont pas suivi les tendances 2021, voici les couleurs que Pantone a d\u00e9cid\u00e9 de mettre en avant pour cette ann\u00e9e.<\/p>\n Ces 2 couleurs pour leurs d\u00e9finitions techniques et leur nommage sont plus simplement du gris (Ultimate Gray) et jaune (Illuminating), avec comme param\u00e8tres les \u00e9quivalences suivantes :<\/p>\n On parle d’\u00e9quivalence car le rendu sur \u00e9cran et le rendu Pantone d’origine n’ont ni le m\u00eame mode de cr\u00e9ation, ni la m\u00eame synth\u00e8se. (Additive<\/a> pour l’\u00e9cran, Soustractive<\/a> pour l’imprim\u00e9).<\/p>\n Maintenant que les pr\u00e9sentations sont faites, je souhaiterais vous pr\u00e9senter comment composer une palette de couleurs accessible, ici \u00e0 partir de ces Pantone, avec deux objectifs principaux : vous proposer des outils et un proc\u00e9d\u00e9, et vous montrer que les designers ne sont pas des peintres m\u00eame lorsqu’ils jouent avec des couleurs.<\/p>\n Un des nombreux moyens, mais certainement le plus efficace aujourd’hui, pour d\u00e9terminer si des couleurs sont perceptibles et si le contenu est lisible, est la mesure du contraste entre 2 couleurs : celle de fond (background), et celle de texte (foreground).<\/p>\n Les paragraphes et images suivants font r\u00e9f\u00e9rence au r\u00e9f\u00e9rentiel WCAG 2.1<\/a> un r\u00e9f\u00e9rentiel d\u00e9di\u00e9 \u00e0 l’accessibilit\u00e9 du num\u00e9rique. Les notes A, AA, et AAA sont trois niveaux de notation de ce r\u00e9f\u00e9rentiel. Pantone nous offre un jeu de deux couleurs, j’ai donc d\u00e9cid\u00e9 de commencer par les combiner avec les classiques noir et blanc pour v\u00e9rifier techniquement leur compatibilit\u00e9 pour un contraste optimal.<\/p>\n Les indications sur cette image sont \u00e0 lire comme suit :<\/p>\n On essaye g\u00e9n\u00e9ralement d’obtenir un AA pour la taille vis\u00e9e, sur le r\u00e9f\u00e9rentiel WCAG 2.1<\/a> pour rappel.<\/p>\n On voit que le noir remporte un franc succ\u00e8s puisqu’il permet un niveau AAA sur toutes les tailles de texte avec un contraste de 15.5 pour 1 sur le jaune, et AA (S) pour un contraste 6.9 pour 1 sur le gris.<\/p>\n Par curiosit\u00e9, j’ai tent\u00e9 de combiner ces deux couleurs pour savoir si elles pouvaient \u00eatre mari\u00e9es dans une composition num\u00e9rique.<\/p>\n Jaune sur gris ou gris sur jaune donne bien s\u00fbr le m\u00eame score, c’est \u00e0 dire un contraste insuffisant pour \u00eatre utilis\u00e9 en l’\u00e9tat sur vos composition. Nous ne pourrons donc pas utiliser ces couleurs en combinaison s’il y a du texte en jeu.<\/p>\n Nous n’allons bien s\u00fbr pas en rester \u00e0 ces couleurs, et voir comment nous pouvons composer une palette utilisable pour le web.<\/p>\n Lorsque nous autres, designers, cr\u00e9ons des palettes de couleurs, nous introduisons des couleurs de contraste, d’accent, ou des couleurs voisines aux couleurs dominantes. Ici nous prendrons comme couleurs dominantes les 2 Pantone de l’ann\u00e9e 2021.<\/p>\n Ce qui est bien avec Pantone, c’est qu’ils sont sp\u00e9cialis\u00e9 dans la couleur. Leur site propose une page d\u00e9di\u00e9e<\/a> qui analyse les couleurs et des palettes jouant avec les couleurs s\u00e9lectionn\u00e9es. C’est l’exemple de la palette Aviary<\/em><\/span>.<\/p>\n Pour la suite de l’article, je vais donc simplement utiliser et d\u00e9composer cette palette en une palette web utilisable dans la plupart des projets (site web, application, fichier num\u00e9rique, etc.)<\/p>\n Lorsque vous n’avez pas une palette toute faite, ou que vous n’\u00eates pas inspir\u00e9\u00b7e\u00b7s par celles que vous trouvez sur la toile, vous pouvez :<\/p>\n Pour revenir \u00e0 notre palette propos\u00e9e par Pantone, la marque vous propose m\u00eame quelques outils d’analyse plus pouss\u00e9e de votre palette, avec notamment des outils pour visualiser l’impact de vos choix et la combinaison des couleurs entre elles. C’est pratique pour un d\u00e9but de notion d’accessibilit\u00e9, m\u00eame si finalement assez incomplets.<\/p>\n Le bouton\u00a0Analyze<\/strong><\/em><\/span> vous m\u00e8ne vers une liste d’outils qui peuvent vous inspirer ou vous aider \u00e0 mieux adapter vos couleurs.<\/p>\n La carte de luminance est plut\u00f4t pratique pour vous montrer la nature de chaque couleur, sans la couleur justement. Mais je vais personnellement utiliser d’autres outils pour composer ma palette.<\/p>\n Maintenant que nous avons notre palette, il est int\u00e9ressant de v\u00e9rifier le contraste de chacune des couleurs vis \u00e0 vis du blanc. Pourquoi le blanc ? Pour r\u00e9f\u00e9rence, c’est une base pour le papier, c’est souvent la base de composition de note site web. Et surtout c’est une base sur l’outil Leonardo Color<\/a>.<\/p>\n Pourquoi ces chiffres ? Ils me permettent d\u00e9j\u00e0 de me rendre compte que seul le bleu est naturellement suffisamment contrast\u00e9 vis \u00e0 vis du blanc, les autres sont autour de 3.0 donc on est pas trop mal, en dehors du jaune et de la couleur \u00ab\u00a0Cloud Dancer<\/em><\/span>\u00a0\u00bb (cr\u00e8me-gris). J’ai ensuite ajout\u00e9 une par une ces 6 couleurs dans Leonardo afin de sortir la palette de base. Pour vous \u00e9viter le travail, voici un lien direct vers la palette<\/a>. Dans le champ \u00ab\u00a0Contrast Ratios\u00a0\u00bb, vous remarquerez qu’il y a une liste de 10 valeurs s\u00e9par\u00e9es par des virgules. C’est ce qui me permet de g\u00e9n\u00e9rer automatiquement 10 couleurs passant par 10 ratios de contraste diff\u00e9rents, g\u00e9n\u00e9ralement autour de : Leonardo par d\u00e9faut commence avec 3.0 et 4.5, les deux valeurs du r\u00e9f\u00e9rentiel WCAG. La liste que je vous propose permet de couvrir une gamme assez large de luminances allant du plus clair au plus fonc\u00e9 pour une m\u00eame couleur. En g\u00e9n\u00e9ral au-dessus de 9 le contraste est d\u00e9j\u00e0 tr\u00e8s \u00e9lev\u00e9 et les diff\u00e9rences quasiment plus perceptibles.<\/p>\n Pour chaque couleur, je vais l\u00e9g\u00e8rement adapter cette liste pour y placer mes valeurs de contraste vis \u00e0 vis du blanc que j’ai obtenu pr\u00e9c\u00e9demment. Le but est de retrouver ma couleur dans la liste des variantes g\u00e9n\u00e9r\u00e9es par l’outil. Vous pouvez tout \u00e0 fait ne pas le faire, mais sachez que vous perdrez alors la r\u00e9f\u00e9rence de vos couleurs de base de palette.<\/p>\n Par exemple, pour la couleur bleu de ma liste de couleur, je vais avoir cette liste de contraste : Une fois cette liste de couleurs \u00e9tablies, il est important de v\u00e9rifier la proximit\u00e9 de chaque ligne de couleur par rapport \u00e0 ses voisines. On peut le faire avec le mode \u00ab\u00a0Swatches\u00a0\u00bb de Leonardo, en passant les champs CVD (Color Vision Deficiency)<\/em><\/span> Simulation sur chacune des options de simulation.<\/p>\n Ci-dessous, les extraits de mes diff\u00e9rentes palettes simul\u00e9es en version \u00ab\u00a0extr\u00eame\u00a0\u00bb (cas de daltonisme avec absence de perception compl\u00e8te d’un certain type de couleur) pour vous montrer \u00e0 quoi \u00e7a ressemble.<\/p>\n L’int\u00e9r\u00eat de faire cela est de se rendre compte que si vous souhaitez juxtaposer des couleurs dans votre interface pour diff\u00e9rencier des \u00e9l\u00e9ments, celles-ci seront peut-\u00eatre trop proches l’une de l’autre pour un daltonien. Point d’attention \u00e0 avoir lors de votre cr\u00e9ation d’interface donc<\/strong>.<\/p>\n Vous noterez que l’utilisation de valeurs de contraste proches pour chaque couleurs rend les couleurs indistinguables dans la palette en version Achromatique : chaque ligne semble \u00eatre exactement la m\u00eame.<\/p>\n Cette palette n’est pas accessible sous pr\u00e9texte qu’on l’a compos\u00e9e dans Leonardo, seule les couleurs au-dessus de 3.0 le sont vis \u00e0 vis du blanc. Certaines couleurs peuvent \u00eatre utilis\u00e9es ensemble \u00e9galement, en combinaison de couleurs de texte et fond, et d’autres ne peuvent pas l’\u00eatre.<\/p>\n Un bon outil permet de g\u00e9n\u00e9rer un tableau des compatibilit\u00e9s pour vous faire gagner du temps, il s’appelle Accessible Brand Colors<\/a> de UseAllFive. Sur ce lien je vous ai mis un exemple de nos 6 couleurs ainsi que le blanc et noir pour vous pr\u00e9senter ce qui est g\u00e9n\u00e9r\u00e9 par l’outil.<\/p>\n Toutes les combinaisons avec une croix sur fond orange sont \u00e0 proscrire. Une coche sur fond jaune pour les gros textes, et une verte c’est tout bon.<\/p>\n Cela vous permet d’obtenir d’avance une id\u00e9e des combos r\u00e9alisables avec ces couleurs. Bien s\u00fbr vous pouvez tester l’ensemble des couleurs de notre palette, mais \u00e7a serait long.<\/p>\n D’un point de vue purement nommage, il est commun de prendre chacune des couleurs et la nommer avec un suffixe de type num\u00e9rique. Exemple avec le jaune : Jack de chez Amplitude propose une approche similaire<\/a> mais modifie le nommage pour quelque chose proche du niveau de luminance de la couleur. Je vous laisse lire l’article car le principe des \u00e9chelles num\u00e9riques bas\u00e9es sur la luminance relative et absolue est int\u00e9ressant.<\/p>\n C’est une simple liste de valeurs hexad\u00e9cimale qui sera copi\u00e9e dans votre presse-papier. Il va donc falloir en faire quelque chose. De m\u00e9moire les logiciels Adobe utilisent un format ACO pour les palettes de couleurs, mais je n’ai pas trouv\u00e9 d’outil pour convertir une liste en ACO h\u00e9las.<\/p>\n Pour ma part j’utilise Figma, et j’avais pris l’habitude de copier ces couleurs au format texte, puis faire des petits carr\u00e9s dans l’outil pour visualiser mon nuancier avant de l’enregistrer dans les Styles de l’outil. Un peu long, et le plugin Color Import<\/a> vient tacler ce probl\u00e8me en cr\u00e9ant tout cela en un simple copier\/coller de liste et un bouton \u00e0 cliquer.<\/p>\n Note<\/strong> : Je monte une formation Figma (et UI Design) pour vous montrer plein d’astuces avec ce logiciel et devenir un As de Figma. Je vous tiendrai inform\u00e9s sur Twitter<\/a>.<\/p>\n Ce qui arrive ensuite d\u00e9pend de l’\u00e9tat de votre projet, mais un moodboard<\/em> <\/span>avec vos premi\u00e8res id\u00e9es de composition suivant vos besoins et mati\u00e8res \u00e0 explorer vous permettront de commencer \u00e0 affiner en terme d’utilisation et de composition avec ces couleurs.<\/p>\n Maintenant, c’est \u00e0 vous de jouer et de chercher comment manipuler ces couleurs, cette image n’est qu’un premier jet loin d’\u00eatre abouti.<\/p>\n Si vous \u00eates encore l\u00e0 : f\u00e9licitations pour avoir suivi jusque l\u00e0 nos aventures sur la composition d’une palette de couleurs \u00e0 partir de ces PANTONE 2021.<\/p>\n L’objectif de cet article \u00e9tait de vous pr\u00e9senter une d\u00e9marche personnelle de composition d’un nuancier de couleurs utilisables pour le web \u00e0 partir de couleur un peu al\u00e9atoires, ici les Pantones 2021 jaune et gris.<\/p>\n Il existe bien d’autres m\u00e9thodes, et j’utilise parfois l’outil Colorbox.io<\/a> pour optimiser certaines \u00e9chelle et m’assurer d’avoir des couleurs compatibles avec du pur blanc ou noir, un peu comme l’approche de Lyft<\/a> sur leur Color System<\/em><\/span>.<\/p>\n Notre job en tant que designer n’est pas uniquement de trouver des couleurs qui nous font plaisir, mais de savoir composer \u00e0 partir de contraintes ou sp\u00e9cificit\u00e9s bien pr\u00e9cises, parfois avec des couleurs d’une marque qui ne sont pas accessibles de base, et apprendre \u00e0 en faire quelque chose d’acceptable pour le plus grand nombre d’individus. Accessibilit\u00e9 et inclusivit\u00e9 fait (ou devrait faire) partie de notre quotidien de designers.<\/p>\n Attention cependan<\/strong>t, tout n’est pas aussi strict tout le temps, on a g\u00e9n\u00e9ralement \u00e9galement nos affinit\u00e9s personnelles qui peuvent reprendre le dessus. Des modifications du nuancier peuvent arriver en cours de route pour ajuster \u00ab\u00a0au juger\u00a0\u00bb certaines nuances de couleurs. C’est en les manipulant que nous pouvons y voir plus clair par la suite. Dans un premier temps, si vous pensez que cela vous demande trop d’effort, essayez de viser AA pour des gros textes, \u00e7a sera mieux que rien du tout. L’important est de faire mieux qu’hier.<\/p>\n On peut continuer sur ce sujet sur Twitter<\/a> et si vous souhaitez un entretien priv\u00e9 sur Calendly<\/a><\/span>. \ud83d\ude0a<\/p>\n Les quelques outils en vrac qui m’ont servi jusque l\u00e0 :<\/p>\n Quelques ressources en ligne :<\/p>\n C’est tout ! Excellente lecture et amusez-vous bien !<\/p>\n","protected":false},"excerpt":{"rendered":" \u00c9norm\u00e9ment de personnes semblent vouloir jouer avec les couleurs de l’ann\u00e9e de la marque Pantone. Peut-\u00eatre que ces couleurs inspirent d’avantage les cr\u00e9atifs. Ou que c’est la premi\u00e8re fois qu’on en a 2. Notez cependant que leur utilisation dans le web, ou le num\u00e9rique, peut avoir des impacts sur l’accessibilit\u00e9 de vos cr\u00e9ations. Petite note […]<\/p>\n","protected":false},"author":4,"featured_media":7830,"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,11],"tags":[85,250,270,578],"coauthors":[597],"class_list":["post-7752","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-experience-utilisateur","category-veille-graphique","tag-accessibilite","tag-couleurs","tag-pantone","tag-ux"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7752","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=7752"}],"version-history":[{"count":4,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7752\/revisions"}],"predecessor-version":[{"id":7862,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7752\/revisions\/7862"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/7830"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=7752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=7752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=7752"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=7752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Les couleurs Pantone de 2021<\/h2>\n
![\"Les](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/01\/pantones-2021@2x.png\")
<\/p>\n\n
\n
\n
Analyse de contraste<\/h3>\n
\nLa recommandation est d’atteindre au moins un niveau de AA au regard de la section 1.4<\/a> de ce r\u00e9f\u00e9rentiel. Le niveau de contraste s’applique en fonction de la taille du texte : on attend au moins un contraste de \u00ab\u00a03.0 : 1\u00a0\u00bb pour des gros textes (24px en normal ou 19px en gras<\/strong>) et \u00ab\u00a04.5 : 1\u00a0\u00bb pour les petits.<\/p>\n![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/01\/pantone-2021-color-comparison@2x.png\")
<\/p>\n\n
![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/01\/pantone-2021-contrast-combination@2x.png\")
<\/p>\nCr\u00e9ation d’une palette bas\u00e9e sur les Pantone 2021<\/h3>\n
![\"La](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/01\/pantone-2021-aviary-palette@2x.png\")
<\/p>\n\n
![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/01\/colormind-bootstrap-website-palette@2x.jpg\")
![\"Une](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/01\/pantone-2021-color-harmony@2x.png\")
<\/p>\n![\"Quelques](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/01\/pantone-2021-tools-accessibility@2x.png\")
<\/p>\nUne palette \u00ab\u00a0web\u00a0\u00bb bas\u00e9e sur les Pantone 2021<\/h3>\n
![\"Les](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/01\/pantone-2021-contrast-white@2x.png\")
\nEn plus de cela, ils me serviront \u00e0 ajuster ma palette dans ma composition sur Leonardo<\/a>.<\/p>\n1.05, 1.1, 1.3, 2, 3.1, 3.75, 4.8, 6, 7.25, 9<\/code><\/p>\nPourquoi ces valeurs de contraste ?<\/h4>\n
\n1.05, 1.1, 1.3, 2, 3.1, 3.75, 4.8, 6, 7.32<\/strong>, 9<\/code>
\nJe vous ai mis en gras la valeur changeante dans la liste.<\/p>\n![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/01\/pantone-2021-aviary-palette-web-common-vision@2x.png\")
![\"Palette](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/01\/pantone-2021-palette-deficience-accessibility.png\")
<\/a><\/p>\nUtiliser cette palette de couleur accessible<\/h3>\n
![\"Tableau](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/01\/pantone-palette-accessibilite-color-contrast.png\")
<\/a><\/p>\nilluminating-050<\/code>, illuminating-100<\/code>, illuminating-200<\/code>, etc.<\/p>\nComposer vos \u00e9crans<\/h3>\n
![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/01\/generated-colors@2x.png\")
Je ne vais pas vous faire un cours d’UI Design \u00e0 partir de ces couleurs, ce n’est pas l’objet. Cependant, une fois que vous avez ces couleurs dans Leonardo, vous pouvez copier les couleurs depuis le panneau \u00ab\u00a0Generated Colors\u00a0\u00bb.<\/p>\n![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/01\/pantone-2021-aviary-website-sample@2x.jpg\")
Accessibilit\u00e9 et ergonomie<\/h2>\n
\nParfois 4 ou 5 combinaisons pr\u00e9cises de couleur (fond + texte) suffiront \u00e0 faire le bonheur des designers et utilisateurs.<\/p>\nOutils et ressources sur l’accessibilit\u00e9 des couleurs<\/h2>\n
\n
\n