{"id":11593,"date":"2019-06-26T10:30:11","date_gmt":"2019-06-26T08:30:11","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=11593"},"modified":"2025-08-20T17:19:26","modified_gmt":"2025-08-20T15:19:26","slug":"ajouter-contraste-design","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/","title":{"rendered":"7 fa\u00e7ons d&#8217;ajouter du contraste \u00e0 votre design"},"content":{"rendered":"<p>Le contraste n&#8217;est pas simplement un effet visuel. Dans l&#8217;exp\u00e9rience utilisateur, il est essentiel pour hi\u00e9rarchiser l&#8217;information, structurer la page et guider le visiteur.<\/p>\n<p>Comme toujours en design, le dosage est important. Un design trop uniforme avec les m\u00eames tailles de polices, de forme, de couleur, sera ennuyeux pour le lecteur. A contrario, un visuel envoyant trop de signaux pour les yeux deviendra vite illisible.<\/p>\n<p>Pour trouver le bon \u00e9quilibre, suivez ces 7 fa\u00e7ons d&#8217;ajouter du contraste \u00e0 votre design.<\/p>\n<p>&nbsp;<\/p>\n<h2>1. &#8220;Cassez&#8221; la structuration de la page et de vos textes<\/h2>\n<p>Ce n&#8217;est parce qu&#8217;il faut respecter une logique de lecture que votre structure de page doit \u00eatre parfaitement sym\u00e9trique. Une premi\u00e8re technique consiste \u00e0 <a href=\"https:\/\/graphiste.com\/blog\/utilisation-symetrie-asymetrie-design\" target=\"_blank\" rel=\"noopener noreferrer\">jouer des d\u00e9calages<\/a> pour cr\u00e9er de l&#8217;espace entre vos composants et les mettre en lumi\u00e8re.<\/p>\n<p><a href=\"https:\/\/www.kuoni.fr\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-11596 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/decalage-structure.jpg\" alt=\"D\u00e9calage structure\" width=\"700\" height=\"474\" \/><\/a><\/p>\n<p>Lorsque vous imaginez votre composition, vous pouvez aussi d\u00e9cider de mettre des lignes directrices en milieu de page au lieu d&#8217;avoir une homepage tr\u00e8s lin\u00e9aire. Le site du Cr\u00e9dit Agricole par exemple, propose une coupure au centre.<\/p>\n<p><a href=\"https:\/\/www.credit-agricole.fr\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-11597 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/coupure.jpg\" alt=\"Coupure au centre\" width=\"700\" height=\"369\" \/><\/a><\/p>\n<p>Vos boutons d&#8217;action ou textes en hyperliens peuvent aussi \u00eatre d\u00e9cal\u00e9s ou align\u00e9s \u00e0 droite pour les d\u00e9marquer.<\/p>\n<p>L&#8217;essentiel sera de conserver des rep\u00e8res visuels et des s\u00e9parations claires (avec un liser\u00e9 ou tout simplement un espace blanc) pour \u00e9viter l&#8217;effet chaotique.<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/neumorphism-fin-du-flat-design\">Neumorphism&nbsp;: vers la fin du flat design&nbsp;?<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>2. Jonglez avec les formes<\/h2>\n<p>Les formes et les illustrations viennent apporter des \u00e9l\u00e9ments de lecture dans votre page.<\/p>\n<p>Pour fuir la monotonie, vous pouvez jouer sur diff\u00e9rentes formes&nbsp;:<\/p>\n<ul>\n<li>Coins parfois arrondis, parfois carr\u00e9s ;<\/li>\n<li>Blocs carr\u00e9s + une offre rehauss\u00e9e dans un cercle ;<\/li>\n<li>Formes g\u00e9om\u00e9triques Vs <a href=\"https:\/\/graphiste.com\/blog\/symbolique-formes-culturelles-logos\" target=\"_blank\" rel=\"noopener noreferrer\">naturelles<\/a> (c&#8217;est-\u00e0-dire des formes fluides, inspir\u00e9es de la nature).<\/li>\n<\/ul>\n<p>Ajoutez du relief \u00e0 vos compositions en jouant sur la superposition d&#8217;images ou de layers. Le site de cette agence mixe asym\u00e9trie et superposition pour un effet r\u00e9ussi&nbsp;:<\/p>\n<p><a href=\"https:\/\/www.biggerpicture.agency\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-11598 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/forme-layer.jpg\" alt=\"Forme et layer superposition\" width=\"700\" height=\"371\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h2>3. Variez les couleurs pour cr\u00e9er du contraste<\/h2>\n<p>Pour ajouter du contraste \u00e0 vos designs, vous devez utiliser les couleurs.<\/p>\n<p>Il existe des centaines de possibilit\u00e9s pour les marier ou les opposer, tant que le rendu reste harmonieux&nbsp;:<\/p>\n<ul>\n<li><strong>Technique n\u00b01<\/strong>&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/effets-degrade\" target=\"_blank\" rel=\"noopener noreferrer\">les d\u00e9grad\u00e9s<\/a>. Qu&#8217;ils soient monochromatiques ou avec des couleurs secondaires, ils cr\u00e9ent tout de suite un effet acidul\u00e9 et gai.<\/li>\n<li><strong>Technique n\u00b02<\/strong>&nbsp;: superposer des couleurs compl\u00e9mentaires en choisissant une teinte &#8220;chaude&#8221; et une teinte &#8220;froide&#8221;. Pour les composants et les fonds vous devrez alors utiliser des couleurs neutres ou pastels (blanc, beige, p\u00eache, gris).<\/li>\n<li><strong>Technique n\u00b03<\/strong>&nbsp;: cr\u00e9er le contraste et guider l&#8217;oeil du lecteur avec un effet clair \/ obscur (proche du d\u00e9grad\u00e9 monochrome).<\/li>\n<li><strong>Technique n\u00b04<\/strong>&nbsp;: utiliser les m\u00e9thodes de saturation d&#8217;une couleur et jouer \u00e9galement sur la transparence.<\/li>\n<\/ul>\n<p>Pensez \u00e0 vos call-to-action. Il ne doivent pas se fondre dans l&#8217;ensemble mais plut\u00f4t ressortir et contraster avec le reste des couleurs utilis\u00e9es dans le site.<\/p>\n<figure id=\"attachment_11599\" aria-describedby=\"caption-attachment-11599\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-11599 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/contraste-couleur.png\" alt=\"Contraste couleur\" width=\"700\" height=\"525\" \/><figcaption id=\"caption-attachment-11599\" class=\"wp-caption-text\">Source&nbsp;: <a href=\"https:\/\/dribbble.com\/shots\/6424120-Fashion-Ecommerce-Website\" target=\"_blank\" rel=\"noopener noreferrer\">Tubik<\/a><\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h2>4. Aventurez-vous dans les animations CSS<\/h2>\n<p>Vigilance et prudence avant d&#8217;utiliser du design interactif. C&#8217;est pourtant un des meilleurs moyens d&#8217;ajouter du relief \u00e0 vos cr\u00e9ations.<\/p>\n<p>Par exemple sur un bouton, changez son aspect au survol. Jouez sur un ton diff\u00e9rent ou un effet vide \/ plein.<\/p>\n<p>Vous pouvez aussi vous amuser et aller plus loin comme dans ces exemples de <a href=\"https:\/\/goooders.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">goooders.com<\/a> ou <a href=\"https:\/\/huru.rocks\/\" target=\"_blank\" rel=\"noopener noreferrer\">Huru.rocks<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-11603 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/design-interactif.jpg\" alt=\"Design interactif\" width=\"700\" height=\"379\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>5. Jouez avec les polices<\/h2>\n<p>Les th\u00e8mes des CMS d\u00e9terminent des styles diff\u00e9rents pour les titres et paragraphes. Faites de m\u00eame en adoptant des <a href=\"https:\/\/graphiste.com\/blog\/impression-creer-gabarits-de-fichiers\">gabarits vari\u00e9s<\/a> dans vos cr\u00e9ations.<\/p>\n<p>Plusieurs m\u00e9thodes permettent de diff\u00e9rencier vos polices&nbsp;:<\/p>\n<ul>\n<li>La taille de vos textes ;<\/li>\n<li>Les diff\u00e9rentes typographies. Vous pouvez choisir une police complexe ou manuscrite pour certains titres puis une police simple et lisible pour vos paragraphes ;<\/li>\n<li>Pour une m\u00eame typographie, adaptez la graisse. La police HELVETICA NEUE en poss\u00e8de 14&nbsp;: de fin \u00e0 condens\u00e9 noir en passant par l&#8217;italique. Utilisez \u00e9galement la combinaison serif (polices anguleuses) \/ sans serif (polices lisses).<\/li>\n<\/ul>\n<p>Enfin, pensez \u00e0 conserver des espacements dans les lettres de vos textes et entre vos paragraphes et titres. Si vous condensez trop vos titres et vos textes, vous rendez l&#8217;ensemble uniforme et illisible.<\/p>\n<blockquote><p>Lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/definir-interligne-textes\" target=\"_blank\" rel=\"noopener noreferrer\">Comment d\u00e9finir le bon interligne pour vos textes&nbsp;?<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>6. Maniez les patterns et textures avec brio<\/h2>\n<p>Que ce soit pour une police ou un background, vous pouvez mixer des styles flat et des allures plus en relief. De la m\u00eame mani\u00e8re, vous pouvez opposer un effet rugueux ou crayonn\u00e9 \u00e0 une surface parfaitement lisse.<\/p>\n<p>Les patterns sont des effets de mati\u00e8re ou des pictos que vous pourrez utiliser en fond. Ils sont essentiels pour donner du caract\u00e8re \u00e0 votre marque et peuvent \u00eatre d\u00e9clin\u00e9s sur de nombreux supports (background de site, en relief sur vos cartes de visite, en papier peint de l&#8217;entreprise, etc.)<\/p>\n<p>&nbsp;<\/p>\n<h2>7. Cr\u00e9ez la surprise<\/h2>\n<p>Un des premiers concepts en UI est de respecter les standards pour placer vos \u00e9l\u00e9ments aux endroits o\u00f9 les internautes ont l&#8217;habitude de cliquer. En dehors de cela, les interfaces utilisateurs peuvent et doivent susciter la curiosit\u00e9.<\/p>\n<p>Un des moyens d&#8217;apporter du contraste \u00e0 vos designs est d&#8217;y ajouter quelque chose d&#8217;inattendu, comme cette montagne dans le bloc du site Wix ou encore ce v\u00e9lo en plein Manhattan.<\/p>\n<p><a href=\"https:\/\/fr.wix.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-11605 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/contraste-wix.jpg\" alt=\"Contraste Wix\" width=\"700\" height=\"517\" \/><\/a><\/p>\n<p>Ajouter du contraste \u00e0 ses visuels lors de leur conception est essentiel pour capter l&#8217;attention des internautes et ne pas rendre vos sites ennuyeux ou illisibles.<\/p>\n<p>Nous avons parcouru 7 techniques pour cr\u00e9er du relief sur vos r\u00e9alisations. Ne les m\u00e9langez pas toutes&nbsp;! Choisissez deux ou trois m\u00e9thodes maximum et cr\u00e9ez ainsi de fabuleux designs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le contraste n&#8217;est pas simplement un effet visuel. Dans l&#8217;exp\u00e9rience utilisateur, il est essentiel pour hi\u00e9rarchiser l&#8217;information, structurer la page et guider le visiteur. Comme toujours en design, le dosage est important. Un design trop uniforme avec les m\u00eames tailles de polices, de forme, de couleur, sera ennuyeux pour le lecteur. A contrario, un visuel [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":11606,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-11593","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>7 fa\u00e7ons d&#039;ajouter du contraste \u00e0 votre design - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Le contraste n&#039;est pas simplement un effet visuel. Dans l&#039;exp\u00e9rience utilisateur, il est essentiel pour hi\u00e9rarchiser l&#039;information, structurer la page et\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"7 fa\u00e7ons d&#039;ajouter du contraste \u00e0 votre design - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Le contraste n&#039;est pas simplement un effet visuel. Dans l&#039;exp\u00e9rience utilisateur, il est essentiel pour hi\u00e9rarchiser l&#039;information, structurer la page et\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Graphiste.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/graphistesfreelances\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-26T08:30:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:19:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/ajouter-contraste-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"423\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Laura Michaud\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Laura Michaud\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/\"},\"author\":{\"name\":\"Laura Michaud\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2\"},\"headline\":\"7 fa\u00e7ons d&#8217;ajouter du contraste \u00e0 votre design\",\"datePublished\":\"2019-06-26T08:30:11+00:00\",\"dateModified\":\"2025-08-20T15:19:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/\"},\"wordCount\":982,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/ajouter-contraste-1.jpg\",\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/\",\"url\":\"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/\",\"name\":\"7 fa\u00e7ons d'ajouter du contraste \u00e0 votre design - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/ajouter-contraste-1.jpg\",\"datePublished\":\"2019-06-26T08:30:11+00:00\",\"dateModified\":\"2025-08-20T15:19:26+00:00\",\"description\":\"Le contraste n'est pas simplement un effet visuel. Dans l'exp\u00e9rience utilisateur, il est essentiel pour hi\u00e9rarchiser l'information, structurer la page et\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/ajouter-contraste-1.jpg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/ajouter-contraste-1.jpg\",\"width\":850,\"height\":423},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/graphiste.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"7 fa\u00e7ons d&#8217;ajouter du contraste \u00e0 votre design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/graphiste.com\/blog\/#website\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"name\":\"Graphiste.com\",\"description\":\"graphiste\",\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/graphiste.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\",\"name\":\"Graphiste.com\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"width\":1,\"height\":1,\"caption\":\"Graphiste.com\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/graphistesfreelances\",\"https:\/\/x.com\/Graphistecom\",\"https:\/\/www.linkedin.com\/company\/graphiste-com\/\",\"https:\/\/fr.pinterest.com\/Graphiste_Com\",\"https:\/\/www.instagram.com\/graphiste_com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2\",\"name\":\"Laura Michaud\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g\",\"caption\":\"Laura Michaud\"},\"description\":\"Laura connait tous les meilleurs outils pour g\u00e9rer des projets et une entreprise. Cr\u00e9ative, c'est aussi une sp\u00e9cialiste des outils de cr\u00e9ation graphique pour faire briller une entreprise.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/michaudlaura\/\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/laura\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"7 fa\u00e7ons d'ajouter du contraste \u00e0 votre design - Graphiste Blog","description":"Le contraste n'est pas simplement un effet visuel. Dans l'exp\u00e9rience utilisateur, il est essentiel pour hi\u00e9rarchiser l'information, structurer la page et","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:\/\/graphiste.com\/blog\/ajouter-contraste-design\/","og_locale":"fr_FR","og_type":"article","og_title":"7 fa\u00e7ons d'ajouter du contraste \u00e0 votre design - Graphiste Blog","og_description":"Le contraste n'est pas simplement un effet visuel. Dans l'exp\u00e9rience utilisateur, il est essentiel pour hi\u00e9rarchiser l'information, structurer la page et","og_url":"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2019-06-26T08:30:11+00:00","article_modified_time":"2025-08-20T15:19:26+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/ajouter-contraste-1.jpg","type":"image\/jpeg"}],"author":"Laura Michaud","twitter_card":"summary_large_image","twitter_creator":"@Graphistecom","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Laura Michaud","Dur\u00e9e de lecture estim\u00e9e":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/"},"author":{"name":"Laura Michaud","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2"},"headline":"7 fa\u00e7ons d&#8217;ajouter du contraste \u00e0 votre design","datePublished":"2019-06-26T08:30:11+00:00","dateModified":"2025-08-20T15:19:26+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/"},"wordCount":982,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/ajouter-contraste-1.jpg","articleSection":["Webdesign"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/","url":"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/","name":"7 fa\u00e7ons d'ajouter du contraste \u00e0 votre design - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/ajouter-contraste-1.jpg","datePublished":"2019-06-26T08:30:11+00:00","dateModified":"2025-08-20T15:19:26+00:00","description":"Le contraste n'est pas simplement un effet visuel. Dans l'exp\u00e9rience utilisateur, il est essentiel pour hi\u00e9rarchiser l'information, structurer la page et","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/ajouter-contraste-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/06\/ajouter-contraste-1.jpg","width":850,"height":423},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/ajouter-contraste-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webdesign","item":"https:\/\/graphiste.com\/blog\/webdesign\/"},{"@type":"ListItem","position":3,"name":"7 fa\u00e7ons d&#8217;ajouter du contraste \u00e0 votre design"}]},{"@type":"WebSite","@id":"https:\/\/graphiste.com\/blog\/#website","url":"https:\/\/graphiste.com\/blog\/","name":"Graphiste.com","description":"graphiste","publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphiste.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/graphiste.com\/blog\/#organization","name":"Graphiste.com","url":"https:\/\/graphiste.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","width":1,"height":1,"caption":"Graphiste.com"},"image":{"@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/graphistesfreelances","https:\/\/x.com\/Graphistecom","https:\/\/www.linkedin.com\/company\/graphiste-com\/","https:\/\/fr.pinterest.com\/Graphiste_Com","https:\/\/www.instagram.com\/graphiste_com\/"]},{"@type":"Person","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2","name":"Laura Michaud","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g","caption":"Laura Michaud"},"description":"Laura connait tous les meilleurs outils pour g\u00e9rer des projets et une entreprise. Cr\u00e9ative, c'est aussi une sp\u00e9cialiste des outils de cr\u00e9ation graphique pour faire briller une entreprise.","sameAs":["https:\/\/www.linkedin.com\/in\/michaudlaura\/"],"url":"https:\/\/graphiste.com\/blog\/author\/laura\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/11593","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=11593"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/11593\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/11606"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=11593"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=11593"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=11593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}