** This article also exists in English<\/a> **<\/em><\/p>\n Dans le design de sites, produits ou applications, le choix des couleurs est important. La couleur peut v\u00e9hiculer l’identit\u00e9 de votre marque, aider les utilisatrices \u00e0 comprendre l’information, etc. Malheureusement, tout le monde ne distingue pas les couleurs de la m\u00eame fa\u00e7on<\/strong>. Certains utilisateurs peuvent \u00eatre daltoniens<\/strong>, d’autres utilisatrices peuvent \u00eatre malvoyantes<\/strong>. D’autres encore peuvent se trouver dans diff\u00e9rents environnements ou situations qui rendent la perception des couleurs et des contrastes complexes<\/strong>. C’est pourquoi faire attention \u00e0 l’accessibilit\u00e9 de vos produits, sites et services est primordial.<\/p>\n Je n’entrerai pas tous les d\u00e9tails sur l’accessibilit\u00e9 en g\u00e9n\u00e9ral car cet article porte sp\u00e9cifiquement sur les couleurs. Ce que vous devez retenir c’est qu’il y a une liste de crit\u00e8res que vous pouvez trouver dans les directives WCAG 2.1 (en anglais)<\/a> pour vous aider. Pour le moment le 2.1 n’est pas encore traduit en fran\u00e7ais mais il existe une traduction pour WCAG 2.0<\/a>. Si vous \u00eates en France, le r\u00e9f\u00e9rentiel \u00e0 suivre est le RGAA<\/a>, pensez \u00e0 v\u00e9rifier lequel est applicable dans votre pays.<\/p>\n Dans cette grande liste, la section 1.4<\/a> est d\u00e9di\u00e9e \u00e0 \u00ab\u00a0faciliter la perception visuelle et auditive du contenu par l’utilisateur, notamment en s\u00e9parant le premier plan de l’arri\u00e8re-plan\u00a0\u00bb. Pour cette petite introduction, je m’en tiendrai aux crit\u00e8res AA qui est le niveau qu’il est bon de viser le plus souvent, puisqu’il permet de couvrir la majorit\u00e9 des besoins en accessibilit\u00e9.<\/p>\n Concernant l’accessibilit\u00e9 et les couleurs, il y a 3 grandes choses dont vous devez vous souvenir :<\/p>\n 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. Trello en a un bel exemple<\/a>. Si vous avez un formulaire, vous ne pouvez pas juste utiliser une bordure rouge pour montrer qu’il y a une erreur. Il y a d’autres exemples sur la page pour comprendre les crit\u00e8res de r\u00e9ussite : Understanding Success Criterion 1.4.1: Use of Color<\/a><\/p>\n 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 La conversion points > pixels n’est pas super simple et si vous voulez plus de d\u00e9tails, vous pouvez lire Understanding Success Criterion 1.4.3: Contrast (Minimum)<\/a><\/p>\n En r\u00e9sum\u00e9: les \u00ab\u00a0petits\u00a0\u00bb textes de moins de 24px<\/strong> (ou les textes en gras de moins de 19px) doivent suivre la r\u00e8gle d’un contraste minimum de 4.5:1<\/strong>, les textes plus gros de plus de 24px<\/strong> (ou les textes en gras de plus de 19px) doivent suivre la r\u00e8gle d’un contraste minimum de 3:1<\/strong><\/p>\n Attention, les criti\u00e8res WCAG 2.1 prennent \u00e9galement en compte les \u00e9l\u00e9ments non textuels. Du coup il vous faut au minimum un ratio de contrast de 3:1<\/strong> entre les composants d’interface<\/strong> ou \u00e9l\u00e9ments graphiques<\/strong> porteurs d’information<\/strong> et leur arri\u00e8re plan<\/p>\n Cel\u00e0 concerne par example les images, les boutons, les liens, les champs de formulaires (leur bordure et arri\u00e8re plan),, les icons si porteuses d’information, les \u00e9tats comme le focus ou le survol, etc. Par contre, cela ne concerne pas les \u00e9l\u00e9ments purements d\u00e9coratifs et les \u00e9lements interactifs d\u00e9sactiv\u00e9s.<\/p>\n Vous avez la th\u00e9orie, maintenant vous vous demandez surement \u00ab\u00a0mais comment suis-je cens\u00e9e mesurer ce rapport de contraste de 4,5 ou 3, est-ce que je dois faire des maths pour chaque couleur ?!\u00a0\u00bb Ne vous inqui\u00e9tez pas, j’ai pr\u00e9par\u00e9 une s\u00e9lection d’outils et de ressources pour vous aider \u00e0 d\u00e9marrer.<\/p>\n Le premier crit\u00e8re donc de s’assurer que l’information n’est 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’informations \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 Color Oracle est un simulateur de daltonisme gratuit qui fonctionne sous Windows, Mac et Linux.<\/p>\n Sim Daltonism est un outil pour Mac permettant de simuler diff\u00e9rents types de daltonisme. Il cr\u00e9e une fen\u00eatre qui passe par dessus l’\u00e9cran et que vous pouvez d\u00e9placer pour tester (il est donc plus facile de faire des captures d’\u00e9cran qu’Oracle).<\/p>\n Stark est un plugin pour Sketch, Figma et Adobe XD. Je l’ai mis dans la partie simulation de daltonisme mais il propose plusieurs options maintenant. La version gratuite vous permet d’avoir une simulation pour 3 types de daltonisme: protanopie, deut\u00e9ranopie et tritanopie. Si vous voulez 8 types de daltonisme il faut passer \u00e0 la version payante.<\/p>\n Le plugin offre \u00e9galement un outil de v\u00e9rification du contraste int\u00e9gr\u00e9 pour tester le rapport de contraste entre deux \u00e9l\u00e9ments de vos maquettes. Il est \u00e9galement possible d’avoir des suggestions d’autres couleurs (si celles s\u00e9lectionn\u00e9es ne fonctionnent pas) si vous optez pour la version payante. D’autres options d’outils gratuits de suggestions de couleurs sont propos\u00e9es plus loin dans l’article.<\/p>\n Si vous utilisez Photoshop, vous pouvez aller dans Affichage >Format d’\u00e9preuve et choisir l’une des options.<\/em><\/p>\n L’outil en ligne de Toptal Colorfilter<\/strong> vous permet de tester votre site Web et vous montre comment les personnes daltoniennes verraient vos pages.<\/p>\n Si vous devez n’installez qu’un outil, c’est celui l\u00e0. Il est disponible sur 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’outil de pipette : en fonction de ma configuration d’\u00e9cran j’ai parfois des probl\u00e8mes et l’hexad\u00e9cimal qu’il r\u00e9cup\u00e8re n’\u00e9tait pas exactement le bon. Donc je m’en tiens au \u00ab\u00a0copier-coller\u00a0\u00bb des couleurs hexad\u00e9cimales dans l’outil.<\/p>\n Si vous \u00eates sur Mac et que vous \u00eates pr\u00eat \u00e0 payer 7 $, vous pouvez obtenir usecontrast.com<\/a>, mais je ne l’ai pas test\u00e9.<\/p>\n Contrast est un plugin Figma qui vous permet de v\u00e9rifier le rapport de contraste des couleurs avec lesquelles vous travaillez directement sur vos maquettes Figma. Vous pouvez l’utiliser pour v\u00e9rifier le ratio entre du texte (ou un avant plan) et l’arri\u00e8re plan, que ce soit un remplissage, une option de fusion (blend), des images et des d\u00e9grad\u00e9s.<\/p>\n Le plugin propose \u00e9galement d’une option \u00ab\u00a0scan\u00a0\u00bb. Celle-ci liste toutes les combinaisons de couleurs de votre maquette. Vous pouvez ainsi traquer directement celles qui manquent de contraste sans avoir \u00e0 v\u00e9rifier manuellement tous les \u00e9l\u00e9ments.<\/p>\n Le deuxi\u00e8me crit\u00e8re est le rapport de contraste entre le texte (ou \u00e9l\u00e9ments de premier plan) et l’arri\u00e8re-plan<\/strong>. Comme je vous l’ai dit ici, vous n’aurez pas besoin de faire les calculs vous-m\u00eame, il y a beaucoup d’outils pour vous aider.<\/p>\n Je pense qu’on c’est mon nouvel outil de v\u00e9rification de contraste en ligne pr\u00e9f\u00e9r\u00e9. Il a plein de fonctionnalit\u00e9s dont j’ai besoin (ou dont je ne savais pas que j’avais besoin mais que j’aime bien) :<\/p>\n Color Review<\/strong> 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 Tanaguru Contrast Finder 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 Tips to Create an Accessible and Contrasted Color Palette<\/a> pour vous aider \u00e0 cr\u00e9er un jeu de couleur accessible avec cet outil.<\/p>\n Color & Contrast Picker <\/span><\/strong>vous permet de choisir une couleur d’arri\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\u00e9es pour trouver les combinaisons de couleurs accessibles les plus proches.<\/p>\n Color contrast checker <\/span><\/strong>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’outil vous sugg\u00e9rera des couleurs avec un ratio de contraste suffisant.<\/p>\n Cet outil permet la v\u00e9rification du contraste texte\/arri\u00e8re plan avec une petite subtilit\u00e9 ici: vous pouvez \u00e9galement renseigner la taille\/gr\u00e2ce des polices. Tr\u00e8s pratique car la taille et graisse influent sur le calcul. L’outil propose 2 alternatives si votre combinaison de couleurs n’est pas conforme aux niveaux AA\/AAA. Devinez qui a l\u00e9g\u00e8rement chang\u00e9 son violet sur son site apr\u00e8s ce petit test ?<\/span><\/p>\n Contrast Ratio<\/strong> est un outil en ligne qui v\u00e9rifie la ratio de contraste entre une couleur de texte et un arri\u00e8re plan et vous montre le r\u00e9sultat avec du texte pour que vous vous fassiez une id\u00e9e du rendu.<\/p>\n Colorable<\/span> <\/strong>est un autre outil en ligne qui vous permet de v\u00e9rifier le rapport de contraste texte\/arri\u00e8re-plan. L’outil permet \u00e9galement de pr\u00e9visualiser \u00e0 quoi il ressemblera. Si le ratio de contraste n’est pas assez \u00e9lev\u00e9, vous pouvez jouer avec les petits leviers Hue<\/span> (teinte), Saturation<\/span> (saturation) et Lightness<\/span> (luminescence) pour trouver une couleur qui fonctionnera.<\/p>\n Si vous voulez tester un site entier vus pouvez utiliser Checkmycolours.com.<\/strong><\/a> Cet outil vous permet d’entrer une URL et de cr\u00e9er un rapport de tous les probl\u00e8mes de contraste trouv\u00e9s sur votre site.<\/p>\n Who can use this color combination?<\/span><\/strong> est un outil qui vous permet non seulement de v\u00e9rifier le ratio de contraste d’une 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.<\/p>\n Maintenant que vous avez des outils, voici quelques autres articles et ressources pour vous aider \u00e0 d\u00e9marrer et \u00e0 cr\u00e9er des sites et produits accessibles.<\/p>\n Voici l’un de mes outils pr\u00e9f\u00e9r\u00e9s. Vous pouvez entrer jusqu’\u00e0 6 couleurs et il vous construira cette matrice qui vous permet de savoir quelles couleurs peuvent \u00eatre combin\u00e9es.<\/p>\n Contrast Grid <\/strong>vous propose le niveau avanc\u00e9 en terme de grilles de combinaisons d’avant-plan et d’arri\u00e8re-plan. Dans cet outil, vous pouvez choisir les couleurs sp\u00e9cifiques que vous voulez pour les lignes et les colonnes et construire votre propre grille personnalis\u00e9e (via Micka\u00ebl G.<\/a>)<\/p>\n Okay, cet outil n’est PAS le plus intuitif mais il est super puissant. En haut de l’\u00e9cran, vous pouvez choisir de construire une palette \u00e0 partir d’une URL, d’une image ou de jouer avec des couleurs. Vous obtenez ensuite une liste de couleurs que vous pouvez utiliser. Glissez-d\u00e9posez ces couleurs dans les 4 cat\u00e9gories (parent, couleur, arri\u00e8re plan et bordure) pour obtenir un bel aper\u00e7u, ou utilisez le lien \u00ab\u00a0view 4 accessible combinations<\/span>\u00a0\u00bb pour voir toutes les combinaisons de couleurs accessibles. My struggle with colors – Demystifying colors for accessible digital experiences<\/a> <\/span>and My struggle with colors, part II – Building an accessible color system from scratch.<\/span><\/a> Sont deux excellents articles pour vous aider \u00e0 construire une palette de couleurs. J’ai appliqu\u00e9 la m\u00e9thode des 10 teintes avec la m\u00e9thode des 5 \u00e9tapes sur quelques projets, \u00e7a marche assez bien.<\/p>\n 90 combinaisons<\/strong> est une page qui propose comme son nom l’indique 90 combinaisons de texte \/ couleur de fond qui ont un rapport de contraste suffisant. Attention cependant au ratio, certains d’entre eux ont un ratio de 4,1 AA, ce qui signifie que vous ne pouvez les utiliser que pour du texte de plus de 18 points (ou du texte en gras de plus de 14 points). Si vous manquez d’inspiration, ce site est un endroit pour commencer, mais….<\/p>\n Mais de mon point de vue du designer, je pense que vous devriez \u00e9viter la moiti\u00e9 des 90 combinaisons. Le violet sur le jaune ou le vert sur le violet passent certes le test math\u00e9matique du ratio 4,5, mais ces combinaisons rendent le texte super difficile \u00e0 lire. Ce n’est pas parce qu’on peut les utiliser ensemble qu’on doit le faire. We are colorblind est un site web avec des ressources, des articles et des exemples d\u00e9di\u00e9s \u00e0 aider d’autres personnes \u00e0 comprendre le daltonisme.<\/p>\n Geri Coady est une designer qui a mis beaucoup de ressources \u00e0 votre disposition pour vous aider :<\/p>\n Maintenant que vous en savez un peu plus sur les couleurs et l’accessibilit\u00e9, il y a une derni\u00e8re chose \u00e0 laquelle vous devez faire attention : les images de fond en CSS. Prenons l’exemple du site pragm.co<\/a> de mon amie Myriam. Myriam a fait un bon travail sur le choix des couleurs. Si vous v\u00e9rifiez le ratio de contrast entre sont violet fonc\u00e9 et le text blanc dans les outils que j’ai mentionn\u00e9s ci-dessus, vous verrez que le rapport est bon. Bien jou\u00e9 Myriam ! !!<\/p>\n N\u00e9anmoins, si vous analysez son site avec un outil de v\u00e9rification automatique de l’accessibilit\u00e9 comme Wave<\/a> (un outil en ligne qui fourni un rapport sur les probl\u00e8mes d’accessibilit\u00e9), vous pouvez voir qu’elle a quelques probl\u00e8mes de contraste avec son en-t\u00eate. Pourquoi Wave signale une erreur alors que le rapport de contraste entre ce fond violet et le texte blanc \u00e0 l’\u00e9cran est de 11:6 ? En fait ici wave (et d’autres outils automatis\u00e9s) vont consid\u00e9rer que le fond de son ent\u00eate est en fait blanc (#ffffff). Pourquoi ? Parce que le th\u00e8me de Myriam n’ajoute que l’image de fond sans aucune couleur de secours. Comme vous pouvez le voir sur la partie droite de cette capture d’\u00e9cran, si l’image n’est pas charg\u00e9e, Myriam a effectivement un texte blanc sur fond blanc. Et c’est pour \u00e7a que ces outils automatis\u00e9s affichent un avertissement si vous n’avez pas une couleur de fond de secours, au cas o\u00f9 l’image n’est pas charg\u00e9e (pour diverses raisons).<\/p>\n Comment y rem\u00e9dier ? Assurez-vous d’avoir une couleur de fond de secours pour vos \u00e9l\u00e9ments lorsque la couleur de fond est donn\u00e9es par une image CSS<\/strong>. Cela peut \u00eatre fait en fournissant une couleur de fond directement dans la d\u00e9claration CSS de l’image de fond. Ca fonctionne bien avec des JPGs. Mais si vous avez besoin de transparence (comme Myriam), vous devrez peut-\u00eatre trouver un autre moyen d’obtenir cette couleur de fond. Testez votre site en d\u00e9sactivant les images CSS et vous verrez tr\u00e8s vite o\u00f9 vous avez des soucis.<\/p>\n Et si vous avez besoin de ma\u00eetriser pr\u00e9cis\u00e9ment l\u2019apparence de vos visuels, par exemple pour des images produits ou du contenu destin\u00e9 aux r\u00e9seaux sociaux, vous pouvez ajouter un fond blanc automatiquement \u00e0 vos photos<\/a>.<\/p>\n Parfois, il faut travailler avec une identit\u00e9 graphique impos\u00e9e par le ou la cliente. Certains clients et clientes n’aimeront pas que vous leur disiez que vous voulez changer la couleur de leur charte valid\u00e9e par toute la hi\u00e9rarchie \u00ab\u00a0juste\u00a0\u00bb \u00e0 cause de soucis de contraste sur le site Web. Pour ces cas l\u00e0, une derni\u00e8re solution consiste \u00e0 utiliser un s\u00e9lecteur de style pour fournir une version alternative conforme<\/a>.<\/p>\n Enfin, voici quelques articles suppl\u00e9mentaires avec quelques conseils pour aller un peu plus loin dans ce sujet<\/p>\n Si vous avez d’autres outils et ressources \u00e0 partager, les commentaires sont ouverts.<\/p>\n Si le sujet vous int\u00e9resse, je vous propose de continuer sur mon blog avec les contenus suivants :<\/p>\n Le tweet sur l’enseignement des bases de l’accessibilit\u00e9 et des couleurs \u00e0 des \u00e9tudiants en design que j’avais fait a attir\u00e9 beaucoup d’attention. Il a donn\u00e9 lieu \u00e0 des discussions int\u00e9ressantes sur l’accessibilit\u00e9 des couleurs. J’ai donc d\u00e9cid\u00e9 de partager avec vous aujourd’hui toutes les ressources, conseils et outils que j’utilise r\u00e9guli\u00e8rement pour construire et v\u00e9rifier l’accessibilit\u00e9 des couleurs des produits et services que je design.<\/p>\n","protected":false},"author":3,"featured_media":7674,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"link","meta":{"_acf_changed":false,"footnotes":""},"categories":[223,217],"tags":[],"class_list":["post-7328","post","type-post","status-publish","format-link","has-post-thumbnail","hentry","category-accessibilite","category-ressources-outils","post_format-post-format-link"],"yoast_head":"\nContraste et accessibilit\u00e9 : quelques notions de base sur la couleur<\/h2>\n
\n
![\"Illustration](\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2019\/04\/accessibilite-contrasts-couleurs.jpg\")
<\/p>\nContrastes des textes \/ arri\u00e8re plan<\/h3>\n
\n
Contraste des \u00e9l\u00e9ments non textuels<\/h3>\n
Les outils de simulation de daltonisme<\/h2>\n
Color Oracle<\/a><\/h3>\n
![\"\"](\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/colorblindsimulator-oracle.jpg\")
<\/a><\/p>\nSim Daltonism for Mac<\/span><\/a><\/h3>\n
![\"Example](\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2020\/04\/somdalto_compressed.jpg\")
<\/p>\nStark<\/a><\/h3>\n
![\"\"](\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2020\/04\/stark.jpg\")
<\/a><\/p>\nToptal Colorfilter<\/a><\/h3>\n
<\/p>\n
Des outils hors ligne pour tester les contrastes de vos maquettes<\/h2>\n
Contrast Analyser<\/a><\/h3>\n
![\"\"](\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/color-contrast-analyser.jpg\")
<\/a><\/p>\nFigma Contrast<\/a><\/h3>\n
![\"\"](\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2020\/04\/figma-contrast.jpg\")
<\/a><\/p>\nOutils pour vous aider \u00e0 v\u00e9rifier le contraste des couleurs et trouver des alternatives<\/h2>\n
Contrast Report<\/a><\/span><\/h3>\n
![\"Capture](\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2021\/11\/colorcontrast.jpg\")
<\/a><\/p>\n\n
Color Review<\/a><\/h3>\n
![\"\"](\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/color-review.jpg\")
<\/a><\/p>\nTanaguru Contrast Finder<\/a><\/span><\/h3>\n
![\"\"](\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/tanaguru.jpg\")
<\/a><\/p>\n<\/h3>\n
Color<\/span> & Contrast Picker<\/span><\/a><\/h3>\n
![\"\"](\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/colorpicker.jpg\")
<\/a><\/p>\nColor<\/span><\/strong> contrast<\/span> checker<\/span> de polyplane<\/strong><\/a><\/h3>\n
![\"\"](\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2019\/04\/polypane-color-checker.jpg\")
<\/a><\/p>\nAccessible-colors.com<\/strong><\/a> <\/span><\/h3>\n
![\"\"](\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2020\/04\/accessibility-color-contrast-font.jpg\")
<\/a><\/p>\nD’autres outils en ligne de v\u00e9rification de ratio de contraste<\/h2>\n
Contrast Ratio<\/a><\/h3>\n
![\"\"](\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/contrast-ratio.jpg\")
<\/a><\/p>\nColorable<\/span><\/a><\/h3>\n
![\"\"](\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/colorable.jpg\")
<\/a><\/p>\nWho can use this color combination?<\/span><\/a><\/h3>\n
![\"\"](\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/whocanuse.jpg\")
<\/a><\/p>\nConstruire une palette de couleurs accessible<\/h2>\n
Accessible color palette builder<\/a><\/h3>\n
![\"\"](\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/color-matrix-accessibility.jpg\")
<\/a><\/p>\nContrast Grid <\/a><\/h3>\n
![\"\"](\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/contrast-grid.jpg\")
<\/a><\/p>\nCloudflare color tool<\/span><\/a><\/h3>\n
![\"\"](\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/cloudfour-contrast-tool.jpg\")
<\/a><\/p>\n90 combinaisons<\/a><\/h3>\n
\nGeoffrey<\/a> parle de cette probl\u00e9matique math\u00e9matique VS perception dans Il n\u2019y a pas de \u00ab Mythes sur l\u2019accessibilit\u00e9 des couleurs \u00bb<\/a><\/p>\n![\"\"](\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/90accessible-color-combinations.jpg\")
<\/a><\/p>\nAider les utilisatrices et utilisateurs daltoniens \u00e0 comprendre votre contenu<\/h2>\n
We are Colorblind<\/a><\/h3>\n
![\"\"](\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2019\/04\/wearecolorblind.jpg\")
<\/a><\/p>\n\n
Les ressources de Geri Coady\u2019s<\/h3>\n
\n
Attention aux images de fond en CSS<\/h2>\n
![\"](\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2019\/04\/site-violet-agence-web-montreal.jpg\")
<\/p>\n\u00c0 l’aide, je suis coinc\u00e9e avec la charte du client.<\/h2>\n
Quelques articles suppl\u00e9mentaires pour vous aider<\/h2>\n
\n
Plus d’articles sur l’accessibilit\u00e9<\/h2>\n
\n