{"id":6303,"date":"2023-10-16T19:33:27","date_gmt":"2023-10-16T17:33:27","guid":{"rendered":"https:\/\/graphizm.fr\/greta\/?p=6303"},"modified":"2025-11-16T22:30:55","modified_gmt":"2025-11-16T21:30:55","slug":"construction-nuanciers-fonctionnels","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/non-classe\/construction-nuanciers-fonctionnels\/","title":{"rendered":"La construction de nuanciers fonctionnels"},"content":{"rendered":"\n<p class=\"has-subtle-background-background-color has-background\">Dans la pratique, vous serez confront\u00e9s \u00e0 la n\u00e9cessit\u00e9 d&rsquo;<strong>utiliser des nuanciers de couleurs privil\u00e9giant la bonne lisibilit\u00e9 des textes<\/strong>. Vous devrez veillez \u00e0 ce que le ratio de contraste entre la couleur de ces textes et la couleur du fond soit suffisant. Ce cours vous donne les indications n\u00e9cessaires pour construire des nuanciers garantissant la lisibilit\u00e9 des textes.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Sommaire<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #6b6b6b;color:#6b6b6b\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #6b6b6b;color:#6b6b6b\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/graphizm.fr\/greta\/non-classe\/construction-nuanciers-fonctionnels\/#Les_normes_daccessibilite\" >Les normes d\u2019accessibilit\u00e9<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/graphizm.fr\/greta\/non-classe\/construction-nuanciers-fonctionnels\/#Les_textes_officiels\" >Les textes officiels<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/graphizm.fr\/greta\/non-classe\/construction-nuanciers-fonctionnels\/#Definition_dun_nuancier_ou_palette_fonctionnelle\" >D\u00e9finition d&rsquo;un nuancier ou palette fonctionnelle<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/graphizm.fr\/greta\/non-classe\/construction-nuanciers-fonctionnels\/#Outils_de_controle_du_ratio_de_contraste_des_couleurs\" >Outils de contr\u00f4le du ratio de contraste des couleurs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/graphizm.fr\/greta\/non-classe\/construction-nuanciers-fonctionnels\/#Outils_de_construction_de_palettes_fonctionnelles\" >Outils de construction de palettes fonctionnelles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/graphizm.fr\/greta\/non-classe\/construction-nuanciers-fonctionnels\/#Palettes_de_couleurs_moyennes\" >Palettes de couleurs moyennes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/graphizm.fr\/greta\/non-classe\/construction-nuanciers-fonctionnels\/#Nuanciers_fonctionnels_prets_a_lemploi\" >Nuanciers fonctionnels pr\u00eats \u00e0 l&#8217;emploi<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/graphizm.fr\/greta\/non-classe\/construction-nuanciers-fonctionnels\/#Les_nuanciers_fonctionnels_de_Matthew_Howel\" >Les nuanciers fonctionnels de Matthew Howel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/graphizm.fr\/greta\/non-classe\/construction-nuanciers-fonctionnels\/#Les_nuanciers_fonctionnels_de_Yves_Goguely\" >Les nuanciers fonctionnels de Yves Goguely<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/graphizm.fr\/greta\/non-classe\/construction-nuanciers-fonctionnels\/#Outils_necessitant_plus_de_travail_de_mise_au_point\" >Outils n\u00e9cessitant plus de travail de mise au point<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/graphizm.fr\/greta\/non-classe\/construction-nuanciers-fonctionnels\/#Outil_de_construction_de_nuanciers_base_sur_la_theorie_des_couleurs\" >Outil de construction de nuanciers bas\u00e9 sur la th\u00e9orie des couleurs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/graphizm.fr\/greta\/non-classe\/construction-nuanciers-fonctionnels\/#Outils_de_construction_de_nuanciers_etages_allant_dune_teinte_a_une_autre\" >Outils de construction de nuanciers \u00e9tag\u00e9s allant d&rsquo;une teinte \u00e0 une autre<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_normes_daccessibilite\"><\/span>Les normes d\u2019accessibilit\u00e9<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Les normes d\u2019accessibilit\u00e9 mettent l\u2019accent (entre autres exigences)  sur la <strong>n\u00e9cessit\u00e9 de distinguer la forme sur le fond, pour toutes les personnes, y compris celles qui ne peuvent pas distinguer toutes les couleurs<\/strong>.<\/p>\n\n\n\n<p>Ces normes mettent donc l\u2019accent sur le contraste de luminosit\u00e9 entre la forme et le fond sur lequel cette forme se d\u00e9tache. <strong>Le contraste de luminosit\u00e9 entre deux couleurs joue un r\u00f4le cl\u00e9 dans la lisibilit\u00e9 des textes<\/strong> affich\u00e9s avec ces couleurs.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\"><strong>Ces normes s&rsquo;av\u00e8rent contraignantes<\/strong> dans le design des sites Web. Elles sont cependant n\u00e9cessaires pour nous amener \u00e0 prendre en compte les diff\u00e9rents publics auxquels sont destin\u00e9s nos produits de communication&nbsp;!<\/p>\n\n\n\n<p>La traduction fran\u00e7aise agr\u00e9\u00e9e des&nbsp;<strong><a href=\"https:\/\/nell-associes.com\/blog\/wcag-2-1-mieux-comprendre-laccessibilite\/\">WCAG 2.1<\/a><\/strong>&nbsp;indique&nbsp;: \u00ab&nbsp;<em>Afin de r\u00e9pondre aux besoins de divers groupes et de diff\u00e9rents contextes, trois niveaux de conformit\u00e9 ont \u00e9t\u00e9 d\u00e9finis&nbsp;: A (le plus bas), AA et AAA (le plus \u00e9lev\u00e9).<\/em>&nbsp;\u00bb<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\"><strong>L\u2019Union europ\u00e9enne recommande le niveau double A<\/strong> (AA).&nbsp;C\u2019est \u00e9galement le niveau qu\u2019on attend pour les sites concern\u00e9s par le RGAA (R\u00e8glement G\u00e9n\u00e9ral d&rsquo;Am\u00e9lioration de l&rsquo;Accessibilit\u00e9, \u00e9quivalent europ\u00e9en du WCAG). Pour \u00eatre conforme au RGAA, il est n\u00e9cessaire de <strong>valider l\u2019ensemble des crit\u00e8res A et AA<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_textes_officiels\"><\/span>Les textes officiels<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/accessibilite.numerique.gouv.fr\/methode\/criteres-et-tests\/#3\" target=\"_blank\">https:\/\/accessibilite.numerique.gouv.fr\/methode\/criteres-et-tests\/#3<\/a><br>\u2014 <strong>Normes d&rsquo;accessibilit\u00e9 concernant la couleur des textes<\/strong> sur les sites Web des institutions gouvernementales fran\u00e7aises<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.technologie-handicap-accessibilite.net\/dossiers\/accessibilite-web\/accessibilite-web-les-normes\/\" target=\"_blank\">https:\/\/www.technologie-handicap-accessibilite.net\/dossiers\/accessibilite-web\/accessibilite-web-les-normes\/<\/a>&nbsp;<br>\u2014 Pr\u00e9sentation g\u00e9n\u00e9rale des <strong>normes d\u2019accessibilit\u00e9 du Web<\/strong><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3.org\/Translations\/WCAG20-fr\/#visual-audio-contrast\" target=\"_blank\">https:\/\/www.w3.org\/Translations\/WCAG20-fr\/#visual-audio-contrast<\/a>&nbsp;<br>\u2014 Textes officiels du <strong>WCAG <\/strong>(Web Content Accessibility Guidelines), traduits en fran\u00e7ais<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">R\u00e9sum\u00e9 des consignes officielles au niveau europ\u00e9en<\/h4>\n\n\n\n<p>La <a rel=\"noreferrer noopener\" href=\"https:\/\/accessibilite.numerique.gouv.fr\/methode\/criteres-et-tests\/#3\" data-type=\"link\" data-id=\"https:\/\/accessibilite.numerique.gouv.fr\/methode\/criteres-et-tests\/#3\" target=\"_blank\"><strong>norme AA &#8211; RGAA 4.1.<\/strong>2<\/a> impose, concernant le texte d&rsquo;une page Web, le respect des consignes suivantes (j&rsquo;ai simplifi\u00e9 la formulation du texte officiel, beaucoup plus d\u00e9taill\u00e9)&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dans chaque page web, le texte et le texte en image <strong>sans effet de graisse<\/strong> d\u2019une taille restitu\u00e9e <strong>inf\u00e9rieure \u00e0 24px<\/strong> (18pt) doit v\u00e9rifier la condition suivante&nbsp;:&nbsp; l<a href=\"https:\/\/accessibilite.numerique.gouv.fr\/methode\/criteres-et-tests\/#3.2.1\"><\/a>e rapport de&nbsp;contraste&nbsp;entre le texte et son arri\u00e8re-plan est de <strong>4.5:1<\/strong>, au moins&nbsp;;<\/li>\n\n\n\n<li>Dans chaque page web, le texte et le texte en image <strong>en gras<\/strong> d\u2019une taille restitu\u00e9e <strong>inf\u00e9rieure \u00e0 18,5px<\/strong> (14pt) doit v\u00e9rifier la condition suivante&nbsp;: le rapport de&nbsp;contraste&nbsp;entre le texte et son arri\u00e8re-plan est de <strong>4.5:1, au moins&nbsp;<\/strong>;<\/li>\n\n\n\n<li>Dans chaque page web, le texte et le texte en image <strong>sans effet de graisse<\/strong> d\u2019une taille restitu\u00e9e <strong>sup\u00e9rieure ou \u00e9gale \u00e0 24px<\/strong> (18pt) doit v\u00e9rifier la condition suivante&nbsp;: le rapport de&nbsp;contraste&nbsp;entre le texte et son arri\u00e8re-plan est de <strong>3:1<\/strong>, au moins&nbsp;;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Definition_dun_nuancier_ou_palette_fonctionnelle\"><\/span>D\u00e9finition d&rsquo;un nuancier ou palette fonctionnelle<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Nous nommerons palettes ou nuanciers fonctionnel(le)s ou accessibles <strong>les palettes ou nuanciers tenant compte des normes d&rsquo;accessibilit\u00e9<\/strong>. Nous parlerons aussi de palettes ou nuanciers dont les valeurs sont r\u00e9guli\u00e8rement \u00e9tag\u00e9es.<\/p>\n\n\n\n<p>Voici un sch\u00e9ma mettant en <strong>rapport des niveaux de luminosit\u00e9 et des ratios de contraste normalis\u00e9s<\/strong> :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/luminosite-et-ratios-contraste.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"422\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/luminosite-et-ratios-contraste-1024x422.png\" alt=\"\" class=\"wp-image-6438\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/luminosite-et-ratios-contraste-1024x422.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/luminosite-et-ratios-contraste-600x247.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/luminosite-et-ratios-contraste-768x316.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/luminosite-et-ratios-contraste-1536x633.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/luminosite-et-ratios-contraste-2048x844.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/luminosite-et-ratios-contraste-1200x494.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/luminosite-et-ratios-contraste-1980x816.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>\u279c&nbsp;<strong>Exercices<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choisissez des couleurs dans <a rel=\"noreferrer noopener\" href=\"https:\/\/www.hsluv.org\" data-type=\"link\" data-id=\"https:\/\/www.hsluv.org\" target=\"_blank\">hsluv.org<\/a> en fixant leur luminosit\u00e9 sur les pourcentages propos\u00e9s dans le sch\u00e9ma ci-dessus et <strong>v\u00e9rifiez avec un outil de contr\u00f4le de ratio de contraste si les ratios affich\u00e9s sur le blanc et le noir sont justes<\/strong> (\u00e0 peu de choses pr\u00e8s et dans la mesure o\u00f9 ils sont conformes aux normes vis\u00e9es).<\/li>\n<\/ul>\n\n\n\n<p>\u279c&nbsp;Il se peut, pour certaines teintes, que vous soyez amen\u00e9s \u00e0 l\u00e9g\u00e8rement \u00e9claircir ou assombrir la couleur choisie pour atteindre la norme annonc\u00e9e. Comme il est pr\u00e9cis\u00e9 sur le sch\u00e9ma, les valeurs de luminosit\u00e9 sont approchantes. Nous sommes ici confront\u00e9s \u00e0 ce que nous pourrions nommer les niveaux cl\u00e9s de luminosit\u00e9.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/d0404F-hsluv.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/d0404F-hsluv-1024x572.png\" alt=\"\" class=\"wp-image-6447\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/d0404F-hsluv-1024x572.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/d0404F-hsluv-600x335.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/d0404F-hsluv-768x429.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/d0404F-hsluv-1536x858.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/d0404F-hsluv-2048x1144.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/d0404F-hsluv-1200x671.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/d0404F-hsluv-1980x1106.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choisissez une couleur moyenne (49% de lumnosit\u00e9) et <strong>trouvez une couleur proche du blanc pr\u00e9sentant, avec la couleur moyenne, un ratio de 4,5 (norme AA)<\/strong>. Utilisez pour cela un outil de contr\u00f4le du ratio de contraste (liste ci-dessous).<\/li>\n<\/ul>\n\n\n\n<p>\u279c&nbsp;Vous disposerez alors d&rsquo;une teinte de blanc color\u00e9 (blanc cass\u00e9), utilisable \u00e0 la place du blanc pure dans les nuanciers de 3 couleurs r\u00e9versibles respectant la norme AA.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/colorable-AA.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"747\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/colorable-AA-1024x747.png\" alt=\"\" class=\"wp-image-6450\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/colorable-AA-1024x747.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/colorable-AA-600x438.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/colorable-AA-768x560.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/colorable-AA-1536x1120.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/colorable-AA-2048x1494.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/colorable-AA-1200x875.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/colorable-AA-1980x1444.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Interface de <a href=\"https:\/\/colorable.jxnblk.com\" data-type=\"link\" data-id=\"https:\/\/colorable.jxnblk.com\" target=\"_blank\" rel=\"noreferrer noopener\">Colorable<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Construisez <strong>une palette de 5 couleurs<\/strong> dont le noir et le blanc, int\u00e9grant une couleur claire et une couleur fonc\u00e9e. <strong>Conservez la palette<\/strong> mise au point en utilisant l&rsquo;outil \u201cExport\u201d propos\u00e9 sur <a rel=\"noreferrer noopener\" href=\"https:\/\/coolors.co\" data-type=\"link\" data-id=\"https:\/\/coolors.co\" target=\"_blank\">coolors.co<\/a>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"589\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palette-fonctionnelle-coolors-1024x589.png\" alt=\"\" class=\"wp-image-6441\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palette-fonctionnelle-coolors-1024x589.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palette-fonctionnelle-coolors-600x345.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palette-fonctionnelle-coolors-768x442.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palette-fonctionnelle-coolors-1536x884.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palette-fonctionnelle-coolors-2048x1178.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palette-fonctionnelle-coolors-1200x690.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palette-fonctionnelle-coolors-1980x1139.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Sur coolors.co, <strong>les palettes sont sauvegardables sous forme d&rsquo;URL<\/strong> (dans Deskyo, par exemple). L&rsquo;URL de la palette ci-dessus est la suivante&nbsp;: <a rel=\"noreferrer noopener\" href=\"https:\/\/coolors.co\/ffffff-f5cd70-d0404f-1c2f36-000000\" target=\"_blank\">https:\/\/coolors.co\/ffffff-f5cd70-d0404f-1c2f36-000000<\/a>.<\/p>\n\n\n\n<p>Sur l&rsquo;image ci-dessous figurent les ratios de contraste mesur\u00e9s avec<a rel=\"noreferrer noopener\" href=\"https:\/\/colorable.jxnblk.com\" data-type=\"link\" data-id=\"https:\/\/colorable.jxnblk.com\" target=\"_blank\"> Colorable<\/a>. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"589\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palette-fonctionnelle-avec-ratios-1024x589.jpg\" alt=\"\" class=\"wp-image-6443\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palette-fonctionnelle-avec-ratios-1024x589.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palette-fonctionnelle-avec-ratios-600x345.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palette-fonctionnelle-avec-ratios-768x442.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palette-fonctionnelle-avec-ratios-1536x884.jpg 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palette-fonctionnelle-avec-ratios-2048x1178.jpg 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palette-fonctionnelle-avec-ratios-1200x690.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palette-fonctionnelle-avec-ratios-1980x1139.jpg 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Annotations effectu\u00e9es avec Skitch<\/figcaption><\/figure>\n<\/div>\n\n\n<p>\u279c&nbsp;Quelles sont les couleurs qui ne doivent jamais \u00eatre utilis\u00e9es l&rsquo;une sur l&rsquo;autre pour pr\u00e9senter du texte&nbsp;? Pensez-vous qu&rsquo;il soit possible d&rsquo;<strong>utiliser un blanc cass\u00e9 \u00e0 la place du blanc #fff<\/strong>, sans modifier les autres couleurs&nbsp;?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Outils_de_controle_du_ratio_de_contraste_des_couleurs\"><\/span>Outils de contr\u00f4le du ratio de contraste des couleurs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Voici une liste d&rsquo;outils permettant de contr\u00f4ler le ratio de contraste entre deux couleurs.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/color.adobe.com\/fr\/create\/color-contrast-analyzer\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/color.adobe.com\/fr\/create\/color-contrast-analyzer<\/a>&nbsp;<br>\u2014 Color Contrast Analyser (Adobe Color)<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/colourcontrast.cc\/\" target=\"_blank\">https:\/\/colourcontrast.cc\/<\/a>&nbsp;<br>\u2014 Colour Contrast Checker<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/colorable.jxnblk.com\/\" target=\"_blank\">https:\/\/colorable.jxnblk.com\/<\/a>&nbsp;<br>\u2014 Colorable<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/color.review\/\" target=\"_blank\">https:\/\/color.review\/<\/a>&nbsp;<br>\u2014 Color Review (limites de ratios visibles)<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/coolors.co\/contrast-checker\/112a46-acc8e5\" target=\"_blank\">https:\/\/coolors.co\/contrast-checker\/112a46-acc8e5<\/a>&nbsp;<br>\u2014 Color Contrast Checker<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/contrast-finder.tanaguru.com\/\" target=\"_blank\">https:\/\/contrast-finder.tanaguru.com\/<\/a>&nbsp;<br>\u2014 Tanaguru Contrast Finder<\/li>\n<\/ul>\n\n\n\n<p>\u279c&nbsp;<strong>Exercices<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Construisez un nuancier fonctionnel de 3 couleurs<\/strong> <strong>r\u00e9versibles<\/strong>, <strong>respectant la norme AA Large<\/strong>, \u00e0 partir d\u2019une s\u00e9lection al\u00e9atoire de 3 couleurs sourdes (<em>avec&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/naknode\/full\/OVoywr\" target=\"_blank\">Muted Colors<\/a>&nbsp;sur CodePen<\/em>).<\/li>\n\n\n\n<li><strong>Construisez<\/strong> (<em>avec <a rel=\"noreferrer noopener\" href=\"https:\/\/color.review\/\" data-type=\"link\" data-id=\"https:\/\/color.review\/\" target=\"_blank\">Color Review <\/a>et <a rel=\"noreferrer noopener\" href=\"https:\/\/colorable.jxnblk.com\/\" data-type=\"link\" data-id=\"https:\/\/colorable.jxnblk.com\/\" target=\"_blank\">Colorable<\/a><\/em>), \u00e0 partir d\u2019une photo de votre choix, <strong>un nuancier fonctionnel de 3 couleurs r\u00e9versibles respectant la norme AA Large<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Outils_de_construction_de_palettes_fonctionnelles\"><\/span>Outils de construction de palettes fonctionnelles<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Il existe des outils mis au point pour (sur le papier&#8230;) faciliter le travail des designers graphiques en mati\u00e8re de cr\u00e9ation de palettes fonctionnelles. Ils ne sont pas d&rsquo;une prise en main ais\u00e9e. Leonardo Color a \u00e9t\u00e9 un temps relativement fonctionnel, de mon point de vue il ne l&rsquo;est plus du tout.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/leonardocolor.io\/theme\" target=\"_blank\">https:\/\/leonardocolor.io\/theme<\/a><br>\u2014 <strong>Outil mis au point par Adobe<\/strong> et donc l&rsquo;interface s&rsquo;est terriblement compliqu\u00e9 au fil des ann\u00e9es&nbsp;!<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/palettte.app\" target=\"_blank\">https:\/\/palettte.app<\/a><br>\u2014 Outil \u00e0 l&rsquo;<strong>interface attrayant<\/strong> mais dont l&rsquo;utilit\u00e9 pratique reste \u00e0 d\u00e9montrer pour les d\u00e9butants.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Construire des nuanciers normalis\u00e9s en se basant sur la luminosit\u00e9<\/h4>\n\n\n\n<p>En recherchant prioritairement \u00e0 <strong>construire des nuanciers fonctionnels constitu\u00e9s de couleurs r\u00e9versibles<\/strong>, le sch\u00e9ma suivant permet de construire de tels nuanciers en se basant uniquement sur la luminosit\u00e9 des couleurs (toujours mesur\u00e9e dans <a rel=\"noreferrer noopener\" href=\"https:\/\/www.hsluv.org\" data-type=\"link\" data-id=\"https:\/\/www.hsluv.org\" target=\"_blank\">hsluv.org<\/a>). <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/echelle-valeurs-nuanciers-fonctionnels.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"366\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/echelle-valeurs-nuanciers-fonctionnels-1024x366.jpg\" alt=\"\" class=\"wp-image-6500\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/echelle-valeurs-nuanciers-fonctionnels-1024x366.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/echelle-valeurs-nuanciers-fonctionnels-600x214.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/echelle-valeurs-nuanciers-fonctionnels-768x274.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/echelle-valeurs-nuanciers-fonctionnels-1536x549.jpg 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/echelle-valeurs-nuanciers-fonctionnels-2048x731.jpg 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/echelle-valeurs-nuanciers-fonctionnels-1200x429.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/echelle-valeurs-nuanciers-fonctionnels-1980x707.jpg 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Les nuanciers constitu\u00e9s de couleurs r\u00e9versibles permettent de <strong>produire des variantes d&rsquo;une composition en changeant juste le r\u00f4le attribu\u00e9 aux couleurs<\/strong>. Par exemple, le changement de la couleur dominante modifie compl\u00e8tement la perception d&rsquo;une composition. Si toutes les couleurs peuvent se lire les unes sur les autres, le changement de fonction des couleurs s&rsquo;effectue sans perte de lisibilit\u00e9.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/changement-dominante.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"275\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/changement-dominante-1024x275.jpg\" alt=\"\" class=\"wp-image-6720\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/changement-dominante-1024x275.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/changement-dominante-600x161.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/changement-dominante-768x206.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/changement-dominante-1536x412.jpg 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/changement-dominante-2048x549.jpg 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/changement-dominante-1200x322.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/changement-dominante-1980x531.jpg 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>\u279c&nbsp;<strong>Exercice<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>V\u00e9rifiez la pertinence du sch\u00e9ma ci-dessus en cr\u00e9ant, d&rsquo;apr\u00e8s les indications de pourcentage de luminosit\u00e9 indiqu\u00e9s, des <strong>nuanciers fonctionnels de 3 couleurs r\u00e9versibles respectant au moins la norme AA Large<\/strong> (ratio de contraste sup\u00e9rieur \u00e0 3, entre la couleur de premier plan et la couleur d&rsquo;arri\u00e8re plan). Utilisez <a rel=\"noreferrer noopener\" href=\"https:\/\/www.hsluv.org\" data-type=\"link\" data-id=\"https:\/\/www.hsluv.org\" target=\"_blank\">hsluv.org<\/a> et l&rsquo;outil de contr\u00f4le de ratio de votre choix. Sauvegardez vos nuanciers en utilisant <a rel=\"noreferrer noopener\" href=\"https:\/\/coolors.co\" data-type=\"link\" data-id=\"https:\/\/coolors.co\" target=\"_blank\">coolors.co<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Palettes_de_couleurs_moyennes\"><\/span>Palettes de couleurs moyennes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>En disposant d&rsquo;une couleur dont la luminosit\u00e9 se situe entre 40 et 60%, vous \u00eates certains que cette couleur pr\u00e9sentent un contraste suffisant sur le blanc et le noir pour r\u00e9pondre \u00e0 la <strong>norme AA Large (ratio de contraste sup\u00e9rieur \u00e0 3)<\/strong>.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Pour r\u00e9pondre \u00e0 la n<strong>orme AA (ratio de contraste sup\u00e9rieur \u00e0 4,5)<\/strong>, il convient d&rsquo;\u00eatre plus prudent. La luminosit\u00e9 de la couleur moyenne doit alors se situer autour de 50%. Cependant, si nous voulons vraiment viser la norme AA, \u00e0 la fois sur le blanc et sur le noir (pour garantir la r\u00e9versibilit\u00e9 des couleurs) cette luminosit\u00e9 varie selon les teintes. Il convient alors d&rsquo;effectuer un contr\u00f4le de ration de contraste. <\/p>\n\n\n\n<p>Voici des pages Web sur lesquelles vous pouvez trouver ces <strong>couleurs moyennes<\/strong> \u201cid\u00e9ales\u201d (les ratios de contraste sur le blanc et le noir ont \u00e9t\u00e9 v\u00e9rifi\u00e9s).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/codepen.io\/finnhvman\/full\/bZQLgR\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/finnhvman\/full\/bZQLgR<\/a><br>\u2014 S\u00e9lection de <strong>couleurs moyennes conformes \u00e0 la norme AA sur le noir et sur le blanc<\/strong>, sur le site CodePen.<\/li>\n\n\n\n<li><a href=\"https:\/\/graphizm.fr\/fcs\/couleurs-moyennes\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/graphizm.fr\/fcs\/couleurs-moyennes\/<\/a><br>\u2014 S\u00e9lection de <strong>couleurs moyennes conformes \u00e0 la norme AA sur le noir et sur le blanc<\/strong>.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/graphizm.fr\/fcs\/couleurs-moyennes\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"190\" height=\"1024\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/04\/couleurs-moyennes-190x1024.png\" alt=\"\" class=\"wp-image-5033\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/04\/couleurs-moyennes-190x1024.png 190w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/04\/couleurs-moyennes-768x4136.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/04\/couleurs-moyennes-285x1536.png 285w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/04\/couleurs-moyennes-380x2048.png 380w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/04\/couleurs-moyennes-1200x6463.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/04\/couleurs-moyennes.png 1268w\" sizes=\"auto, (max-width: 190px) 100vw, 190px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>\u279c&nbsp;Cette palette de 63 couleurs moyennes a \u00e9t\u00e9 r\u00e9alis\u00e9e par mes soins. Vous constaterez une chose&nbsp;: bien que les ratios de contraste de chacune de ces couleurs sur le noir et le blanc soient tr\u00e8s proches, <strong>les texte en blanc sur chaque couleur moyenne se lisent majoritairement mieux que les textes en noir sur ces couleurs<\/strong>. J&rsquo;en ignore la raison, mais ce constat doit cependant \u00eatre pris en compte pour am\u00e9liorer le confort de lecture des sites Web que vous r\u00e9aliserez.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Nuanciers_fonctionnels_prets_a_lemploi\"><\/span>Nuanciers fonctionnels pr\u00eats \u00e0 l&#8217;emploi<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u00c0 la fin de la page Web ci-dessus, plusieurs liens conduisent vers des chartes graphiques de <strong>grandes entreprises utilisant des palettes de couleurs fonctionnelles<\/strong>. Il est tout \u00e0 fait possible de les utiliser pour des projets de communication en ligne. Les nuanciers de couleurs ne sont pas soumis aux droits li\u00e9s \u00e0 la propri\u00e9t\u00e9 intellectuelle&nbsp;!<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/designsystem.digital.gov\/design-tokens\/color\/system-tokens\/\" data-type=\"link\" data-id=\"https:\/\/designsystem.digital.gov\/design-tokens\/color\/system-tokens\/\">Charte chromatique du gouvernement des USA<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.ibm.com\/design\/language\/color\/\" data-type=\"link\" data-id=\"https:\/\/www.ibm.com\/design\/language\/color\/\">Charte chromatique d&rsquo;IBM<\/a><\/li>\n<\/ul>\n\n\n\n<p>Si vous souhaitez les utiliser, prenez le temps d&rsquo;examiner comment fonctionnent ces palettes de couleurs \u00e9tag\u00e9es.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Le fonctionnement de ces palettes normalis\u00e9es repose souvent sur <strong>le principe de saut de couleurs<\/strong>. Le nuancier mis au point par Matthew Howel (section suivante) repose sur le m\u00eame principe.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_nuanciers_fonctionnels_de_Matthew_Howel\"><\/span>Les nuanciers fonctionnels de Matthew Howel<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Matthew Howel a mis au point <a href=\"https:\/\/reasonable.work\/colors\/#colors\" data-type=\"link\" data-id=\"https:\/\/reasonable.work\/colors\/#colors\">une s\u00e9rie de palettes \u00e9tag\u00e9es monochromes<\/a> de telle sorte que&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>en intercalant 1 couleur, on obtient un <strong>ratio de contraste de 3<\/strong> (norme AA Large) entre les 2 couleurs de part et d&rsquo;autre de la couleur intercal\u00e9e&nbsp;;<\/li>\n\n\n\n<li>en intercalant 2 couleurs, on obtient un <strong>ratio de contraste de 4,5<\/strong> norme AA) entre les 2 couleurs de part et d&rsquo;autre des 2 couleurs intercal\u00e9es.<\/li>\n\n\n\n<li>en intercalant 3 couleurs, on obtient un <strong>ratio de contraste de 7<\/strong> (norme AAA) entre les 2 couleurs de part et d&rsquo;autre des 3 couleurs intercal\u00e9es.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/reasonable.work\/colors\/#colors\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"676\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palettes-Matthew-Howel-1024x676.png\" alt=\"\" class=\"wp-image-6478\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palettes-Matthew-Howel-1024x676.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palettes-Matthew-Howel-600x396.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palettes-Matthew-Howel-768x507.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palettes-Matthew-Howel-1536x1014.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palettes-Matthew-Howel-2048x1353.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palettes-Matthew-Howel-1200x793.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/palettes-Matthew-Howel-1980x1308.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><strong>24 palettes monochromes sont disponibles, plus la palette des gris<\/strong>. 25 teintes disponibles, en 6 valeurs chacune, font 150 jetons de couleurs (150 color tokens) \u00e0 combiner. Il vous suffit de piocher parmi les 150 couleurs propos\u00e9es pour construire vos nuanciers fonctionnels.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Vous remarquerez que <strong>Matthew Howel n&rsquo;utilise dans ses palettes ni le noir ni le blanc<\/strong>. Avec les couleurs propos\u00e9es, il n&rsquo;est donc pas possible de cr\u00e9er  un nuancier fonctionnel de plus de 2 couleurs r\u00e9versibles respectant la norme AA.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_nuanciers_fonctionnels_de_Yves_Goguely\"><\/span>Les nuanciers fonctionnels de Yves Goguely<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Je vous propose maintenant une palette r\u00e9alis\u00e9e par mes soins<\/strong>. La page m\u00e9rite un traitement stylistique plus sympathique, je vous l&rsquo;accorde, mais en attendant mieux cette palette \u00e9largit le champ des nuanciers possible. Prenez en compte les indications mentionn\u00e9es sur l&rsquo;\u00e9chelle des gris pour comprendre quels sont les ratios de contraste entre les couleurs de chaque rang\u00e9e (il s&rsquo;agit des ratios pr\u00e9sent\u00e9s sur le sch\u00e9ma montr\u00e9 en tout d\u00e9but de cours).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/couleurs\/palettes-accessibles\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"445\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/couleurs-accessibles-02-1024x445.png\" alt=\"\" class=\"wp-image-5276\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/couleurs-accessibles-02-1024x445.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/couleurs-accessibles-02-600x261.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/couleurs-accessibles-02-768x334.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/couleurs-accessibles-02-1536x667.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/couleurs-accessibles-02-2048x890.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/couleurs-accessibles-02-1200x521.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/couleurs-accessibles-02-1980x860.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Outils_necessitant_plus_de_travail_de_mise_au_point\"><\/span>Outils n\u00e9cessitant plus de travail de mise au point<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Plusieurs outils proposent depuis de nombreuses ann\u00e9es la cr\u00e9ation de palettes de couleurs. Certains d&rsquo;entre eux autorisent la personnalisation des couleurs choisies. En sachant donc ce qu&rsquo;il convient d&rsquo;obtenir (tel nombre de couleur, r\u00e9versibilit\u00e9 des couleurs ou non, telle norme d&rsquo;accessibilit\u00e9, telle symbolique de la couleur dominante), <strong>il est possible de partir d&rsquo;un nuancier et d&rsquo;en personnaliser chaque couleur pour rendre le nuancier fonctionnel<\/strong>. Cela dit, l&rsquo;exercice peut s&rsquo;av\u00e9rer une belle prise de t\u00eate&nbsp;!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Outil_de_construction_de_nuanciers_base_sur_la_theorie_des_couleurs\"><\/span>Outil de construction de nuanciers bas\u00e9 sur la th\u00e9orie des couleurs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Adobe a fait \u00e9voluer un de ses outils phare de cr\u00e9ation de palettes de couleurs. Adapt\u00e9 \u00e0 la cr\u00e9ation de palettes pour l&rsquo;illustration, il s&rsquo;av\u00e8re moins pratique pour cr\u00e9er des nuanciers fonctionnels.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/color.adobe.com\/fr\/create\/color-wheel\" target=\"_blank\">https:\/\/color.adobe.com\/fr\/create\/color-wheel<\/a>&nbsp;<br>\u2014 Pour construire des accords color\u00e9s en suivant les r\u00e8gles de la th\u00e9orie des couleurs (roue chromatique d\u2019Adobe Color)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"602\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/roue-couleurs-adobe-1024x602.png\" alt=\"\" class=\"wp-image-6507\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/roue-couleurs-adobe-1024x602.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/roue-couleurs-adobe-600x353.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/roue-couleurs-adobe-768x451.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/roue-couleurs-adobe-1536x903.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/roue-couleurs-adobe-2048x1204.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/roue-couleurs-adobe-1200x705.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/roue-couleurs-adobe-1980x1164.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u279c&nbsp;<strong>Exercice<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Essayez de construire un nuancier fonctionnel de 5 couleurs (dont le blanc et le noir)<\/strong>, bas\u00e9 sur un accord analogue avec la&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/color.adobe.com\/fr\/create\/color-wheel\" target=\"_blank\">roue chromatique<\/a>&nbsp;d\u2019Adobe Color.<\/li>\n<\/ul>\n\n\n\n<p>Vous allez vite constater que m\u00eame en utilisant le mode TSL (Teinte Saturation Luminosit\u00e9) un r\u00e9sultat coh\u00e9rent est laborieux \u00e0 obtenir&nbsp;!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Outils_de_construction_de_nuanciers_etages_allant_dune_teinte_a_une_autre\"><\/span>Outils de construction de nuanciers \u00e9tag\u00e9s allant d&rsquo;une teinte \u00e0 une autre<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Quelques outils permettent de <strong>g\u00e9n\u00e9rer automatiquement un nombre d\u00e9termin\u00e9 de couleurs interm\u00e9diaires allant d&rsquo;une couleur initiale \u00e0 une autre<\/strong>. L&rsquo;id\u00e9e n&rsquo;est pas mauvaise en soi mais la volont\u00e9 de respecter une norme d&rsquo;accessibilit\u00e9 nous am\u00e8nera in\u00e9vitablement \u00e0 des ajustements.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/colorkit.io\/\" target=\"_blank\">https:\/\/colorkit.io\/<\/a>&nbsp;<br>\u2014 ColorKit<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/davidjohnstone.net\/lch-lab-colour-gradient-picker\" target=\"_blank\">https:\/\/davidjohnstone.net\/lch-lab-colour-gradient-picker<\/a>&nbsp;<br>\u2014 Lch Lab colour gradient picker<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.learnui.design\/tools\/data-color-picker.html#palette\" target=\"_blank\">https:\/\/www.learnui.design\/tools\/data-color-picker.html#palette<\/a>&nbsp;<br>\u2014 Data Color Picker<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"644\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/data-color-picker-1024x644.png\" alt=\"\" class=\"wp-image-6510\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/data-color-picker-1024x644.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/data-color-picker-600x378.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/data-color-picker-768x483.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/data-color-picker-1536x967.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/data-color-picker-2048x1289.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/data-color-picker-1200x755.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/data-color-picker-1980x1246.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u279c&nbsp;<strong>Exercice<\/strong><\/p>\n\n\n\n<p>En utilisant chacun des outils propos\u00e9s ci-dessus, <strong>construisez un nuancier \u00e9tag\u00e9 de 3 couleurs r\u00e9versibles, respectant la norme AA Large<\/strong>. Quel est l\u2019outil le plus appropri\u00e9 pour construire un tel nuancier&nbsp;?<\/p>","protected":false},"excerpt":{"rendered":"<p>Dans la pratique, vous serez confront\u00e9s \u00e0 la n\u00e9cessit\u00e9 d&rsquo;utiliser des nuanciers de couleurs privil\u00e9giant la bonne lisibilit\u00e9 des textes. Vous devrez veillez \u00e0 ce que le ratio de contraste entre la couleur de ces textes et la couleur du fond soit suffisant. Ce cours vous donne les indications n\u00e9cessaires pour construire des nuanciers garantissant [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,4,1],"tags":[],"class_list":["post-6303","post","type-post","status-publish","format-standard","hentry","category-cc1-cours","category-com-crea","category-non-classe"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","twentytwenty-fullscreen":""},"post_excerpt_stackable_v2":"<p>Dans la pratique, vous serez confront\u00e9s \u00e0 la n\u00e9cessit\u00e9 d&rsquo;utiliser des nuanciers de couleurs privil\u00e9giant la bonne lisibilit\u00e9 des textes. Vous devrez veillez \u00e0 ce que le ratio de contraste entre la couleur de ces textes et la couleur du fond soit suffisant. Ce cours vous donne les indications n\u00e9cessaires pour construire des nuanciers garantissant la lisibilit\u00e9 des textes. Sommaire Toggle Les normes d\u2019accessibilit\u00e9Les textes officielsD\u00e9finition d&rsquo;un nuancier ou palette fonctionnelleOutils de contr\u00f4le du ratio de contraste des couleursOutils de construction de palettes fonctionnellesPalettes de couleurs moyennesNuanciers fonctionnels pr\u00eats \u00e0 l&#8217;emploiLes nuanciers fonctionnels de Matthew HowelLes nuanciers fonctionnels de Yves\u2026<\/p>","category_list_v2":"<a href=\"https:\/\/graphizm.fr\/greta\/category\/com-crea\/cc1-cours\/\" rel=\"category tag\">CC1-cours<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/com-crea\/\" rel=\"category tag\">Com-Cr\u00e9a<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/non-classe\/\" rel=\"category tag\">Non class\u00e9<\/a>","author_info_v2":{"name":"Yves Goguely","url":"https:\/\/graphizm.fr\/greta\/author\/formationsgreta\/"},"comments_num_v2":"0 commentaire","_links":{"self":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/6303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/comments?post=6303"}],"version-history":[{"count":52,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/6303\/revisions"}],"predecessor-version":[{"id":7579,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/6303\/revisions\/7579"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=6303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=6303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=6303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}