{"id":887,"date":"2020-05-27T22:39:40","date_gmt":"2020-05-27T20:39:40","guid":{"rendered":"https:\/\/websitedemos.net\/agency-02\/?p=887"},"modified":"2020-06-14T11:01:17","modified_gmt":"2020-06-14T09:01:17","slug":"accessibilite-et-couleurs-outils-et-ressources-pour-concevoir-des-produits-accessible","status":"publish","type":"post","link":"https:\/\/www.projets.poulpe-digital.fr\/poulpe-digital\/2020\/05\/27\/accessibilite-et-couleurs-outils-et-ressources-pour-concevoir-des-produits-accessible\/","title":{"rendered":"Accessibilit\u00e9 et couleurs : outils et ressources pour concevoir des produits accessibles"},"content":{"rendered":"\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Contraste et accessibilit\u00e9 : quelques notions de base sur la couleur<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Dans le design de sites, produits ou applications, le choix des couleurs est important. La couleur peut v\u00e9hiculer l\u2019identit\u00e9 de votre marque, aider les utilisatrices \u00e0 comprendre l\u2019information, etc. Malheureusement,\u00a0<strong>tout le monde ne distingue pas les couleurs de la m\u00eame fa\u00e7on<\/strong>. Certains utilisateurs peuvent \u00eatre\u00a0<strong>daltoniens<\/strong>, d\u2019autres utilisatrices peuvent \u00eatre\u00a0<strong>malvoyantes<\/strong>. D\u2019autres encore peuvent se trouver dans\u00a0<strong>diff\u00e9rents environnement ou situations qui rendent la perception des couleurs et des contrastes complexes<\/strong>. C\u2019est pourquoi faire attention \u00e0 l\u2019accessibilit\u00e9 de vos produits, sites et services est primordial.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Concernant l\u2019accessibilit\u00e9 et les couleurs, il y a 2 grandes choses dont vous devez vous souvenir :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>N\u2019utilisez pas la couleur comme seul moyen visuel de v\u00e9hiculer une information<\/strong>, une action, etc.<\/li><li>Veillez \u00e0 ce que\u00a0<strong>le rapport de contraste entre le premier plan\u00a0<\/strong>(texte ou ic\u00f4nes, mais aussi les bordures et autres \u00e9l\u00e9ments de formulaire)<strong>\u00a0et le fond soit suffisant<\/strong>.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2019\/04\/accessibilite-contrasts-couleurs.jpg\" alt=\"Illustration visuelle des deux principes cit\u00e9s au dessus\" class=\"wp-image-7332\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Pour le premier crit\u00e8re, cela signifie par exemple que si vous cr\u00e9ez un graphique, vous devez pr\u00e9voir un moyen autre que la couleur pour diff\u00e9rencier les diff\u00e9rents \u00e9l\u00e9ments.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour le second crit\u00e8re, cela signifie que le contraste entre le texte (ou \u00e9l\u00e9ments de premier plan) et la couleur de fond doit \u00eatre :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>de<strong>&nbsp;4,5 \u00e0 1<\/strong>&nbsp;pour les&nbsp;<strong>textes de moins de 18 points<\/strong>&nbsp;et de<strong>&nbsp;moins de 14 points s\u2019ils sont en gras<\/strong><\/li><li>de&nbsp;<strong>3 \u00e0 1<\/strong>&nbsp;pour les&nbsp;<strong>textes de plus de 18 points<\/strong>&nbsp;et au&nbsp;<strong>moins 14 points s\u2019ils sont gras<\/strong><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">La conversion points &gt; pixels n\u2019est pas super simple et si vous voulez plus de d\u00e9tails, vous pouvez lire&nbsp;<a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-minimum.html\">Understanding Success Criterion 1.4.3: Contrast (Minimum)<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En r\u00e9sum\u00e9: les\u00a0<strong>\u00ab\u00a0petits\u00a0\u00bb textes de moins de 24px<\/strong>\u00a0(ou les textes en gras de moins de 19px)\u00a0<strong>doivent suivre la r\u00e8gle d\u2019un contraste minimum de 4.5<\/strong>, les<strong>\u00a0textes plus gros de plus de 24px<\/strong>\u00a0(ou les textes en gras de plus de 19px)\u00a0<strong>doivent suivre la r\u00e8gle d\u2019un contraste minimum de 3<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Les outils de simulation de daltonisme<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Le premier crit\u00e8re donc de&nbsp;<strong>s\u2019assurer que l\u2019information n\u2019est pas seulement v\u00e9hicul\u00e9e par la couleur<\/strong>. Vous pouvez bien s\u00fbr commencer par v\u00e9rifier visuellement vos maquettes et rechercher tous les endroits o\u00f9 ce crit\u00e8re peut \u00eatre appliqu\u00e9. Les formulaires, les infographies, les graphiques, les statuts sont g\u00e9n\u00e9ralement un bon point de d\u00e9part. Faites \u00e9galement attention aux s\u00e9lecteurs de couleurs de produits si vous faites un site de e-commerce (plus d\u2019informations \u00e0 ce sujet dans les articles de la section suivante). Vous pouvez ensuite utiliser des simulateurs de daltonisme pour simuler et tester que vos choix de couleur fonctionnent avec diff\u00e9rents types de daltonisme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><a href=\"https:\/\/colororacle.org\/\">Color Oracle<\/a>&nbsp;<\/strong>est un simulateur de daltonisme gratuit qui fonctionne sous Windows, Mac et Linux.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/colorblindsimulator-oracle.jpg\" alt=\"\" class=\"wp-image-3808\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><a href=\"https:\/\/getstark.co\/\">Stark<\/a>&nbsp;<\/strong>est un plugin Sketch, Adobe XD et Figma qui permet de simuler diff\u00e9rents types de daltonisme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Si vous utilisez Photoshop, vous pouvez aller dans Affichage &gt;Format d\u2019\u00e9preuve et choisir l\u2019une des options.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/colorblindsimulator-stark-sketch.jpg\" alt=\"\" class=\"wp-image-3809\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">L\u2019outil en ligne de<strong>&nbsp;<a href=\"https:\/\/www.toptal.com\/designers\/colorfilter\">Toptal Colorfilter<\/a><\/strong>&nbsp;vous permet de tester votre site Web et vous montre comment les personnes daltoniennes verront vos pages.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/colorblindsimulator-toptal.jpg\" alt=\"\" class=\"wp-image-3810\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Outils pour vous aider \u00e0 v\u00e9rifier le contraste des couleurs<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Le deuxi\u00e8me crit\u00e8re est le&nbsp;<strong>rapport de contraste entre le texte (ou \u00e9l\u00e9ments de premier plan) et l\u2019arri\u00e8re-plan<\/strong>. Comme je vous l\u2019ai dit ici, vous n\u2019aurez pas besoin de faire les calculs vous-m\u00eame, il y a beaucoup d\u2019outils pour vous aider.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Outils en ligne<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><a href=\"http:\/\/contrast-finder.tanaguru.com\/\">Tanaguru Contrast Finder<\/a>&nbsp;<\/strong>vous permet non seulement de v\u00e9rifier le rapport de contraste entre deux couleurs, mais vous aide \u00e9galement \u00e0 trouver une nouvelle couleur si celle que vous avez choisie ne correspond pas au rapport de contraste souhait\u00e9. Vous pouvez lire mon article&nbsp;<a href=\"https:\/\/stephaniewalter.design\/blog\/tips-create-accessible-color-palette\/\">Tips to Create an Accessible and Contrasted Color Palette<\/a>&nbsp;pour vous aider \u00e0 cr\u00e9er un jeu de couleur accessible avec cet outil.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/tanaguru.jpg\" alt=\"\" class=\"wp-image-3812\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/color.review\/check\/FEDC2A-5A3B5D\"><strong>Color Review<\/strong><\/a>&nbsp;vous permet de v\u00e9rifier le rapport de contraste entre deux couleurs. La matrice de couleurs vous aide \u00e0 trouver une alternative si les couleurs que vous avez choisies ne fonctionnent pas.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/color-review.jpg\" alt=\"\" class=\"wp-image-3817\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><a href=\"https:\/\/kevingutowski.github.io\/color.html\">Color &amp; Contrast Picker<\/a><\/strong>&nbsp; vous permet de choisir une couleur d\u2019arri\u00e8re-plan et de premier plan et vous donne la valeur de contraste entre ces deux couleurs. Vous pouvez ensuite jouer avec les petites poign\u00e9e pour trouver les combinaisons de couleurs accessibles les plus proches.<a href=\"https:\/\/kevingutowski.github.io\/color.html\"><\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><a href=\"https:\/\/contrast-ratio.com\/\">Contrast Ratio<\/a><\/strong>&nbsp;est un outil en ligne qui v\u00e9rifie la ratio de contraste entre un couleur de texte et un arri\u00e8re plan et vous montre le r\u00e9sultat avec du text pour que vous vous fassiez une id\u00e9e du rendu.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/contrast-ratio.jpg\" alt=\"\" class=\"wp-image-3818\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><a href=\"http:\/\/jxnblk.com\/colorable\/demos\/text\/?background=%2523123409&amp;foreground=%2523DACDCD\">Colorable<\/a>&nbsp;<\/strong>est un autre outil en ligne qui vous permet de v\u00e9rifier le rapport de contraste texte\/arri\u00e8re-plan. L\u2019outil permet \u00e9galement de pr\u00e9visualiser \u00e0 quoi il ressemblera. Si le ratio de contraste n\u2019est pas assez \u00e9lev\u00e9, vous pouvez jouer avec les petits leviers&nbsp;Hue&nbsp;(teinte),&nbsp;Saturation&nbsp;(saturation) et&nbsp;Lightness&nbsp;(luminescence) pour trouver une couleur qui fonctionnera.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/colorable.jpg\" alt=\"\" class=\"wp-image-3807\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/polypane.app\/color-contrast\/#fg=rgb(254%2C%20220%2C%2042)&amp;bg=rgb(255%2C%20255%2C%20255)&amp;level=aa\"><strong>Color contrast checker&nbsp;de polyplane<\/strong><\/a>&nbsp;est un autre outil qui analyse et vous sugg\u00e8re des couleurs qui correspondent au rapport de contraste requis. Vous pouvez choisir entre les niveaux AA et AAA et l\u2019outil vous sugg\u00e9rera des couleurs avec un ratio de contraste suffisant.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2019\/04\/polypane-color-checker.jpg\" alt=\"\" class=\"wp-image-7676\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Si vous voulez tester un site entier vus pouvez utiliser&nbsp;<a href=\"http:\/\/www.checkmycolours.com\/\"><strong>Checkmycolours.com.<\/strong><\/a>&nbsp;Cet outil vous permet d\u2019entrer une URL et de cr\u00e9er un rapport de tous les probl\u00e8mes de contraste trouv\u00e9s sur votre site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/whocanuse.com\/?b=fedc2a&amp;c=5a3b5d&amp;f=20&amp;s=\"><strong>Who can use this color combination?<\/strong><\/a>&nbsp; est un outil qui vous permet non seulement de v\u00e9rifier le ratio de contraste d\u2019une combinaison de couleurs, mais aussi de pr\u00e9visualiser cette combinaison avec diff\u00e9rentes simulations de daltonisme et vous indique le pourcentage de la population qui est concern\u00e9.<a href=\"https:\/\/whocanuse.com\/?b=fedc2a&amp;c=5a3b5d&amp;f=20&amp;s=\"><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/whocanuse.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Des outils hors ligne que vous pouvez installer<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/developer.paciellogroup.com\/resources\/contrastanalyser\/\">Contrast Analyser<\/a>&nbsp;est l\u2019outil que vous devez installer sous Windows, MacOS et Linux. Il vous permet de saisir une couleur ou de la r\u00e9cup\u00e9rer avec la pipette pour v\u00e9rifier le rapport de contraste. Par contre faites encore une fois attention avec l\u2019outil de pipette : en fonction de ma configuration d\u2019\u00e9cran j\u2019ai parfois des probl\u00e8mes et l\u2019hexad\u00e9cimal qu\u2019il r\u00e9cup\u00e8re n\u2019\u00e9tait pas exactement le bon. Donc je m\u2019en tiens au \u00ab&nbsp;copier-coller&nbsp;\u00bb des couleurs hexad\u00e9cimales dans l\u2019outil.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/color-contrast-analyser.jpg\" alt=\"\" class=\"wp-image-3805\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Si vous \u00eates sur Mac et que vous \u00eates pr\u00eat \u00e0 payer 7 $, vous pouvez obtenir&nbsp;<a href=\"https:\/\/usecontrast.com\/\">usecontrast.com<\/a>, mais je ne l\u2019ai pas test\u00e9.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contraste et accessibilit\u00e9 : quelques notions de base sur la couleur Dans le design de sites, produits ou applications, le choix des couleurs est important. La couleur peut v\u00e9hiculer l\u2019identit\u00e9 de votre marque, aider les utilisatrices \u00e0 comprendre l\u2019information, etc. Malheureusement,\u00a0tout le monde ne distingue pas les couleurs de la m\u00eame fa\u00e7on. Certains utilisateurs peuvent [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2694,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"right-sidebar","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"enabled","header-above-stick-meta":"","header-main-stick-meta":"on","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[65],"tags":[],"class_list":["post-887","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-performance"],"_links":{"self":[{"href":"https:\/\/www.projets.poulpe-digital.fr\/poulpe-digital\/wp-json\/wp\/v2\/posts\/887","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.projets.poulpe-digital.fr\/poulpe-digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.projets.poulpe-digital.fr\/poulpe-digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.projets.poulpe-digital.fr\/poulpe-digital\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.projets.poulpe-digital.fr\/poulpe-digital\/wp-json\/wp\/v2\/comments?post=887"}],"version-history":[{"count":0,"href":"https:\/\/www.projets.poulpe-digital.fr\/poulpe-digital\/wp-json\/wp\/v2\/posts\/887\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.projets.poulpe-digital.fr\/poulpe-digital\/wp-json\/wp\/v2\/media\/2694"}],"wp:attachment":[{"href":"https:\/\/www.projets.poulpe-digital.fr\/poulpe-digital\/wp-json\/wp\/v2\/media?parent=887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.projets.poulpe-digital.fr\/poulpe-digital\/wp-json\/wp\/v2\/categories?post=887"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.projets.poulpe-digital.fr\/poulpe-digital\/wp-json\/wp\/v2\/tags?post=887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}