TL;DR — Un audit du 2026-10-05 a mesuré six défauts sur la page d'accueil. Cinq d'entre eux
ne dépendaient d'aucune des trois directions de refonte proposées : on les a appliqués sans
attendre le verdict. Le sixième — le mode sombre — est le sujet de ce récit : comment un
#1a1a2e faisait du blog un autre site, et pourquoi une palette se corrige en deux endroits.
Le piège : attendre une décision pour réparer ce qui n'en a pas besoin
La refonte de blog.vfg.lol traînait une question ouverte : A éditorial, B épuré, C
sombre ? Trois maquettes en ligne, une page d'avis, et un verdict en attente.
Mais l'audit n'avait pas seulement posé la question du style. Il avait listé des défauts : un accent qui se dispute avec quatre autres, une barre de navigation en double, un bouton fantôme, des bannières dégradées, un corps de texte sous les 16 px. Aucun de ces cinq-là ne change selon qu'on préfère A, B ou C. Les repousser au nom de la décision, c'était garder un site qu'on n'aime pas pour attendre une réponse qui ne les concerne pas.
On les a donc appliqués — un par un, chacun mesuré, chacun réversible.
Le vrai sujet : un mode sombre qui change de site
Reste le sixième. Le mode sombre du blog n'était pas une version sombre : c'était une autre
identité. Fond bleu nuit #1a1a2e, liens cyan #64ffda — une palette « Matrix » qui n'avait
aucun rapport avec le bordeaux #ac130d de la version claire. Selon que votre système était en
clair ou en sombre, vous ne lisiez pas le même blog.
La proposition C fournissait la réponse : un neutre chaud et un bordeaux adouci. On a repris ses teintes, pas sa mise en page — l'idée n'est pas de tout refondre, mais de rendre le sombre cohérent avec le clair.
Ce que la mesure a corrigé dans la méthode
Trois choses que je n'aurais pas vues en écrivant le CSS « à la main ».
1. Le sombre est déclaré deux fois. tokens.css gère le sombre du système
(@media (prefers-color-scheme: dark)) et celui du choix du lecteur
([data-theme="dark"]). Deux blocs, la même palette — et c'est là le piège : corriger un seul
bloc donne une page sombre selon le déclencheur. On a donc écrit une garde qui compare les
deux blocs jeton par jeton, valeur par valeur. Réintroduire #1a1a2e dans un bloc la fait
échouer — vérifié en le faisant exprès.
2. Un hexagone à huit chiffres n'est pas une couleur opaque. J'avais posé --surface-warm: #26222040. Les huit chiffres ne sont pas une teinte plus précise : c'est transparent. En
navigateur, la surface disparaissait. Corrigé en #262220, opaque. Le CSS l'aurait accepté en
silence.
3. Les contrastes se calculent, ils ne se devinent pas. La palette « a l'air » lisible sur une capture. Mesurés selon WCAG : texte sur fond 14,5:1, texte doux 8,1:1, accent 5,7:1, métadonnées 4,9:1. Tous au-dessus du seuil AA — mais c'est le chiffre qui le dit, pas l'œil.
Avant / après, en une ligne
| Ancien « Matrix » | Harmonisé (proposition C) | |
|---|---|---|
| Fond | #1a1a2e (bleu nuit) | #191715 (neutre chaud) |
| Accent (lien) | #64ffda (cyan) | #e0706a (bordeaux adouci) |
| Texte | #e0e0e0 | #ece7df |
Le clair n'a pas bougé (--bg #fff, --link #ac130d). Les deux déclencheurs de sombre rendent
désormais la même palette.
Ce qu'on n'a pas décidé
La direction, justement. Ces six correctifs sont indépendants de A, B et C : ils réparent des défauts, ils ne tranchent pas un goût. Le verdict reste ouvert — et c'est bien ainsi : on n'a pas profité d'un correctif technique pour choisir, en douce, une identité à la place de son auteur.
Cinq correctifs qu'on ne pouvait pas ne pas appliquer, et un sixième qui avait juste besoin d'être mesuré.