{"id":27918,"date":"2019-11-08T10:50:09","date_gmt":"2019-11-08T09:50:09","guid":{"rendered":"https:\/\/www.codeur.com\/blog\/?p=27918"},"modified":"2025-09-05T17:13:07","modified_gmt":"2025-09-05T15:13:07","slug":"comment-choisir-contraste-couleurs","status":"publish","type":"post","link":"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/","title":{"rendered":"Comment choisir le bon contraste de couleurs sur son site&nbsp;?"},"content":{"rendered":"<p>Les couleurs ont un impact sur l\u2019exp\u00e9rience client. Pour 85% des consommateurs, les teintes choisies influencent leur d\u00e9cision d&#8217;achat. Pourquoi\u00a0? Parce que les couleurs transmettent vos valeurs, votre expertise et votre image de marque. De m\u00eame,\u00a0le contraste entre les diff\u00e9rentes teintes de votre webdesign est essentiel pour optimiser la navigation.<br \/>\nMais, comment s\u2019assurer de choisir les bonnes couleurs et un contraste agr\u00e9able \u00e0 regarder&nbsp;? Continuez la lecture de cet article pour le d\u00e9couvrir\u00a0!<\/p>\n<h2>Choisissez les couleurs selon leur symbolique<\/h2>\n<p>Chaque couleur porte une signification. Sur votre site, elle en dit long sur les valeurs de votre marque, ainsi que les produits ou services propos\u00e9s.<\/p>\n<ul>\n<li>Le blanc exprime la puret\u00e9, le bonheur, la jeunesse, la paix, l&#8217;\u00e9l\u00e9gance et l\u2019honn\u00eatet\u00e9.<\/li>\n<li>Le noir signifie luxe, \u00e9l\u00e9gance et s\u00e9rieux.<\/li>\n<li>Le jaune\u00a0montre la bonne humeur, la joie et l\u2019\u00e9nergie.<\/li>\n<li>Le vert d\u00e9signe la naturalit\u00e9, le bio, le grand air.<\/li>\n<li>Le rouge\u00a0est souvent synonyme de passion ou vitesse.<\/li>\n<li>Le bleu repr\u00e9sente le calme, la s\u00e9r\u00e9nit\u00e9, ainsi que le voyage.<\/li>\n<li>Le violet est souvent associ\u00e9 \u00e0 l\u2019art, il inspire le r\u00eave, l\u2019\u00e9panouissement et l\u2019intelligence.<\/li>\n<\/ul>\n<p><strong><img decoding=\"async\" class=\"aligncenter size-full wp-image-27922\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/couleur-contrast-compressor.jpg\" alt=\"\" width=\"700\" height=\"467\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/couleur-contrast-compressor.jpg 700w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/couleur-contrast-compressor-300x200.jpg 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/couleur-contrast-compressor-370x247.jpg 370w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/couleur-contrast-compressor-270x180.jpg 270w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/couleur-contrast-compressor-570x380.jpg 570w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/strong><\/p>\n<blockquote><p><strong>\u00c0 lire aussi<\/strong>&nbsp;:\u00a0<a href=\"https:\/\/www.codeur.com\/blog\/tendances-web-design\/\">10 tendances Webdesign cette ann\u00e9e<\/a><\/p><\/blockquote>\n<h2>Limitez le nombre de couleurs<\/h2>\n<p>Le nombre de couleurs joue un r\u00f4le dans la coh\u00e9rence et l\u2019harmonisation de votre webdesign. Un seul coloris donnera un aspect monochrome et terne au site, alors que trop de couleurs peuvent rendre l\u2019exp\u00e9rience de navigation d\u00e9sagr\u00e9able. Les couleurs s\u00e9lectionn\u00e9es doivent couvrir chaque \u00e9l\u00e9ment de vos pages avec coh\u00e9rence.<\/p>\n<ul>\n<li>Le fond de vos pages&nbsp;: une ou deux couleurs pour diff\u00e9rencier les sections du site et rendre la lecture agr\u00e9able. Privil\u00e9giez les couleurs claires ou fonc\u00e9es. Le background de vos pages constitue la base du contraste.<\/li>\n<li>La typographie\u00a0: choisissez une seule couleur pour la police. Elle doit agr\u00e9ablement contraster avec le fond pour \u00eatre visible, lisible et encourager l\u2019internaute \u00e0 rester plus longtemps sur le site.<\/li>\n<li>Les call-to-action et liens\u00a0: ces \u00e9l\u00e9ments qui facilitent la navigation doivent avoir une couleur \u00e0 part. Cette derni\u00e8re doit \u00eatre vive, dynamique et captivante, tout en contrastant parfaitement avec le fond.<\/li>\n<li>La section t\u00e9moignage\u00a0: enfin, votre site doit contenir une derni\u00e8re couleur pour la section des t\u00e9moignages ou avis clients. Elle doit \u00eatre vive, mais moins tape-\u00e0-l\u2019\u0153il que celle utilis\u00e9e pour les call-to-action.<\/li>\n<\/ul>\n<h2>V\u00e9rifiez les combinaisons de couleurs<\/h2>\n<p>Vous avez choisi vos diff\u00e9rentes couleurs et leurs nuances\u00a0? \u00cates-vous s\u00fbr de votre choix\u00a0? Toutes les couleurs ne s\u2019harmonisent pas. Pour ne pas commettre d\u2019erreur (et faire fuir vos visiteurs\u00a0!), r\u00e9f\u00e9rez-vous \u00e0 ces r\u00e8gles de base\u00a0:<\/p>\n<ul>\n<li>Le blanc se combine avec du bleu fonc\u00e9, gris fonc\u00e9, rouge, rose ou violet. \u00c9vitez le contraste noir et blanc, trop brut pour l\u2019\u0153il. Il rend la lecture peu confortable.<\/li>\n<li>L\u2019orange s\u2019harmonise avec du noir ou du bleu fonc\u00e9. N\u00e9anmoins, attention \u00e0 l\u2019effet \u00ab\u00a0Halloween\u00a0\u00bb qui risque de d\u00e9tonner avec le message que veut envoyer votre marque.<\/li>\n<li>Le rouge est mis en valeur par le blanc ou le gris clair. C\u2019est une couleur id\u00e9ale pour vos call-to-action.<\/li>\n<li>Le vert fonctionne avec du noir s\u2019il est pastel, clair, pomme ou menthe. Si vous pr\u00e9f\u00e9rez un vert fonc\u00e9, accordez-le plut\u00f4t avec du blanc. Ce coloris convient parfaitement \u00e0 votre section t\u00e9moignage. Sauf si vous \u00eates dans le domaine du bio, du naturel ou de l\u2019alimentaire, le vert sera alors votre couleur dominante.<\/li>\n<\/ul>\n<p>Utilisez des outils comme <a href=\"https:\/\/www.palettedecouleur.net\/?utm_source=Codeur&amp;utm_medium=blog&amp;utm_campaign=choisir-contraste-couleur\" target=\"_blank\" rel=\"noopener\">PaletteDeCouleur.net<\/a> pour trouver des combinaisons de couleurs harmonieuses.<br \/>\n<a href=\"https:\/\/www.palettedecouleur.net\/?utm_source=Codeur&amp;utm_medium=blog&amp;utm_campaign=choisir-contraste-couleur\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-45795\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/05\/palettedecouleur-1024x527.jpg\" alt=\"Palettedecouleur.net outil gratuit de s\u00e9lection de palette de couleur\" width=\"700\" height=\"360\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/05\/palettedecouleur-1024x527.jpg 1024w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/05\/palettedecouleur-300x154.jpg 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/05\/palettedecouleur-768x395.jpg 768w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/05\/palettedecouleur-370x190.jpg 370w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/05\/palettedecouleur-270x139.jpg 270w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/05\/palettedecouleur-585x300.jpg 585w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/05\/palettedecouleur-570x293.jpg 570w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/05\/palettedecouleur-740x380.jpg 740w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/05\/palettedecouleur.jpg 1200w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<h2>G\u00e9rez le contraste du texte avec les images<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-27923\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/couleur-contrast-bleu-compressor.jpg\" alt=\"\" width=\"700\" height=\"467\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/couleur-contrast-bleu-compressor.jpg 700w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/couleur-contrast-bleu-compressor-300x200.jpg 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/couleur-contrast-bleu-compressor-370x247.jpg 370w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/couleur-contrast-bleu-compressor-270x180.jpg 270w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/couleur-contrast-bleu-compressor-570x380.jpg 570w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><br \/>\nL&#8217;exigence du niveau de contraste pour le texte et le fond est le m\u00eame avec les images de votre site web. Vous devez penser au fait que des personnes \u00e2g\u00e9es ou malvoyantes zooment souvent pour mieux lire un texte, en particulier s\u2019il se situe \u00e0 l\u2019int\u00e9rieur d\u2019une image.<br \/>\nAssurez-vous que le rapport de contraste reste au minimum \u00e0 4,5\u00a0: 1 entre le texte, les images et le fond.<br \/>\nLe cas \u00e9ch\u00e9ant, il existe quelques techniques pour creuser le contraste et rendre la police plus lisible\u00a0:<\/p>\n<ul>\n<li>Mettre un contour fin autour du texte.<\/li>\n<li>Ajouter une ombre au texte.<\/li>\n<li>Assombrir ou \u00e9clairer l\u2019image de fond.<\/li>\n<\/ul>\n<h2>Les outils pour v\u00e9rifier le contraste<\/h2>\n<p>Vous avez un doute sur une combinaison de couleurs\u00a0? Vous voulez conserver votre charte graphique, tout en optimisant le contraste\u00a0? Il existe des outils qui vous aident \u00e0 \u00e9laborer un nuancier agr\u00e9able pour les utilisateurs.<\/p>\n<h3>Adobe Color<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-27926\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/adobe-color-compressor.jpg\" alt=\"Adobe Color\" width=\"700\" height=\"467\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/adobe-color-compressor.jpg 700w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/adobe-color-compressor-300x200.jpg 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/adobe-color-compressor-370x247.jpg 370w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/adobe-color-compressor-270x180.jpg 270w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/adobe-color-compressor-570x380.jpg 570w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><br \/>\nEn premier lieu, s\u00e9lectionnez vos coloris principaux sur <a href=\"https:\/\/color.adobe.com\/fr\/create\" target=\"_blank\" rel=\"noopener\">Adobe Color<\/a>. L\u2019outil vous indiquera des nuances semblables et compl\u00e9mentaires. Vous pourrez choisir les teintes qui, selon vous, repr\u00e9sentent votre entreprise et constitueront la base de votre webdesign.<\/p>\n<h3>Hexnaw<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-27925\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/hex-naw-compressor.jpg\" alt=\"Hewnaw\" width=\"700\" height=\"467\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/hex-naw-compressor.jpg 700w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/hex-naw-compressor-300x200.jpg 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/hex-naw-compressor-370x247.jpg 370w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/hex-naw-compressor-270x180.jpg 270w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/hex-naw-compressor-570x380.jpg 570w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><br \/>\nAvec un outil comme <a href=\"https:\/\/hexnaw.com\/\" target=\"_blank\" rel=\"noopener\">Hexnaw<\/a>, vous pouvez tester le contraste et l\u2019accessibilit\u00e9 de votre syst\u00e8me de couleurs. Indiquez les codes Hex de votre palette et le site vous indique leur niveau d\u2019harmonie. Vous pourrez alors choisir les combinaisons qui g\u00e9n\u00e8rent le contraste le plus ergonomique.<\/p>\n<h3>Tanaguru Contrast Finder<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-27924\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/tanaguru-contrast-finder-compressor.jpg\" alt=\"Tanaguru\" width=\"700\" height=\"467\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/tanaguru-contrast-finder-compressor.jpg 700w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/tanaguru-contrast-finder-compressor-300x200.jpg 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/tanaguru-contrast-finder-compressor-370x247.jpg 370w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/tanaguru-contrast-finder-compressor-270x180.jpg 270w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/tanaguru-contrast-finder-compressor-570x380.jpg 570w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><br \/>\nCet outil se concentre sur le contraste entre le texte et le fond de couleur. Saisissez le coloris de votre police et celui du background, <a href=\"https:\/\/contrast-finder.tanaguru.com\/\" target=\"_blank\" rel=\"noopener\">Tanaguru Contrast Finder<\/a> vous indiquera s\u2019il est valide. Le cas \u00e9ch\u00e9ant, le site vous sugg\u00e8re de nouveaux contrastes, proches de votre design, en accord avec la r\u00e8glementation WCAG.<\/p>\n<blockquote><p><strong>\u00c0 lire aussi<\/strong>&nbsp;: <a href=\"https:\/\/graphiste.com\/pages\/charte-graphique\" target=\"_blank\" rel=\"noopener noreferrer\">Tout savoir sur une charte graphique<\/a><\/p><\/blockquote>\n<p>Le contraste des couleurs assure un niveau de confort \u00e0 vos visiteurs. L\u2019objectif est de les rassurer sur votre professionnalisme, tout en leur donnant envie de poursuivre leur progression sur le site. Plus votre webdesign est agr\u00e9able, plus les prospects resteront sur vos pages\u00a0!<br \/>\nPour \u00eatre certain de respecter les bonnes pratiques du webdesign et avoir un site web professionnel, faites appel \u00e0 des webdesigners freelances. <a href=\"https:\/\/www.codeur.com\/fonctionnement-codeur\">Postez votre projet sur Codeur.com<\/a> pour recevoir des devis rapidement.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les couleurs ont un impact sur l\u2019exp\u00e9rience client. Pour 85% des consommateurs, les teintes choisies influencent leur d\u00e9cision d&#8217;achat. Pourquoi\u00a0? Parce que les couleurs transmettent vos valeurs, votre expertise et votre image de marque. De m\u00eame,\u00a0le contraste entre les diff\u00e9rentes teintes de votre webdesign est essentiel pour optimiser la navigation. Mais, comment s\u2019assurer de choisir [&hellip;]<\/p>\n","protected":false},"author":69,"featured_media":27928,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[21],"tags":[39],"class_list":["post-27918","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-conseils"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment choisir le bon contraste de couleurs sur son site ?<\/title>\n<meta name=\"description\" content=\"Les couleurs ont un impact sur l\u2019exp\u00e9rience client. Pour 85% des consommateurs, les teintes choisies influencent leur d\u00e9cision d&#039;achat. Pourquoi\u00a0? Parce\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment choisir le bon contraste de couleurs sur son site ?\" \/>\n<meta property=\"og:description\" content=\"Les couleurs ont un impact sur l\u2019exp\u00e9rience client. Pour 85% des consommateurs, les teintes choisies influencent leur d\u00e9cision d&#039;achat. Pourquoi\u00a0? Parce\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/\" \/>\n<meta property=\"og:site_name\" content=\"Codeur.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/fr-fr.facebook.com\/codeurfreelance\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-08T09:50:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-05T15:13:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/contraste-couleurs-compressor.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"618\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"C\u00e9dric Reymbaut\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codeur\" \/>\n<meta name=\"twitter:site\" content=\"@codeur\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"C\u00e9dric Reymbaut\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/\"},\"author\":{\"name\":\"C\u00e9dric Reymbaut\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c\"},\"headline\":\"Comment choisir le bon contraste de couleurs sur son site&nbsp;?\",\"datePublished\":\"2019-11-08T09:50:09+00:00\",\"dateModified\":\"2025-09-05T15:13:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/\"},\"wordCount\":1024,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/contraste-couleurs-compressor.jpg\",\"keywords\":[\"Conseils\"],\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/\",\"url\":\"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/\",\"name\":\"Comment choisir le bon contraste de couleurs sur son site ?\",\"isPartOf\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/contraste-couleurs-compressor.jpg\",\"datePublished\":\"2019-11-08T09:50:09+00:00\",\"dateModified\":\"2025-09-05T15:13:07+00:00\",\"description\":\"Les couleurs ont un impact sur l\u2019exp\u00e9rience client. Pour 85% des consommateurs, les teintes choisies influencent leur d\u00e9cision d'achat. Pourquoi\u00a0? Parce\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/#primaryimage\",\"url\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/contraste-couleurs-compressor.jpg\",\"contentUrl\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/contraste-couleurs-compressor.jpg\",\"width\":1024,\"height\":618},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/www.codeur.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Graphisme\",\"item\":\"https:\/\/www.codeur.com\/blog\/graphisme\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Webdesign\",\"item\":\"https:\/\/www.codeur.com\/blog\/graphisme\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Comment choisir le bon contraste de couleurs sur son site&nbsp;?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#website\",\"url\":\"https:\/\/www.codeur.com\/blog\/\",\"name\":\"Codeur.com\",\"description\":\"codeur\",\"publisher\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codeur.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#organization\",\"name\":\"Codeur.com\",\"url\":\"https:\/\/www.codeur.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png\",\"contentUrl\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png\",\"width\":2560,\"height\":465,\"caption\":\"Codeur.com\"},\"image\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/fr-fr.facebook.com\/codeurfreelance\/\",\"https:\/\/x.com\/codeur\",\"https:\/\/www.linkedin.com\/company\/codeur\/\",\"https:\/\/www.youtube.com\/channel\/UCgj9ySM9xy3gdL8qBafl9Uw\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c\",\"name\":\"C\u00e9dric Reymbaut\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g\",\"caption\":\"C\u00e9dric Reymbaut\"},\"description\":\"Je suis UX\/UI designer, passionn\u00e9 par les outils comme Figma et Framer. Le week-end, je m\u2019amuse \u00e0 concevoir des SaaS sur Lovable.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/cedricreymbaut74\/\"],\"url\":\"https:\/\/www.codeur.com\/blog\/author\/cedric\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comment choisir le bon contraste de couleurs sur son site ?","description":"Les couleurs ont un impact sur l\u2019exp\u00e9rience client. Pour 85% des consommateurs, les teintes choisies influencent leur d\u00e9cision d'achat. Pourquoi\u00a0? Parce","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:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment choisir le bon contraste de couleurs sur son site ?","og_description":"Les couleurs ont un impact sur l\u2019exp\u00e9rience client. Pour 85% des consommateurs, les teintes choisies influencent leur d\u00e9cision d'achat. Pourquoi\u00a0? Parce","og_url":"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/","og_site_name":"Codeur.com","article_publisher":"https:\/\/fr-fr.facebook.com\/codeurfreelance\/","article_published_time":"2019-11-08T09:50:09+00:00","article_modified_time":"2025-09-05T15:13:07+00:00","og_image":[{"width":1024,"height":618,"url":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/contraste-couleurs-compressor.jpg","type":"image\/jpeg"}],"author":"C\u00e9dric Reymbaut","twitter_card":"summary_large_image","twitter_creator":"@codeur","twitter_site":"@codeur","twitter_misc":{"\u00c9crit par":"C\u00e9dric Reymbaut","Dur\u00e9e de lecture estim\u00e9e":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/#article","isPartOf":{"@id":"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/"},"author":{"name":"C\u00e9dric Reymbaut","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c"},"headline":"Comment choisir le bon contraste de couleurs sur son site&nbsp;?","datePublished":"2019-11-08T09:50:09+00:00","dateModified":"2025-09-05T15:13:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/"},"wordCount":1024,"commentCount":0,"publisher":{"@id":"https:\/\/www.codeur.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/contraste-couleurs-compressor.jpg","keywords":["Conseils"],"articleSection":["Webdesign"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/","url":"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/","name":"Comment choisir le bon contraste de couleurs sur son site ?","isPartOf":{"@id":"https:\/\/www.codeur.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/#primaryimage"},"image":{"@id":"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/contraste-couleurs-compressor.jpg","datePublished":"2019-11-08T09:50:09+00:00","dateModified":"2025-09-05T15:13:07+00:00","description":"Les couleurs ont un impact sur l\u2019exp\u00e9rience client. Pour 85% des consommateurs, les teintes choisies influencent leur d\u00e9cision d'achat. Pourquoi\u00a0? Parce","breadcrumb":{"@id":"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/#primaryimage","url":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/contraste-couleurs-compressor.jpg","contentUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/11\/contraste-couleurs-compressor.jpg","width":1024,"height":618},{"@type":"BreadcrumbList","@id":"https:\/\/www.codeur.com\/blog\/comment-choisir-contraste-couleurs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.codeur.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Graphisme","item":"https:\/\/www.codeur.com\/blog\/graphisme\/"},{"@type":"ListItem","position":3,"name":"Webdesign","item":"https:\/\/www.codeur.com\/blog\/graphisme\/webdesign\/"},{"@type":"ListItem","position":4,"name":"Comment choisir le bon contraste de couleurs sur son site&nbsp;?"}]},{"@type":"WebSite","@id":"https:\/\/www.codeur.com\/blog\/#website","url":"https:\/\/www.codeur.com\/blog\/","name":"Codeur.com","description":"codeur","publisher":{"@id":"https:\/\/www.codeur.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codeur.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.codeur.com\/blog\/#organization","name":"Codeur.com","url":"https:\/\/www.codeur.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png","contentUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png","width":2560,"height":465,"caption":"Codeur.com"},"image":{"@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/fr-fr.facebook.com\/codeurfreelance\/","https:\/\/x.com\/codeur","https:\/\/www.linkedin.com\/company\/codeur\/","https:\/\/www.youtube.com\/channel\/UCgj9ySM9xy3gdL8qBafl9Uw"]},{"@type":"Person","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c","name":"C\u00e9dric Reymbaut","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g","caption":"C\u00e9dric Reymbaut"},"description":"Je suis UX\/UI designer, passionn\u00e9 par les outils comme Figma et Framer. Le week-end, je m\u2019amuse \u00e0 concevoir des SaaS sur Lovable.","sameAs":["https:\/\/www.linkedin.com\/in\/cedricreymbaut74\/"],"url":"https:\/\/www.codeur.com\/blog\/author\/cedric\/"}]}},"_links":{"self":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/posts\/27918","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/users\/69"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/comments?post=27918"}],"version-history":[{"count":0,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/posts\/27918\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/media\/27928"}],"wp:attachment":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/media?parent=27918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/categories?post=27918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/tags?post=27918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}