comment j'utilise la théorie des couleurs sur ce site (avec les jetons exacts)
dev · Oct 6, 2026 · 4 min read
la plupart des articles sur la « théorie des couleurs » sont une roue chromatique et une promesse. celui-ci est différent : ce site est livré avec un vérificateur de contraste dans sa propre version, et le message concerne les décisions réelles, avec les jetons à l'air libre.
une teinte, qui fait tout le travail
tout le système d'accentuation de ce site est une seule teinte oklch (vert, teinte 150). de cette teinte je tire :
- le primaire (boutons, liens, états actifs) — un vert mi-clair qui conserve 4,5:1 contre le texte blanc
- le conteneur principal (surbrillance douce, badges) — même teinte, beaucoup plus claire, portant un texte sombre
- chaque état de survol, de mise au point et de sélection - même teinte à nouveau, luminosité ou chrominance différente
l'essentiel est la discipline : une teinte ne peut pas entrer en conflit avec elle-même. les sites qui semblent "conçus" utilisent généralement moins de couleurs que vous ne le pensez - ils utilisent simplement chacune d'elles avec plus d'intention. dès qu’une deuxième teinte d’accent entre, chaque association doit être revérifiée à la main, et ce n’est jamais le cas.
les neutres sont aussi des couleurs
l'arrière-plan, les surfaces et le texte de ce site ne sont pas gris — ils ont la même teinte verte avec presque aucune saturation. c'est la plus ancienne astuce en matière de conception d'imprimés éditoriaux : teignez vos tons neutres avec votre accent et chaque surface s'accorde discrètement avec toutes les autres surfaces. le gris pur à côté d’un accent coloré semble sans vie, même si presque personne ne peut dire pourquoi.
la règle des 60/30/10, appliquée honnêtement
vous connaissez la règle : 60 % de dominant, 30 % de secondaire, 10 % d'accent. ce que personne ne dit, c'est que le rapport concerne l'attention visuelle, et non la surface des pixels. ma répartition actuelle : les surfaces possèdent les pixels, le type possède le poids et le vert est rationné en fonction des éléments sur lesquels je veux cliquer. quand tout est accentué, rien ne l'est — le vert qui apparaît est lui-même une information (« ceci est interactif »).
la construction échoue si les couleurs sont fausses
voici la partie que je n'ai jamais vu un autre site faire : la version exécute un vérificateur de contraste sur 50 cas de jetons - chaque étiquette, badge et texte grisé dans les deux thèmes, avec une opacité composée exactement comme le fait le navigateur - et échoue si une paire relève des WCAG AA (corps 4,5 : 1, 3 : 1 grand).
c'est important car l'opacité est le point où la théorie des couleurs meurt en pratique : `opacity-60` sur un texte sombre sur une surface claire ne le "rend pas subtil", il le rend illisible pour des millions de lecteurs, et aucune revue de conception ne saisit tout cela. une porte le fait. le mien a traité 50 caisses ce matin avant l'expédition de ce courrier.
quoi voler
- choisissez une teinte d'accent et dérivez-en tout (le matériau 3 appelle cela des palettes tonales)
- teintez vos neutres avec cette teinte au lieu d'utiliser du gris
- mettre l'accent uniquement sur l'interactif
- mettre le contraste dans CI, pas dans un pdf : une version défaillante est la seule théorie des couleurs qui survit aux délais