Hiérarchie des usages
| Rôle dans l’UI | Couleur officielle |
|---|---|
| Action principale (CTA boutons, liens primaires) | Primary 600 (#2563eb) |
| Hover action principale | Primary 700 (#1d4ed8) |
| Titre coloré ponctuel | Primary 800 (#1e40af) |
| Texte principal | Gray 900 (#111827) |
| Texte standard | Gray 600 (#4b5563) |
| Texte secondaire (labels, légendes) | Gray 500 (#6b7280) — minimum informatif |
| Texte décoratif (sur fond sombre) | Gray 400 acceptable |
| Bordures | Gray 200 / 300 |
| Arrière-plan alternatif | Gray 50 / 100 |
| Accent décoratif | Accent 500 / 600 (gradient primary → accent) |
| Succès | Semantic Success (#10b981) |
| Avertissement | Semantic Warning (#f59e0b) |
| Erreur | Semantic Error (#ef4444) |
Règle clé pour le texte
Le texte informatif ne descend jamais sous Gray 500 (#6b7280). text-gray-400 est réservé au décoratif sur fond sombre (contraste garanti par le fond, pas par la couleur du texte).
Titre de carte
Description du service avec du texte de lecture confortable et un contraste AA (7:1).
Mention secondaire · 5 avril 2026
Hiérarchie : gray-900 titre, gray-600 body, gray-500 meta. Tous > 4.5:1.
Titre de carte
Description qui échoue au contraste AA : gray-400 sur blanc = 3.0:1, insuffisant pour du texte de lecture.
Titre en gray-500, body en gray-400. Échec WCAG, illisible pour beaucoup.
Action principale : bouton CTA
primary-600 + texte blanc. Hover primary-700. Contraste 8:1.
Utiliser success (vert) comme action principale. La couleur sémantique est réservée aux états (validation, succès).
Contraste WCAG
Gradly respecte WCAG 2.2 niveau AA sur tout le site.
| Type de texte | Ratio minimum | Exemple qui passe |
|---|---|---|
| Texte normal (< 18 px) | 4.5:1 | Gray 600 sur White = 7.0:1 ✅ |
| Large (≥ 18 px ou 14 px gras) | 3:1 | Primary 600 sur White = 4.5:1 ✅ |
| Composants UI (bordures, icônes porteuses d’info) | 3:1 | Gray 300 sur White = 3.1:1 ✅ |
Tester les combinaisons nouvelles avec un outil comme WebAIM Contrast Checker ou APCA.
Binaire vert/rouge — CVD-safe
- ✓ Communication écrite évaluée
- ✓ Gestion de projet en cours
- ✗ Analyse financière à valider
Icône + couleur : reste lisible pour les 8% d’hommes daltoniens.
- Communication écrite évaluée
- Gestion de projet en cours
- Analyse financière à valider
Couleur seule : indiscernable en protanopie/deutéranopie. L’information est perdue pour l’utilisateur daltonien.
CVD-safe (Color Vision Deficiency)
Environ 8 % des hommes sont atteints d’une forme de daltonisme rouge-vert (protanopie ou deutéranopie). Gradly prend cette contrainte en compte :
Règles de base
- Jamais de binaire vert/rouge seul pour distinguer deux états. Toujours ajouter icône, texte, motif en plus de la couleur.
- Le gradient primary → accent (bleu vers violet) reste perceptible sous protanopie et deutéranopie — il a été vérifié.
- Tester les nouvelles palettes avec un simulateur CVD (Coblis) avant approbation.
Palette accessible pour data viz (dans les illustrations)
| Sens | Couleur | Marqueur additionnel |
|---|---|---|
| Acquis / validé | Primary 600 bleu | Coche ✓, forme pleine |
| En cours | Accent 500 violet | Tiret, forme semi-pleine |
| Non acquis | Gray 500 | Croix ✗, forme vide |
Éviter l’usage exclusif de #10b981 (vert success) et #ef4444 (rouge error) en couple pour distinguer du contenu : toujours accompagner d’un icône ou label.
Le gradient Gradly
Le gradient de marque va de Primary 600 (#2563eb) vers Accent 600 (#7c3aed), utilisé sur :
- Les textes mis en avant (
bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent) - Les fonds décoratifs (hero section)
- La cover du brandbook (variante plus sombre : Primary 900 → Accent 800)
Pour les bannières et cover du brandbook : version enrichie avec radiaux lumineux par-dessus le linear-gradient, définie dans Cover.astro.