{"id":185,"date":"2025-12-21T15:15:06","date_gmt":"2025-12-21T14:15:06","guid":{"rendered":"https:\/\/wp11.infocom.work\/?p=185"},"modified":"2025-12-21T15:38:38","modified_gmt":"2025-12-21T14:38:38","slug":"comment-choisir-une-palette-de-couleurs-qui-fonctionne-vraiment","status":"publish","type":"post","link":"https:\/\/wp11.infocom.work\/index.php\/2025\/12\/21\/comment-choisir-une-palette-de-couleurs-qui-fonctionne-vraiment\/","title":{"rendered":"Comment choisir une palette de couleurs qui fonctionne vraiment ?"},"content":{"rendered":"\n<!-- ARTICLE 1 \u2014 Couleur & colorim\u00e9trie -->\n<article>\n  <header style=\"padding:16px;border:1px solid #e8e8e8;border-radius:16px;background:#ffffff;\">\n    <p style=\"margin:0 0 6px 0;font:700 12px\/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial;letter-spacing:.12em;text-transform:uppercase;color:#666;\">\n      Couleur &amp; colorim\u00e9trie \u2022 Guide rapide\n    <\/p>\n    <h1 style=\"margin:0;font:800 32px\/1.12 system-ui, -apple-system, Segoe UI, Roboto, Arial;letter-spacing:-.02em;\">\n      Comment choisir une palette de couleurs qui fonctionne vraiment\n    <\/h1>\n    <p style=\"margin:10px 0 0 0;font:400 16px\/1.8 system-ui, -apple-system, Segoe UI, Roboto, Arial;color:#444;max-width:72ch;\">\n      Une palette r\u00e9ussie n\u2019est pas \u201cjolie au hasard\u201d : elle \u00e9quilibre contraste, hi\u00e9rarchie et coh\u00e9rence. Voici une m\u00e9thode simple, utilisable d\u00e8s maintenant.\n    <\/p>\n  <\/header>\n\n  <section style=\"padding:18px 2px;max-width:78ch;\">\n    <h2 style=\"font:800 18px\/1.25 system-ui, -apple-system, Segoe UI, Roboto, Arial;margin:18px 0 8px 0;\">\n      1) Partir d\u2019un r\u00f4le, pas d\u2019une couleur\n    <\/h2>\n    <p style=\"margin:0 0 12px 0;font:400 16px\/1.9 system-ui, -apple-system, Segoe UI, Roboto, Arial;color:#333;\">\n      Avant de choisir des teintes, d\u00e9finis les r\u00f4les : <strong>primaire<\/strong> (action), <strong>secondaire<\/strong> (support),\n      <strong>accent<\/strong> (d\u00e9tails), <strong>neutres<\/strong> (fonds\/texte). Une bonne palette se comprend comme une UI.\n    <\/p>\n\n    <div style=\"border:1px solid #e8e8e8;border-radius:16px;overflow:hidden;background:#fff;margin:14px 0;\">\n      <div style=\"display:grid;grid-template-columns:repeat(5,1fr);\">\n        <div style=\"padding:14px;background:#0B0B0F;color:#fff;font:700 12px\/1.2 system-ui;text-transform:uppercase;letter-spacing:.1em;\">Texte<br><span style=\"opacity:.85;\">#0B0B0F<\/span><\/div>\n        <div style=\"padding:14px;background:#F6F7FB;font:700 12px\/1.2 system-ui;text-transform:uppercase;letter-spacing:.1em;\">Fond<br><span style=\"opacity:.7;\">#F6F7FB<\/span><\/div>\n        <div style=\"padding:14px;background:#1F4FFF;color:#fff;font:700 12px\/1.2 system-ui;text-transform:uppercase;letter-spacing:.1em;\">Primaire<br><span style=\"opacity:.85;\">#1F4FFF<\/span><\/div>\n        <div style=\"padding:14px;background:#00D1FF;font:700 12px\/1.2 system-ui;text-transform:uppercase;letter-spacing:.1em;\">Secondaire<br><span style=\"opacity:.7;\">#00D1FF<\/span><\/div>\n        <div style=\"padding:14px;background:#FF2D95;color:#fff;font:700 12px\/1.2 system-ui;text-transform:uppercase;letter-spacing:.1em;\">Accent<br><span style=\"opacity:.85;\">#FF2D95<\/span><\/div>\n      <\/div>\n    <\/div>\n\n    <h2 style=\"font:800 18px\/1.25 system-ui, -apple-system, Segoe UI, Roboto, Arial;margin:18px 0 8px 0;\">\n      2) La r\u00e8gle 60 \/ 30 \/ 10\n    <\/h2>\n    <ul style=\"margin:0 0 12px 18px;font:400 16px\/1.9 system-ui, -apple-system, Segoe UI, Roboto, Arial;color:#333;\">\n      <li><strong>60%<\/strong> : neutres (fonds, zones larges)<\/li>\n      <li><strong>30%<\/strong> : couleur support (blocs, sections)<\/li>\n      <li><strong>10%<\/strong> : accents (boutons, liens, focus)<\/li>\n    <\/ul>\n\n    <h2 style=\"font:800 18px\/1.25 system-ui, -apple-system, Segoe UI, Roboto, Arial;margin:18px 0 8px 0;\">\n      3) Contraste = lisibilit\u00e9\n    <\/h2>\n    <p style=\"margin:0 0 12px 0;font:400 16px\/1.9 system-ui, -apple-system, Segoe UI, Roboto, Arial;color:#333;\">\n      Test rapide : si ton texte \u201cvibre\u201d ou fatigue, baisse la saturation du fond ou augmente le contraste texte\/fond.\n      Les palettes web r\u00e9ussies sont souvent <strong>moins satur\u00e9es<\/strong> qu\u2019on ne le pense.\n    <\/p>\n\n    <div style=\"padding:14px;border-radius:16px;border:1px solid #e8e8e8;background:#fafafa;\">\n      <p style=\"margin:0;font:600 14px\/1.7 system-ui, -apple-system, Segoe UI, Roboto, Arial;color:#333;\">\n        Mini-checklist : 2\u20133 couleurs max \u2022 neutres solides \u2022 un accent assum\u00e9 \u2022 contraste texte OK \u2022 coh\u00e9rence sur tout le site.\n      <\/p>\n    <\/div>\n  <\/section>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Couleur &amp; colorim\u00e9trie \u2022 Guide rapide Comment choisir une palette de couleurs qui fonctionne vraiment Une palette r\u00e9ussie n\u2019est pas \u201cjolie au hasard\u201d : elle \u00e9quilibre contraste, hi\u00e9rarchie et coh\u00e9rence. Voici une m\u00e9thode simple, utilisable d\u00e8s maintenant. 1) Partir d\u2019un r\u00f4le, pas d\u2019une couleur Avant de choisir des teintes, d\u00e9finis les r\u00f4les : primaire (action),&#8230;<\/p>\n<p class=\"more-link\"><a href=\"https:\/\/wp11.infocom.work\/index.php\/2025\/12\/21\/comment-choisir-une-palette-de-couleurs-qui-fonctionne-vraiment\/\" class=\"themebutton3\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-185","post","type-post","status-publish","format-standard","hentry","category-colo"],"_links":{"self":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/posts\/185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/comments?post=185"}],"version-history":[{"count":2,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/posts\/185\/revisions"}],"predecessor-version":[{"id":215,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/posts\/185\/revisions\/215"}],"wp:attachment":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/media?parent=185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/categories?post=185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/tags?post=185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}