Token sémantique dérivé

Couche de tokens intermédiaire d’un design system qui traduit une couleur de marque brute (token primitif, par exemple le noir ou le blanc pur imposé par la charte graphique) en une valeur fonctionnelle adaptée à un usage précis, comme le texte, fond de page, surface sombre, sans jamais exposer la valeur brute directement dans les composants.

Cette dérivation consiste à substituer aux extrêmes purs des valeurs très proches mais légèrement adoucies, afin de réduire l’effet de halo (halation) et la fatigue visuelle liés au contraste extrême noir pur / blanc pur, tout en conservant des ratios de contraste largement conformes aux WCAG :

• Texte sur fond clair : le noir pur est remplacé par un noir cassé très sombre (ex. #1A1A1A ou #1C1C1C), qui maintient un contraste souvent supérieur à 15:1 tout en atténuant le halo autour des caractères.
• Fonds de page : le blanc pur est remplacé par un blanc cassé légèrement grisé ou chaud (ex. #FAFAFA ou #F8F8F8), qui conserve une sensation de clarté sans l’agressivité du blanc pur.
• Surfaces sombres : le noir pur est remplacé par un gris très foncé (ex. #121212 ou #1E1E1E), associé à un texte en blanc cassé (ex. #F5F5F5 ou #E0E0E0), pour préserver la lisibilité et le confort de lecture en thème sombre.

Les tokens sémantiques dérivés portent des noms d’usage (color-text-primary, color-background-default, color-surface-inverse…) et non des noms d’apparence (noir-pur, blanc-pur) : leur nom reste vrai même si la valeur évolue. Ils permettent ainsi de respecter l’esthétique monochrome d’une charte graphique tout en garantissant l’accessibilité, et de modifier ultérieurement une teinte sans toucher aux composants.