Couleur
Papel crème, encre chaude et orange vif. Feitio utilise peu de couleur par intention : le raffinement réside dans combien de couleurs restent à l'extérieur.
Sur cette page
Rôles
Aucun composant ne connaît une couleur ; il connaît un rôle : surface, texte, accent. Chaque thème remplit les mêmes rôles, c'est pourquoi changer de thème, ou de jour en nuit, ne brise rien.
De plus : on-accent (texte sur l'orange), line (lignes), shadow (l'ombre du papier) et une surface pour chaque statut (ok-surface, warn-surface, error-surface).
Règles
Un orange par écran
L'accent va sur l'action principale et rien d'autre. Les liens et les notes utilisent l'orange fort, plus sombre, qui se lit comme du texte.
Don’t
Titre et bouton en orange : l'œil ne sait pas où aller.
La couleur ne parle jamais seule
Un statut est toujours accompagné d'une icône et d'un mot, pour les personnes qui ne peuvent pas distinguer les couleurs et pour l'impression en noir et blanc.
Do
Icone, mot et couleur ensemble.
Don’t
Deux points : pour les personnes qui ne peuvent pas distinguer les couleurs, ils sont identiques.
L'erreur est du vin, jamais de l'orange
Le vin a été séparé de l'orange afin qu'une erreur n'aie jamais l'apparence de l'action principale.
Aucune couleur écrite à la main
Toujours le rôle, var(--feitio-color-…). Une couleur écrite à la main ne change pas la nuit ou sur une façade.
Jour et nuit
La nuit n'est pas le jour inversé. Chaque rôle a sa propre valeur dans l'obscurité : le papier devient un charbon chaud, le crème devient l'encre, et l'orange des liens s'allume pour rester lisible. L'orange de l'action principale est identique dans les deux modes, profond, avec du texte en crème. Sans choix depuis la page, Feitio suit le mode système.
Crème, encre presque noire, orange.
surface: oklch(96% 0.018 80)
Charbon chaud, crème comme encre, le même orange.
surface: oklch(22% 0.016 55)
Façades
- À l'extérieur du travail (une page de boutique) on obtient une façade : un thème qui ne change que les couleurs, remplissant les mêmes rôles.
- La typographie, la forme, l'espace et le mouvement restent de Feitio.
- Une façade naît en version jour et obtient une version nocturne lorsque le travail le demande.
- Le test de contraste s'applique également : une façade qui échoue ne pénètre pas.
Contraste
Tout couple portant du texte ou un sens passe WCAG 2.2 AA, jour et nuit : 4,5 pour le texte, 3 pour les formes. Le test de Feitio vérifie chaque couple et rejette la construction si l'un échoue.
| Pair | Utiliser | Jour | Nuit | Minimum |
|---|---|---|---|---|
text / surface | texte principal | 13,9 | 14,1 | 4,5 |
text-soft / surface | texte d'appui | 6,4 | 8,1 | 4,5 |
accent-strong / surface | liens et notes | 5,8 | 8,0 | 4,5 |
on-accent / accent | texte du bouton principal | 5,0 | 5,0 | 4,5 |
accent / surface | bouton principal, focus | 4,8 | 3,2 | 3 |
warn / warn-surface | notice d'attention | 4,8 | 7,5 | 4,5 |
La formule du WCAG 2 surestime le texte sombre sur des couleurs de teinte moyenne saturées : l'ancien orange, avec un texte sombre, a passé avec 5.2 et fatigue toujours les yeux. Ainsi, l'orange est profond et le texte dessus est crème ; la mesure perceptuelle (APCA) confirme cela, avec Lc 79 contre 40 auparavant.