/* ========================================================================== B18 V2 — Jetons de design (story S1.1) Le seul fichier du projet où une couleur a le droit d'être écrite en dur. Partout ailleurs, on passe par var(--nom). Ce n'est pas une préférence de style : une couleur littérale échappe au changement de thème, et le défaut ne se voit que le jour où quelqu'un ouvre le thème sombre. Contrôlé par `node outils-v2/contraste.mjs`, qui balaie index.html, app.css et theme.js à la recherche de littéraux. PROVENANCE DES VALEURS La palette vient de B18_MAQUETTE_V3.html, qui est la référence d'aspect validée pour la V2. NEUF valeurs en dévient. Chaque écart porte en commentaire la valeur d'origine et le rapport mesuré, pour qu'on puisse le discuter sur pièce plutôt que de le redécouvrir. Le compte a d'abord été annoncé à sept, ce qui était faux : deux écarts étaient expliqués en commentaire sans être comptés, et un troisième — --teal-d en thème sombre — avait bougé sans la moindre justification. Relevé par la relecture d'architecture. Celui-là a été remis à la valeur de la maquette : un jeton de marque ne se déplace pas sans mandat. Les neuf écarts, en un coup d'œil : clair --encre2 --encre3 --ambre --lave --ev1 --ev3 --ev5 contraste clair --lagon couleur de marque de Cédric sombre --encre3 contraste Les huit écarts de contraste sont exigés par le critère de S1.1 et par B18_REGLES_AFFICHAGE.md §1 (« variantes encre : assombries juste assez pour tenir le contraste 4,5 sur leur fond pastel »). Le neuvième reprend le teal donné par Cédric le 11/08, qui fait foi sur la maquette pour la marque. Le contexte qui justifie cette sévérité est écrit dans les règles : un téléphone tenu à une main, dehors, en plein soleil, pendant que les familles arrivent. Ce n'est pas le contexte d'un bon écran en intérieur. ========================================================================== */ :root { color-scheme: light; /* ---- Surfaces ------------------------------------------------------ */ --fond: #F5F7F6; --surface: #FFFFFF; --surface2: #FAFBFA; /* ---- Encres -------------------------------------------------------- Trois niveaux, tous au-dessus de 4,5:1 sur les trois surfaces. Les deux niveaux secondaires ont été assombris : la maquette donnait --encre2 #5C6B6A et --encre3 #8A9997, ce dernier tombant à 2,96:1 sur blanc — sous le seuil AA, et même sous le seuil « texte large » de 3:1. Assombrir --encre3 seul aurait collé les deux niveaux à 0,3 point de rapport l'un de l'autre, donc visuellement identiques : la hiérarchie à trois niveaux ne tenait plus. Les deux ont bougé ensemble. Mesures : --encre 15,9:1 · --encre2 7,1:1 · --encre3 4,9:1 sur --fond. */ --encre: #14201F; --encre2: #4A5654; --encre3: #616F6D; /* ---- Traits -------------------------------------------------------- Décoratifs : la limite d'une carte est portée par le changement de surface, le trait ne fait que la souligner. Pas de seuil opposable (voir le commentaire des paires dans outils-v2/contraste.mjs). */ --trait: #E3E9E7; --trait2: #EFF3F2; /* Bordure des champs de saisie — PAS un trait décoratif. Elle dit où l'on peut écrire, donc elle tient 3:1 comme tout élément d'interface porteur de sens (WCAG 1.4.11). Avec --trait, le champ de mot de passe au repos n'avait pratiquement pas de contour sur une carte blanche : 1,32:1 mesuré. Voir B18_REGLES_AFFICHAGE.md §2. */ --trait-champ: #7C8886; /* ---- Marque -------------------------------------------------------- Le teal clair de Cédric (#82BDBE, donné le 11/08) ne sert jamais de fond à du texte blanc : il est trop clair, la règle est écrite en B18_REGLES_AFFICHAGE.md §1. Il vit ici sous le nom --lagon, en accent et en fond. La couleur de texte et de bouton est --teal, plus foncée. */ --teal: #097279; --teal-d: #06555B; --lagon: #82BDBE; --lagon-f: #E8F2F1; /* Le bas du dégradé de la barre latérale, et le survol d'un lien dessus. Amplitude faible : la règle du §1 réserve les dégradés aux surfaces actives et interdit d'aller au-delà du relief discret. */ --lagon-b: #D6E9E8; --lagon-survol: #C2DEDD; /* Ce qui s'écrit SUR la marque. Jamais du blanc : #82BDBE est trop clair, mesuré à 1,9:1 contre blanc. Le teal foncé tient 7:1 et plus. */ --sur-lagon: #06555B; /* ---- Sémantique ---------------------------------------------------- Trois états, jamais utilisés pour identifier un événement. --lave est réservé aux vrais problèmes : retard, effectif insuffisant, stock sous le seuil (CLAUDE.md §7). Pas aux chevauchements, que le client considère comme normaux. */ --pousse: #2A7A57; /* ce qui va bien */ --pousse-f: #E9F4EF; /* L'AMBRE N'A PLUS DE BLEU DEDANS, ET C'EST TOUT LE SUJET. #8A5A12 portait 18 de bleu : c'est ce qui le faisait virer au brun terreux à côté du teal de la marque. Stéphanie le 29/08 : « ce brun caca ne va pas avec le vert de l'appli ». #8F6300 est le même ambre sans son bleu — un miel doré. Il tient 4,99:1 sur son fond, au-dessus du seuil AA, et 5,31:1 sur blanc : mesuré, pas estimé. Le fond passe d'un beige jauni à un crème neutre. */ --ambre: #8F6300; --ambre-f: #FDF6EC; --lave: #B03A24; /* maquette #BC402A → 4,45:1 sur --lave-f, sous AA d'un cheveu */ --lave-f: #FBECE8; /* ---- Couleurs d'événement ------------------------------------------ Cinq teintes distinctes pour cinq anniversaires le même jour. C'est la couleur qui dit DE QUEL événement on parle — jamais dans quel état il est (CLAUDE.md §7). L'état passe par la forme. --ev3 et --ev5 assombris pour tenir 4,5:1 sur leur propre fond. */ /* PAS DE TEAL ICI. La maquette donnait #0F7A80 et la première correction #0C6B70 : dans les deux cas, à trois unités par canal de --teal (#097279), la couleur de l'application. Le premier anniversaire de chaque journée portait donc la teinte de la coquille, et sur sa carte la bordure d'identité, la pilule du responsable et les liens d'accent se lisaient comme un même élément. Relevé par la relecture visuelle du 18/08, changé par Stéphanie le même jour. Le rose-magenta est ce qui restait : le vert est pris par --pousse (« ce qui va bien »), l'ambre par --ambre, le rouge par --lave, le bleu et le violet par --ev4 et --ev2. Une couleur d'événement qui reprend une couleur de SENS ferait dire à la teinte deux choses à la fois. */ --ev1: #A6386B; --ev1f: #F8EAF1; --ev2: #7A4FA0; --ev2f: #F1EAF7; --ev3: #8A5A12; --ev3f: #FBF3E3; /* maquette #A9701A → 3,73:1 */ --ev4: #3D6BB0; --ev4f: #EAF0F9; --ev5: #8E4232; --ev5f: #F8EDEA; /* maquette #9C4B3A → 4,32:1 */ /* ---- Texte posé sur un aplat de couleur pleine ---------------------- Les étiquettes d'alerte sont en couleur pleine, jamais en transparence (B18_REGLES_AFFICHAGE.md §1) : sur un fond déjà teinté, un aplat semi-transparent donne un contraste imprévisible d'un écran à l'autre. D'où ces quatre jetons, qui changent avec le thème. */ --sur-teal: #FFFFFF; --sur-lave: #FFFFFF; --sur-ambre: #FFFFFF; --sur-pousse: #FFFFFF; /* ---- Focus clavier -------------------------------------------------- Indicateur d'état au sens WCAG 1.4.11, seuil 3:1 opposable. 28 éléments sont passés de
à