{"id":72,"date":"2025-11-28T08:27:56","date_gmt":"2025-11-28T07:27:56","guid":{"rendered":"https:\/\/wp11.infocom.work\/?p=72"},"modified":"2025-12-21T15:39:02","modified_gmt":"2025-12-21T14:39:02","slug":"strings","status":"publish","type":"post","link":"https:\/\/wp11.infocom.work\/index.php\/2025\/11\/28\/strings\/","title":{"rendered":"Pourquoi certaines couleurs fatiguent l\u2019\u0153il sur \u00e9cran ?"},"content":{"rendered":"\n<!-- ARTICLE 2 \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;letter-spacing:.12em;text-transform:uppercase;color:#666;\">\n      Couleur &amp; colorim\u00e9trie \u2022 Lisibilit\u00e9\n    <\/p>\n    <h1 style=\"margin:0;font:800 32px\/1.12 system-ui;letter-spacing:-.02em;\">\n      Pourquoi certaines couleurs fatiguent l\u2019\u0153il sur \u00e9cran\n    <\/h1>\n    <p style=\"margin:10px 0 0 0;font:400 16px\/1.8 system-ui;color:#444;max-width:72ch;\">\n      Ce n\u2019est pas \u201cdans ta t\u00eate\u201d : luminance, saturation et contraste peuvent rendre une interface p\u00e9nible \u00e0 lire.\n    <\/p>\n  <\/header>\n\n  <section style=\"padding:18px 2px;max-width:78ch;\">\n    <h2 style=\"font:800 18px\/1.25 system-ui;margin:18px 0 8px 0;\">1) Saturation trop haute<\/h2>\n    <p style=\"margin:0 0 12px 0;font:400 16px\/1.9 system-ui;color:#333;\">\n      Les couleurs ultra satur\u00e9es attirent l\u2019attention\u2026 mais en continu elles \u00e9puisent. Solution : garder la saturation forte\n      uniquement pour les <strong>accents<\/strong> (CTA, focus, \u00e9tat actif).\n    <\/p>\n\n    <h2 style=\"font:800 18px\/1.25 system-ui;margin:18px 0 8px 0;\">2) Luminance mal g\u00e9r\u00e9e<\/h2>\n    <p style=\"margin:0 0 12px 0;font:400 16px\/1.9 system-ui;color:#333;\">\n      Deux couleurs peuvent sembler diff\u00e9rentes, mais avoir une luminance proche \u2192 effet \u201cboueux\u201d.\n      Astuce : fais un test en niveaux de gris (ou imagine la sc\u00e8ne sans couleur). Si tout se confond, le probl\u00e8me est l\u00e0.\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:1fr 1fr;\">\n        <div style=\"padding:16px;background:#00d1ff;color:#001019;\">\n          <p style=\"margin:0;font:800 12px\/1.2 system-ui;letter-spacing:.14em;text-transform:uppercase;\">Cas \u201cfatigue\u201d<\/p>\n          <p style=\"margin:8px 0 0 0;font:600 14px\/1.6 system-ui;\">Fond satur\u00e9 + texte sombre fin = agressif.<\/p>\n        <\/div>\n        <div style=\"padding:16px;background:#f6f7fb;color:#0b0b0f;\">\n          <p style=\"margin:0;font:800 12px\/1.2 system-ui;letter-spacing:.14em;text-transform:uppercase;\">Cas \u201cconfort\u201d<\/p>\n          <p style=\"margin:8px 0 0 0;font:600 14px\/1.6 system-ui;\">Fond neutre + accent satur\u00e9 = reposant.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <h2 style=\"font:800 18px\/1.25 system-ui;margin:18px 0 8px 0;\">3) Contraste mal dos\u00e9<\/h2>\n    <ul style=\"margin:0 0 12px 18px;font:400 16px\/1.9 system-ui;color:#333;\">\n      <li>Texte long \u2192 privil\u00e9gie un contraste \u00e9lev\u00e9, sans noir pur si tu veux du \u201csoft\u201d.<\/li>\n      <li>Accents \u2192 contraste fort uniquement sur les \u00e9l\u00e9ments interactifs.<\/li>\n      <li>\u00c9vite le texte clair sur fond tr\u00e8s color\u00e9 (sauf gros titres).<\/li>\n    <\/ul>\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;color:#333;\">\n        R\u00e8gle d\u2019or : le confort vient des neutres. La couleur doit guider, pas cramer la r\u00e9tine.\n      <\/p>\n    <\/div>\n  <\/section>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Couleur &amp; colorim\u00e9trie \u2022 Lisibilit\u00e9 Pourquoi certaines couleurs fatiguent l\u2019\u0153il sur \u00e9cran Ce n\u2019est pas \u201cdans ta t\u00eate\u201d : luminance, saturation et contraste peuvent rendre une interface p\u00e9nible \u00e0 lire. 1) Saturation trop haute Les couleurs ultra satur\u00e9es attirent l\u2019attention\u2026 mais en continu elles \u00e9puisent. Solution : garder la saturation forte uniquement pour les accents&#8230;<\/p>\n<p class=\"more-link\"><a href=\"https:\/\/wp11.infocom.work\/index.php\/2025\/11\/28\/strings\/\" 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-72","post","type-post","status-publish","format-standard","hentry","category-colo"],"_links":{"self":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/posts\/72","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=72"}],"version-history":[{"count":5,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/posts\/72\/revisions"}],"predecessor-version":[{"id":216,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/posts\/72\/revisions\/216"}],"wp:attachment":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/categories?post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/tags?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}