{"id":140,"date":"2026-10-02T12:43:01","date_gmt":"2026-10-02T12:43:01","guid":{"rendered":"https:\/\/ls-a.fr\/bon-a-savoir\/?p=140"},"modified":"2026-10-02T13:31:05","modified_gmt":"2026-10-02T13:31:05","slug":"accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web","status":"publish","type":"post","link":"https:\/\/ls-a.fr\/bon-a-savoir\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\/","title":{"rendered":"Accessibilit\u00e9 num\u00e9rique : utiliser correctement les couleurs dans un design web"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Il est toujours difficile de savoir si un design (les choix graphiques d\u2019un site ou d\u2019une application) est accessible : il y a des r\u00e8gles bien pr\u00e9cises \u00e0 respecter, mais une fois que celles-ci le sont, tout est affaire de nuance et de contexte.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Attention, on parle bien de nuance et de contexte, pas d\u2019interpr\u00e9tation. L\u2019accessibilit\u00e9, en son coeur, n\u2019est pas arbitraire. On trouvera toujours des cas particuliers o\u00f9 il n\u2019y a pas de meilleure d\u00e9cision, mais ce ne sont que des cas particuliers.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Avant de rentrer dans le d\u00e9tails de l&rsquo;utilisation des couleurs dans un design web, une petite introduction sur ce qu&rsquo;est un design accessible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u2019est quoi un design accessible ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">C\u2019est un design qui est compatible avec les personnes qui l\u2019utilisent. Pour rentrer un peu dans le d\u00e9tail, voici quelques exemples :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Une personne qui ne connait pas tr\u00e8s bien la langue et qui traduit votre message, votre site ou votre application. Dans ce cas, les instructions en un mot comme \u00ab\u202fAjouter\u202f\u00bb, \u00ab\u202fChanger\u202f\u00bb, \u00ab\u202fD\u00e9placer\u202f\u00bb pourront \u00eatre traduites \u00e9trangement. Les phrases plus longues pourront prendre davantage ou moins de place selon la langue cible.<\/li>\n\n\n\n<li>Un usager qui doit utiliser son t\u00e9l\u00e9phone ou sa liseuse pour acc\u00e9der \u00e0 votre contenu. Il y a de grandes chances que la personne se rende compte tr\u00e8s rapidement s\u2019il est incompatible avec ce terminal. Si elle s\u2019en va, ce n\u2019est vraiment frustrant pour personne. Le probl\u00e8me est quand la personne est&nbsp;<strong>oblig\u00e9e temporairement<\/strong>&nbsp;de se servir de cet \u00e9quipement pour faire sa d\u00e9marche et qu\u2019elle ne peut pas&nbsp;<strong>utiliser un autre outil ou site que le v\u00f4tre<\/strong>.<\/li>\n\n\n\n<li>Une personne doit interagir avec votre site ou application \u00e0 une heure pr\u00e9cise de la journ\u00e9e o\u00f9 la luminosit\u00e9 est trop forte, ou avec un \u00e9cran d\u00e9r\u00e9gl\u00e9, ou fissur\u00e9, ou au travers d\u2019un vid\u00e9oprojecteur. Il y a une diff\u00e9rence entre un moment d\u00e9sagr\u00e9able auquel vous ne pouvez rien, et un outil inaccessible qui n\u2019est utilisable que dans des conditions parfaites.<\/li>\n\n\n\n<li>Un usager utilise un vieil ordinateur (ou t\u00e9l\u00e9phone mobile, ou tablette, ou une connexion internet instable) qui met beaucoup de temps pour afficher votre contenu. Ce n\u2019est pas de votre faute, mais ce n\u2019est pas de la sienne non plus. Si toute action met un temps inhabituel \u00e0 se r\u00e9aliser, les usagers vont se d\u00e9tourner de votre contenu.<\/li>\n\n\n\n<li>Une personne doit utiliser votre site avec un enfant en bas \u00e2ge dans les bras. Fonctionne aussi avec la version \u00ab\u202fenfant en bas \u00e2ge sachant se d\u00e9placer \u00e0 quatre pattes\u202f\u00bb. Comprenez que l\u2019attention sur votre produit ne sera pas sans faille.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Il est important d\u2019envisager que tout le monde n\u2019a pas les conditions parfaites pour interagir avec votre contenu. Ce n\u2019est pas qu\u2019une histoire de handicap de naissance d\u00fb \u00e0 une maladie ou survenu au cours de la vie avec une amputation violente : la plupart des inaccessibilit\u00e9s sont ressenties par tout un chacun, \u00e0 diff\u00e9rents moments de la journ\u00e9e ou de la vie. Cr\u00e9er un contenu web appr\u00e9ciable, c\u2019est le penser fonctionnel m\u00eame quand tout ne va pas dans le meilleur des mondes. Pour illustrer via un autre domaine, un v\u00e9hicule ne roulant que sur des voies planes et sans nids-de-poule n\u2019aurait que peu de succ\u00e8s.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">L\u2019accessibilit\u00e9 des couleurs : penser son design avec des couleurs adapt\u00e9es<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Le RGAA (R\u00e9f\u00e9rentiel G\u00e9n\u00e9ral pour l\u2019Am\u00e9lioration de l\u2019Accessibilit\u00e9) pr\u00e9sente quelques r\u00e8gles pr\u00e9cises \u00e0 ce sujet. Mais comme il y a beaucoup de crit\u00e8res, on va d\u00e9couper en sous-sections.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vous retrouverez dans cet article la gestion des couleurs : les articles suivants traiteront d\u2019autres aspects de design et de typographie.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tout le monde ne per\u00e7oit pas la couleur de la m\u00eame mani\u00e8re. Comme beaucoup le savent, il existe des handicaps associ\u00e9s \u00e0 une condition d\u00e8s la naissance (ou non) comme le daltonisme. Ce qui est moins \u00e9vident, c\u2019est que la couleur ne doit pas \u00eatre utilis\u00e9e comme seul indicateur : voici pourquoi.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">La perception de la couleur d\u00e9pend du contexte environnant<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Vous avez peut-\u00eatre remarqu\u00e9 qu\u2019un \u00e9cran, de smartphone par exemple, para\u00eet bien plus lumineux en pleine nuit qu\u2019en pleine journ\u00e9e. La lumi\u00e8re environnante r\u00e9duit le contraste des couleurs per\u00e7ues, et c\u2019est pour cela qu\u2019un \u00e9cran en plein soleil est difficile \u00e0 lire.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cette interpr\u00e9tation des couleurs est d\u00e9termin\u00e9e par notre cerveau. C\u2019est ce qui nous permet de bien mieux d\u00e9celer des d\u00e9tails dans la p\u00e9nombre : un brin de lumi\u00e8re dans un nuancier de gris nous para\u00eet bien plus lumineux qu\u2019il ne l\u2019est en r\u00e9alit\u00e9. Ci-dessous, un graphique pr\u00e9sentant une courbe \u00ab\u202fLuminosit\u00e9 per\u00e7ue\u202f\u00bb face \u00e0 une droite \u00ab\u202fLuminosit\u00e9 r\u00e9elle\u202f\u00bb : m\u00eame en augmentant de mani\u00e8re uniforme la luminosit\u00e9 du noir jusqu\u2019au blanc, la luminosit\u00e9 per\u00e7ue est bien plus \u00e9lev\u00e9e au d\u00e9but de la courbe, et rejoint la droite vers le blanc.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/archive.smashing.media\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/59a0f735-3b26-4920-b0b1-594c657f180f\/7-realities-myths-contrast-color.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Image tir\u00e9e de l&rsquo;excellent article de Smashing Magazine&nbsp;<a href=\"https:\/\/www.smashingmagazine.com\/2022\/09\/realities-myths-contrast-color\/\" target=\"_blank\" rel=\"noreferrer noopener\">The Realities And Myths Of Contrast And Color<\/a>&nbsp;par Andrew Somers. Si vous avez le temps, il vaut assur\u00e9ment le temps de lecture.<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Cette consid\u00e9ration est importante : cet effet se manifeste \u00e0 la fois dans l\u2019environnement de l\u2019usager et dans les th\u00e8mes sombres.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">La perception de la couleur d\u00e9pend du calibrage de l\u2019\u00e9cran<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Vous l\u2019avez peut-\u00eatre remarqu\u00e9 : d\u2019un \u00e9cran \u00e0 l\u2019autre, les couleurs affich\u00e9es ne sont pas les m\u00eames. Vous pouvez faire le test sur un t\u00e9l\u00e9phone, un ordinateur portable, une t\u00e9l\u00e9vision et\/ou un vid\u00e9oprojecteur : l\u2019affichage sera diff\u00e9rent, de mani\u00e8re plus ou moins perceptible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Et c\u2019est sans compter :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>L\u2019usure du mat\u00e9riel : une lampe us\u00e9e dans un vid\u00e9oprojecteur rendra des couleurs surprenantes.<\/li>\n\n\n\n<li>Les autres m\u00e9dias : imprimer une page web ou un contenu color\u00e9, selon de nombreux facteurs, pourra donner des r\u00e9sultats m\u00e9diocres.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Un exemple de diff\u00e9rences de calibrage sur le site Ps pour Photographes (<a href=\"https:\/\/www.pspourphotographes.com\/chaine-de-gestion-de-la-couleur-calibrage-decran\/\" target=\"_blank\" rel=\"noreferrer noopener\">lien vers l\u2019article<\/a>). Sur deux \u00e9crans libell\u00e9s \u00ab\u202fAvant calibrage\u202f\u00bb, on voit :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>D\u2019un c\u00f4t\u00e9 des couleurs plut\u00f4t pastel d\u00fb \u00e0 une luminosit\u00e9 trop importante.<\/li>\n\n\n\n<li>De l\u2019autre, des tons bleut\u00e9s au lieu de ros\u00e9s, comme s\u2019il y avait un filtre bleu sur la totalit\u00e9 de la photo. Les couleurs claires sont presque compl\u00e8tement blanches.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Apr\u00e8s calibrage, les deux \u00e9crans ont le m\u00eame rendu, une montagne \u00e0 l\u2019aube.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.pspourphotographes.com\/wp-content\/uploads\/2018\/03\/calibrage_avant_apres-2.jpg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Cr\u00e9dits : Ps pour Photographes<\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Toutes les personnes valides ne per\u00e7oivent pas les couleurs de la m\u00eame mani\u00e8re<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">M\u00eame sans daltonisme, les couleurs sont interpr\u00e9t\u00e9es diff\u00e9remment. Peut-\u00eatre avez-vous d\u00e9j\u00e0 v\u00e9cu une exp\u00e9rience similaire : en \u00e9changeant avec quelqu\u2019un, vous indiquez le panneau \u00ab\u202fjaune\u202f\u00bb, et votre interlocuteur r\u00e9pond qu\u2019il n\u2019est pas jaune mais orange. Ou entre le bleu et le vert. Ou entre le bleu et le violet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En r\u00e9alit\u00e9, la couleur n\u2019est qu\u2019une interpr\u00e9tation de notre cerveau par rapport \u00e0 des stimuli lumineux fournis par les yeux. C\u2019est une longue cha\u00eene qui peut fonctionner diff\u00e9remment selon les personnes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Par exemple, vous pourriez r\u00e9aliser le test&nbsp;<a href=\"https:\/\/ismy.blue\/\" target=\"_blank\" rel=\"noreferrer noopener\">Is My Blue<\/a>&nbsp;avec une autre personne, sur le m\u00eame \u00e9cran. Le principe : le site vous pr\u00e9sente une couleur, vous d\u00e9cidez si c\u2019est \u00ab\u202fplut\u00f4t vert\u202f\u00bb ou \u00ab\u202fplut\u00f4t bleu\u202f\u00bb en huit \u00e9tapes. L\u2019\u00e9cart se r\u00e9duit de plus en plus pour d\u00e9terminer votre interpr\u00e9tation de la couleur bleue. Les \u00e9carts peuvent \u00eatre surprenants.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><div class=\"wp-block-image\">\n<figure class=\"alignright\"><img decoding=\"async\" src=\"https:\/\/thumb.wikimedia.org\/wikipedia\/en\/thumb\/2\/21\/The_dress_blueblackwhitegold.jpg\/250px-The_dress_blueblackwhitegold.jpg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Cr\u00e9dits : Cecilia Bleasdale<\/figcaption><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p class=\"wp-block-paragraph\">Un autre exemple, la fameuse robe (<a href=\"https:\/\/en.wikipedia.org\/wiki\/The_dress\" target=\"_blank\" rel=\"noreferrer noopener\">voir l\u2019article The Dress sur Wikipedia<\/a>). Si vous ne la connaissez pas, le test est impressionnant. Quel que soit l\u2019\u00e9cran, et selon votre perception des couleurs, vous verrez la robe ci-dessous :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Noire et bleue<\/li>\n\n\n\n<li>Blanche et dor\u00e9e<\/li>\n\n\n\n<li>Potentiellement un m\u00e9lange des deux, ou avec du brun.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Le daltonisme est un handicap invisible mais bien pr\u00e9sent<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Le daltonisme impacte environ 3.3 millions de personnes en France, avec une pr\u00e9valence forte pour les hommes : 1 homme sur 12, 1 femme sur 200<sup data-fn=\"fn-d2c53e77-ac19-48ab-9aae-29643d391d2d\" class=\"fn\"><a href=\"#fn-d2c53e77-ac19-48ab-9aae-29643d391d2d\" id=\"fn-d2c53e77-ac19-48ab-9aae-29643d391d2d-link\">1<\/a><\/sup>. Ce chiffre est stable depuis le d\u00e9but des \u00e9tudes \u00e0 ce sujet, \u00e9tant d\u00fb principalement \u00e0 des anomalies g\u00e9n\u00e9tiques ou des accidents de la vie.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Il existe diff\u00e9rents daltonismes, aussi appel\u00e9s dyschromatopsies (dys r\u00e9f\u00e8re \u00e0 un dysfonctionnement, chromato \u00e0 la couleur, opsie \u00e0 la vision) :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Protanopie <\/strong>: absence des r\u00e9cepteurs r\u00e9tinaux du rouge<\/li>\n\n\n\n<li><strong>Protanomalie <\/strong>: pr\u00e9sence d\u2019une mutation du pigment de la vision du rouge<\/li>\n\n\n\n<li><strong>Deut\u00e9ranopie <\/strong>: absence des r\u00e9cepteurs r\u00e9tinaux du vert<\/li>\n\n\n\n<li><strong>Deut\u00e9ranomalie <\/strong>: pr\u00e9sence d\u2019une mutation du pigment de la vision du vert<\/li>\n\n\n\n<li><strong>Tritanopie <\/strong>: absence des r\u00e9cepteurs r\u00e9tinaux du bleu<\/li>\n\n\n\n<li><strong>Tritanomalie <\/strong>: pr\u00e9sence d\u2019une mutation du pigment de la vision du bleu<\/li>\n\n\n\n<li><strong>Achromatopsie <\/strong>: absence totale de vision des couleurs, associ\u00e9e dans sa forme cong\u00e9nitale \u00e0 une forte photophobie, une acuit\u00e9 visuelle r\u00e9duite (&lt; 2\/10)<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"762\" height=\"350\" src=\"https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Dyschromatopies.png\" alt=\"\" class=\"wp-image-146\" srcset=\"https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Dyschromatopies.png 762w, https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Dyschromatopies-300x138.png 300w\" sizes=\"auto, (max-width: 762px) 100vw, 762px\" \/><figcaption class=\"wp-element-caption\">Image adapt\u00e9e de&nbsp;<a href=\"https:\/\/fr.wikipedia.org\/wiki\/Daltonisme#\/media\/Fichier:Color_blindness.svg\" target=\"_blank\" rel=\"noreferrer noopener\">Color blindness sur Wikipedia<\/a>.<\/figcaption><\/figure>\n<\/div>\n\n\n<style data-wp-block-html=\"css\">\nsummary {\n  border: 1px grey solid;\n  border-radius: 5px;\n  padding: 0.25em 0.5em;\n  background: #DDD;\n}\ndetails {\n  cursor: pointer;\n  margin-top: 0.5rem;\n  margin-bottom: 1rem;\n}\ndetails:open div {\n  border-left: 1px grey solid;\n  border-right: 1px grey solid;\n  border-bottom: 1px grey solid;\n  padding: .5rem;\n}\ndetails table {\n  border-collapse: collapse;\n  margin: 0 auto;\n}\ndetails table td, details table th {\n  border: 1px black solid;\n  padding: 0.5em 0.75em;\n}\ndetails table td:first-child {\n  text-align: right;\n}\ndetails table td:last-child {\n  text-align: left;\n}\ndetails table tr:nth-child(even) {\n  background: #DDD;\n}\n<\/style>\n\n<details>\n  <summary>Donn\u00e9es de l&rsquo;image<\/summary>\n  <div>\n  <table>\n    <thead>\n      <tr>\n        <th>Pourcentage de la population<\/th>\n        <th>Type de vision<\/th>\n      <\/tr>\n    <\/thead>\n    <tbody>\n      <tr>\n         <td>92 %<\/td>\n         <td>Vision majoritaire<\/td>\n      <\/tr>\n      <tr>\n         <td>2,7 %<\/td>\n         <td>Deut\u00e9ranomalie<\/td>\n      <\/tr>\n      <tr>\n         <td>0,66 %<\/td>\n         <td>Protanomalie<\/td>\n      <\/tr>\n      <tr>\n         <td>0,59 %<\/td>\n         <td>Protanopie<\/td>\n      <\/tr>\n      <tr>\n         <td>0,56 %<\/td>\n         <td>Deut\u00e9ranopie<\/td>\n      <\/tr>\n      <tr>\n         <td>0,015 % %<\/td>\n         <td>Tritanopie<\/td>\n      <\/tr>\n      <tr>\n         <td>0,01 % %<\/td>\n         <td>Tritanomalie<\/td>\n      <\/tr>\n      <tr>\n         <td>&lt; 0,0001 % %<\/td>\n         <td>Achromatopsie<\/td>\n      <\/tr>\n    <\/tbody>\n  <\/table>\n  <\/div>\n<\/details>\n\n\n\n<p class=\"wp-block-paragraph\">Pour se repr\u00e9senter les diff\u00e9rences de couleurs et donc de contraste entre les diff\u00e9rentes formes de daltonisme, voici des exemples tir\u00e9s de&nbsp;<a href=\"https:\/\/fr.wikipedia.org\/wiki\/Daltonisme\" target=\"_blank\" rel=\"noreferrer noopener\">la page Wikipedia sur le daltonisme<\/a>&nbsp;:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"594\" src=\"https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Rainbow.svg_.webp\" alt=\"\" class=\"wp-image-142\" srcset=\"https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Rainbow.svg_.webp 960w, https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Rainbow.svg_-300x186.webp 300w, https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Rainbow.svg_-768x475.webp 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><figcaption class=\"wp-element-caption\">Drapeau arc-en-ciel, vision majoritaire<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"594\" src=\"https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Rainbow_Deuteranopia.svg_.webp\" alt=\"\" class=\"wp-image-143\" srcset=\"https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Rainbow_Deuteranopia.svg_.webp 960w, https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Rainbow_Deuteranopia.svg_-300x186.webp 300w, https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Rainbow_Deuteranopia.svg_-768x475.webp 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><figcaption class=\"wp-element-caption\">Drapeau arc-en-ciel, Deuteranopia<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"594\" src=\"https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Rainbow_Protanopia.svg_.webp\" alt=\"\" class=\"wp-image-144\" srcset=\"https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Rainbow_Protanopia.svg_.webp 960w, https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Rainbow_Protanopia.svg_-300x186.webp 300w, https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Rainbow_Protanopia.svg_-768x475.webp 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><figcaption class=\"wp-element-caption\">Drapeau arc-en-ciel, Protanopia<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"594\" src=\"https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Rainbow_Tritanopia.svg_.webp\" alt=\"\" class=\"wp-image-145\" srcset=\"https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Rainbow_Tritanopia.svg_.webp 960w, https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Rainbow_Tritanopia.svg_-300x186.webp 300w, https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/10\/Rainbow_Tritanopia.svg_-768x475.webp 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><figcaption class=\"wp-element-caption\">Drapeau arc-en-ciel, Tritanopia<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Si vous n\u2019\u00eates pas aveugle et n\u2019avez pas de daltonisme, vous pourrez remarquer que les contrastes pour les personnes ayant une protanopie sont particuli\u00e8rement r\u00e9duits sur les sept couleurs de l\u2019arc-en-ciel : le orange, le jaune et le vert sont toutes des nuances de jaune, tandis que le bleu et le violet sont en nuances de bleu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">La signification des couleurs n\u2019est pas la m\u00eame pour tout le monde<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Une th\u00e9matique connue dans le design est celle de la&nbsp;<a href=\"https:\/\/fr.wikipedia.org\/wiki\/Psychologie_des_couleurs\" target=\"_blank\" rel=\"noreferrer noopener\">psychologie des couleurs<\/a>&nbsp;: les couleurs ont une signification, qui permet de transmettre des \u00e9motions. On trouvera assez fr\u00e9quemment les exemples suivants :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Rouge : le danger<\/li>\n\n\n\n<li>Vert : le succ\u00e8s<\/li>\n\n\n\n<li>Jaune : le dynamisme<\/li>\n\n\n\n<li>Bleu : le s\u00e9rieux<\/li>\n\n\n\n<li>Et ainsi de suite<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Ce qui est moins fr\u00e9quemment \u00e9voqu\u00e9, c\u2019est que c\u2019est notre culture qui associe une signification aux couleurs. \u00c0 force de voir des feux tricolores, on finit par associer le rouge \u00e0 l\u2019arr\u00eat et le vert au mouvement. \u00c0 force de voir des habits noirs ou blancs pendant les c\u00e9r\u00e9monies, on les associe au s\u00e9rieux et \u00e0 la sobri\u00e9t\u00e9.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ce qui signifie que dans d\u2019autres cultures, les couleurs ont un autre sens :&nbsp;<a href=\"https:\/\/pageoneformula.com\/color-psychology-across-different-cultures\/\" target=\"_blank\" rel=\"noreferrer noopener\">PageOneFormula a r\u00e9dig\u00e9 un article avec diff\u00e9rents exemples dans diff\u00e9rentes cultures<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un autre exemple : sur les march\u00e9s boursiers chinois, le rouge indique une hausse, alors que le vert indique une baisse, \u00e0 l&rsquo;inverse de l&rsquo;Europe et des \u00c9tats-Unis<sup data-fn=\"fn-c924746d-f5cf-40bd-813c-31577cc83d73\" class=\"fn\"><a href=\"#fn-c924746d-f5cf-40bd-813c-31577cc83d73\" id=\"fn-c924746d-f5cf-40bd-813c-31577cc83d73-link\">2<\/a><\/sup>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Indiquer un \u00e9chec uniquement avec du rouge et un succ\u00e8s avec du vert ajoute une charge suppl\u00e9mentaire pour les personnes venant d\u2019autres cultures. Selon leur degr\u00e9 d\u2019acclimatation \u00e0 la culture occidentale, cela peut m\u00eame cr\u00e9er des incompr\u00e9hensions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion, et comment utiliser les couleurs de mani\u00e8re accessible<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En d\u00e9finitive, ces \u00e9l\u00e9ments influent sur la compr\u00e9hension d\u2019une couleur :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Si c\u2019est un \u00e9cran ou une impression ou autre chose<\/li>\n\n\n\n<li>L\u2019environnement autour de l\u2019\u00e9cran<\/li>\n\n\n\n<li>Le calibrage de l\u2019\u00e9cran<\/li>\n\n\n\n<li>La culture<\/li>\n\n\n\n<li>La perception des couleurs, reconnue ou non<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Et encore, nous n\u2019avons pas mentionn\u00e9 le fait que la perception des couleurs est r\u00e9alis\u00e9e dans notre t\u00eate : certaines personnes peuvent voir les couleurs diff\u00e9remment tout simplement parce que leur cerveau fonctionne diff\u00e9remment.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Il y a une erreur \u00e0 ne surtout pas commettre : faire vous-m\u00eame des th\u00e8mes sp\u00e9cifiques \u00e0 chaque handicap, pour correspondre \u00e0 tous les besoins. C\u2019est un temps de d\u00e9veloppement gigantesque et qui ne fonctionnera pas : qu\u2019importe le travail r\u00e9alis\u00e9, vous ne pourrez pas influer sur l\u2019environnement autour de l\u2019\u00e9cran par exemple.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La solution, c\u2019est tout simplement d\u2019avoir une gestion raisonn\u00e9e et qualifi\u00e9e des couleurs. Cela inclut :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Un contraste suffisant entre la couleur des textes et la couleur du fond<\/li>\n\n\n\n<li>Un contraste suffisant entre la couleur des liens, la couleur des textes environnants et la couleur de fond (voir l\u2019outil&nbsp;<a href=\"https:\/\/contrast-triangle.com\/\">Contrast Triangle<\/a>)<\/li>\n\n\n\n<li>Un contraste suffisant pour les \u00e9l\u00e9ments interactifs : un bouton doit \u00ab\u202fse voir\u202f\u00bb, un champ de formulaire \u00e9galement.<\/li>\n\n\n\n<li>Un contraste&nbsp;<strong>insuffisant<\/strong>&nbsp;entre les boutons d\u00e9sactiv\u00e9s et le texte : sinon, on peut avoir l\u2019impression que ces boutons sont actifs. Ce n&rsquo;est pas un crit\u00e8re du RGAA directement car les boutons d\u00e9sactiv\u00e9s sont exempt\u00e9s du contr\u00f4le de contraste, c&rsquo;est une bonne pratique de design.<\/li>\n\n\n\n<li>Un contraste suffisant pour les placeholders. Encore mieux et pour \u00e9viter de consid\u00e9rer le placeholder comme un texte d\u00e9j\u00e0 entr\u00e9, ne pas utiliser de placeholder du tout.<\/li>\n\n\n\n<li><strong>Ne pas<\/strong>&nbsp;baser uniquement le propos sur la couleur<\/li>\n\n\n\n<li><strong>Ne pas<\/strong>&nbsp;s\u2019inqui\u00e9ter des \u00e9l\u00e9ments uniquement d\u00e9coratifs : ils ne v\u00e9hiculent aucun sens fonctionnel<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Et c\u2019est exactement ce que propose le RGAA. Voici les crit\u00e8res RGAA associ\u00e9s \u00e0 la couleur :<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>L\u2019information ne doit pas \u00eatre donn\u00e9e uniquement par la couleur (<a href=\"https:\/\/accessibilite.numerique.gouv.fr\/methode\/criteres-et-tests\/#3.1\">Crit\u00e8re 3.1<\/a>)<\/li>\n\n\n\n<li>Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arri\u00e8re-plan est-il suffisamment \u00e9lev\u00e9 (hors cas particuliers) ? (<a href=\"https:\/\/accessibilite.numerique.gouv.fr\/methode\/criteres-et-tests\/#3.2\">Crit\u00e8re 3.2<\/a>)<\/li>\n\n\n\n<li>Les couleurs utilis\u00e9es dans les composants d\u2019interface ou les \u00e9l\u00e9ments graphiques porteurs d\u2019informations sont-elles suffisamment contrast\u00e9es (hors cas particuliers) ? (<a href=\"https:\/\/accessibilite.numerique.gouv.fr\/methode\/criteres-et-tests\/#3.3\">Crit\u00e8re 3.3<\/a>)<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Ces crit\u00e8res pr\u00e9cisent :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Que si la couleur v\u00e9hicule un sens, un autre \u00e9l\u00e9ment doit indiquer le sens. On peut penser \u00e0 la forme (un carr\u00e9 rouge, un rond vert, un triangle jaune), \u00e0 un texte int\u00e9gr\u00e9 dans la forme, \u00e0 un num\u00e9ro ou une lettre qui est ensuite r\u00e9f\u00e9renc\u00e9e dans une l\u00e9gende&#8230;<\/li>\n\n\n\n<li>Que le contraste doit \u00eatre de 3:1 pour un grand texte (24px et plus, ou 18.5px en gras) et de 4.5:1 pour le reste des textes. Vous pouvez tester les contrastes avec&nbsp;<a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">cet outil fourni par WebAIM<\/a>.<\/li>\n\n\n\n<li>Que dans un graphique o\u00f9 la couleur v\u00e9hicule un sens, le sens doit toujours \u00eatre per\u00e7u soit avec un contraste de 3:1, soit sans couleurs. On peut utiliser des libell\u00e9s proches des aplats de couleur, ou des textures, ou s\u2019assurer que les couleurs contigu\u00ebs sont altern\u00e9es avec des contrastes suffisants.<\/li>\n\n\n\n<li>Que les \u00e9l\u00e9ments interactifs (liens, boutons, champs de formulaires) ont bien un contraste de 3:1 ou un \u00e9l\u00e9ment distinctif qui n\u2019est pas bas\u00e9 sur la couleur : un soulignement, une bordure, un liser\u00e9, &#8230;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Les rapports de contraste (3:1 et 4.5:1) tombent juste parce qu&rsquo;ils sont des conventions. Il fallait bien trancher quelque part : malgr\u00e9 ces rapports de contraste, des personnes n\u2019arriveront pas \u00e0 interpr\u00e9ter l\u2019information. Pour ne donner qu\u2019un exemple de polyhandicap, les personnes daltoniennes ont aussi le soleil sur leur \u00e9cran.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sachant cela, la meilleure chose que vous puissiez faire, c\u2019est de viser ces rapports de contraste, m\u00eame si vous ne pouvez pas tout corriger d&rsquo;un coup. De toute fa\u00e7on, il y a tellement de mani\u00e8res diff\u00e9rentes de comprendre une couleur qu\u2019elle n\u2019est pas si importante que \u00e7a.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Suite de la s\u00e9rie<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Dans l\u2019article suivant, nous continuerons de d\u00e9tailler les \u00e9l\u00e9ments essentiels dans la cr\u00e9ation d\u2019interfaces graphiques accessibles, en nous concentrant cette fois sur la mise en page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Notes de bas de page<\/h2>\n\n\n<ol class=\"wp-block-footnotes\"><li id=\"fn-d2c53e77-ac19-48ab-9aae-29643d391d2d\"><a href=\"https:\/\/opg.optica.org\/josa\/abstract.cfm?uri=josa-33-6-294\" target=\"_blank\" rel=\"noreferrer noopener\">Facts of Color Blindness<\/a> <a href=\"#fn-d2c53e77-ac19-48ab-9aae-29643d391d2d-link\" aria-label=\"Aller \u00e0 la note de bas de page 1\">\u21a9\ufe0e<\/a><\/li><li id=\"fn-c924746d-f5cf-40bd-813c-31577cc83d73\"><a href=\"https:\/\/pmc.ncbi.nlm.nih.gov\/articles\/PMC3933460\/\" target=\"_blank\" rel=\"noreferrer noopener\">Kuo et al., PLoS One, 2014<\/a> <a href=\"#fn-c924746d-f5cf-40bd-813c-31577cc83d73-link\" aria-label=\"Aller \u00e0 la note de bas de page 2\">\u21a9\ufe0e<\/a><\/li><\/ol>","protected":false},"excerpt":{"rendered":"<p>Il est toujours difficile de savoir si un design (les choix graphiques d\u2019un site ou d\u2019une application) est accessible : il y a des r\u00e8gles bien pr\u00e9cises \u00e0 respecter, mais une fois que celles-ci le sont, tout est affaire de nuance et de contexte. Attention, on parle bien de nuance et de contexte, pas d\u2019interpr\u00e9tation. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"[{\"content\":\"<a href=\\\"https:\/\/opg.optica.org\/josa\/abstract.cfm?uri=josa-33-6-294\\\" target=\\\"_blank\\\" rel=\\\"noreferrer noopener\\\">Facts of Color Blindness<\/a>\",\"id\":\"fn-d2c53e77-ac19-48ab-9aae-29643d391d2d\"},{\"content\":\"<a href=\\\"https:\/\/pmc.ncbi.nlm.nih.gov\/articles\/PMC3933460\/\\\" target=\\\"_blank\\\" rel=\\\"noreferrer noopener\\\">Kuo et al., PLoS One, 2014<\/a>\",\"id\":\"fn-c924746d-f5cf-40bd-813c-31577cc83d73\"}]"},"categories":[2],"tags":[],"class_list":["post-140","post","type-post","status-publish","format-standard","hentry","category-articles-de-fond"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Accessibilit\u00e9 num\u00e9rique : utiliser correctement les couleurs dans un design web - Bon a savoir<\/title>\n<meta name=\"description\" content=\"Une s\u00e9rie d&#039;articles pour comprendre les enjeux de l&#039;accessibilit\u00e9 num\u00e9rique et am\u00e9liorer rapidement son score RGAA\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ls-a.fr\/bon-a-savoir\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accessibilit\u00e9 num\u00e9rique : utiliser correctement les couleurs dans un design web - Bon a savoir\" \/>\n<meta property=\"og:description\" content=\"Une s\u00e9rie d&#039;articles pour comprendre les enjeux de l&#039;accessibilit\u00e9 num\u00e9rique et am\u00e9liorer rapidement son score RGAA\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ls-a.fr\/bon-a-savoir\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Bon a savoir\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-02T12:43:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-02T13:31:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/archive.smashing.media\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/59a0f735-3b26-4920-b0b1-594c657f180f\/7-realities-myths-contrast-color.png\" \/>\n<meta name=\"author\" content=\"ls-a\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"ls-a\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\\\/\"},\"author\":{\"name\":\"ls-a\",\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/#\\\/schema\\\/person\\\/ca9bf02b0f93b8dc487c81d263bdd3fd\"},\"headline\":\"Accessibilit\u00e9 num\u00e9rique : utiliser correctement les couleurs dans un design web\",\"datePublished\":\"2026-10-02T12:43:01+00:00\",\"dateModified\":\"2026-10-02T13:31:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\\\/\"},\"wordCount\":2696,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/archive.smashing.media\\\/assets\\\/344dbf88-fdf9-42bb-adb4-46f01eedd629\\\/59a0f735-3b26-4920-b0b1-594c657f180f\\\/7-realities-myths-contrast-color.png\",\"articleSection\":[\"Articles de fond\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\\\/\",\"url\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\\\/\",\"name\":\"Accessibilit\u00e9 num\u00e9rique : utiliser correctement les couleurs dans un design web - Bon a savoir\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/archive.smashing.media\\\/assets\\\/344dbf88-fdf9-42bb-adb4-46f01eedd629\\\/59a0f735-3b26-4920-b0b1-594c657f180f\\\/7-realities-myths-contrast-color.png\",\"datePublished\":\"2026-10-02T12:43:01+00:00\",\"dateModified\":\"2026-10-02T13:31:05+00:00\",\"description\":\"Une s\u00e9rie d'articles pour comprendre les enjeux de l'accessibilit\u00e9 num\u00e9rique et am\u00e9liorer rapidement son score RGAA\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\\\/#primaryimage\",\"url\":\"https:\\\/\\\/archive.smashing.media\\\/assets\\\/344dbf88-fdf9-42bb-adb4-46f01eedd629\\\/59a0f735-3b26-4920-b0b1-594c657f180f\\\/7-realities-myths-contrast-color.png\",\"contentUrl\":\"https:\\\/\\\/archive.smashing.media\\\/assets\\\/344dbf88-fdf9-42bb-adb4-46f01eedd629\\\/59a0f735-3b26-4920-b0b1-594c657f180f\\\/7-realities-myths-contrast-color.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Accessibilit\u00e9 num\u00e9rique : utiliser correctement les couleurs dans un design web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/#website\",\"url\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/\",\"name\":\"Bon a savoir\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/#organization\",\"name\":\"ls-a\",\"url\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/logo_lsa_DEF_Carre.png\",\"contentUrl\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/logo_lsa_DEF_Carre.png\",\"width\":1900,\"height\":1676,\"caption\":\"ls-a\"},\"image\":{\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ls-a.fr\\\/bon-a-savoir\\\/#\\\/schema\\\/person\\\/ca9bf02b0f93b8dc487c81d263bdd3fd\",\"name\":\"ls-a\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/65df3ce17c39abe1c534d00ffa9662e350138740e2312cb436c547a1981d83ab?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/65df3ce17c39abe1c534d00ffa9662e350138740e2312cb436c547a1981d83ab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/65df3ce17c39abe1c534d00ffa9662e350138740e2312cb436c547a1981d83ab?s=96&d=mm&r=g\",\"caption\":\"ls-a\"},\"sameAs\":[\"https:\\\/\\\/ls-a.fr\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Accessibilit\u00e9 num\u00e9rique : utiliser correctement les couleurs dans un design web - Bon a savoir","description":"Une s\u00e9rie d'articles pour comprendre les enjeux de l'accessibilit\u00e9 num\u00e9rique et am\u00e9liorer rapidement son score RGAA","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ls-a.fr\/bon-a-savoir\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\/","og_locale":"fr_FR","og_type":"article","og_title":"Accessibilit\u00e9 num\u00e9rique : utiliser correctement les couleurs dans un design web - Bon a savoir","og_description":"Une s\u00e9rie d'articles pour comprendre les enjeux de l'accessibilit\u00e9 num\u00e9rique et am\u00e9liorer rapidement son score RGAA","og_url":"https:\/\/ls-a.fr\/bon-a-savoir\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\/","og_site_name":"Bon a savoir","article_published_time":"2026-10-02T12:43:01+00:00","article_modified_time":"2026-10-02T13:31:05+00:00","og_image":[{"url":"https:\/\/archive.smashing.media\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/59a0f735-3b26-4920-b0b1-594c657f180f\/7-realities-myths-contrast-color.png","type":"","width":"","height":""}],"author":"ls-a","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"ls-a","Dur\u00e9e de lecture estim\u00e9e":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ls-a.fr\/bon-a-savoir\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\/#article","isPartOf":{"@id":"https:\/\/ls-a.fr\/bon-a-savoir\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\/"},"author":{"name":"ls-a","@id":"https:\/\/ls-a.fr\/bon-a-savoir\/#\/schema\/person\/ca9bf02b0f93b8dc487c81d263bdd3fd"},"headline":"Accessibilit\u00e9 num\u00e9rique : utiliser correctement les couleurs dans un design web","datePublished":"2026-10-02T12:43:01+00:00","dateModified":"2026-10-02T13:31:05+00:00","mainEntityOfPage":{"@id":"https:\/\/ls-a.fr\/bon-a-savoir\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\/"},"wordCount":2696,"commentCount":0,"publisher":{"@id":"https:\/\/ls-a.fr\/bon-a-savoir\/#organization"},"image":{"@id":"https:\/\/ls-a.fr\/bon-a-savoir\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\/#primaryimage"},"thumbnailUrl":"https:\/\/archive.smashing.media\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/59a0f735-3b26-4920-b0b1-594c657f180f\/7-realities-myths-contrast-color.png","articleSection":["Articles de fond"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ls-a.fr\/bon-a-savoir\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ls-a.fr\/bon-a-savoir\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\/","url":"https:\/\/ls-a.fr\/bon-a-savoir\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\/","name":"Accessibilit\u00e9 num\u00e9rique : utiliser correctement les couleurs dans un design web - Bon a savoir","isPartOf":{"@id":"https:\/\/ls-a.fr\/bon-a-savoir\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ls-a.fr\/bon-a-savoir\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\/#primaryimage"},"image":{"@id":"https:\/\/ls-a.fr\/bon-a-savoir\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\/#primaryimage"},"thumbnailUrl":"https:\/\/archive.smashing.media\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/59a0f735-3b26-4920-b0b1-594c657f180f\/7-realities-myths-contrast-color.png","datePublished":"2026-10-02T12:43:01+00:00","dateModified":"2026-10-02T13:31:05+00:00","description":"Une s\u00e9rie d'articles pour comprendre les enjeux de l'accessibilit\u00e9 num\u00e9rique et am\u00e9liorer rapidement son score RGAA","breadcrumb":{"@id":"https:\/\/ls-a.fr\/bon-a-savoir\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ls-a.fr\/bon-a-savoir\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/ls-a.fr\/bon-a-savoir\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\/#primaryimage","url":"https:\/\/archive.smashing.media\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/59a0f735-3b26-4920-b0b1-594c657f180f\/7-realities-myths-contrast-color.png","contentUrl":"https:\/\/archive.smashing.media\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/59a0f735-3b26-4920-b0b1-594c657f180f\/7-realities-myths-contrast-color.png"},{"@type":"BreadcrumbList","@id":"https:\/\/ls-a.fr\/bon-a-savoir\/accessibilite-numerique-utiliser-correctement-les-couleurs-dans-un-design-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/ls-a.fr\/bon-a-savoir\/"},{"@type":"ListItem","position":2,"name":"Accessibilit\u00e9 num\u00e9rique : utiliser correctement les couleurs dans un design web"}]},{"@type":"WebSite","@id":"https:\/\/ls-a.fr\/bon-a-savoir\/#website","url":"https:\/\/ls-a.fr\/bon-a-savoir\/","name":"Bon a savoir","description":"","publisher":{"@id":"https:\/\/ls-a.fr\/bon-a-savoir\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ls-a.fr\/bon-a-savoir\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/ls-a.fr\/bon-a-savoir\/#organization","name":"ls-a","url":"https:\/\/ls-a.fr\/bon-a-savoir\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/ls-a.fr\/bon-a-savoir\/#\/schema\/logo\/image\/","url":"https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/09\/logo_lsa_DEF_Carre.png","contentUrl":"https:\/\/ls-a.fr\/bon-a-savoir\/wp-content\/uploads\/2026\/09\/logo_lsa_DEF_Carre.png","width":1900,"height":1676,"caption":"ls-a"},"image":{"@id":"https:\/\/ls-a.fr\/bon-a-savoir\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/ls-a.fr\/bon-a-savoir\/#\/schema\/person\/ca9bf02b0f93b8dc487c81d263bdd3fd","name":"ls-a","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/65df3ce17c39abe1c534d00ffa9662e350138740e2312cb436c547a1981d83ab?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/65df3ce17c39abe1c534d00ffa9662e350138740e2312cb436c547a1981d83ab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/65df3ce17c39abe1c534d00ffa9662e350138740e2312cb436c547a1981d83ab?s=96&d=mm&r=g","caption":"ls-a"},"sameAs":["https:\/\/ls-a.fr"]}]}},"_links":{"self":[{"href":"https:\/\/ls-a.fr\/bon-a-savoir\/wp-json\/wp\/v2\/posts\/140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ls-a.fr\/bon-a-savoir\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ls-a.fr\/bon-a-savoir\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ls-a.fr\/bon-a-savoir\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ls-a.fr\/bon-a-savoir\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":15,"href":"https:\/\/ls-a.fr\/bon-a-savoir\/wp-json\/wp\/v2\/posts\/140\/revisions"}],"predecessor-version":[{"id":165,"href":"https:\/\/ls-a.fr\/bon-a-savoir\/wp-json\/wp\/v2\/posts\/140\/revisions\/165"}],"wp:attachment":[{"href":"https:\/\/ls-a.fr\/bon-a-savoir\/wp-json\/wp\/v2\/media?parent=140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ls-a.fr\/bon-a-savoir\/wp-json\/wp\/v2\/categories?post=140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ls-a.fr\/bon-a-savoir\/wp-json\/wp\/v2\/tags?post=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}