Usage des couleurs
Accessibilité
Toutes les couleurs utilisées en interface sont testées RGAA 4.1, Niveau AA minimum et respectent les contrastes suivants :
- Texte normal sur fond : ≥ 4.5:1
- Icône/texte décoratif : ≥ 3:1
Exemple de gestion des couleurs (dans Figma) :
|
Couleur de fond |
Couleur de text |
Contrast |
Note |
Example |
|---|---|---|---|---|
|
Surface/Base→Neutral-0→#FFFFFF |
Text/On-Base/Primary→Neutral-900→#21282B |
15.06:1 |
AAA |
|
|
Surface/Base→Neutral-0→#FFFFFF |
Text/On-Base/Secondary→Neutral-700→#3A4545 |
8:1 |
AAA |
|
|
Surface/Layer→Neutral-50→#F4F6F6 |
Text/On-Base/Primary→Neutral-900→#21282B |
13.89:1 |
AAA |
|
|
Surface/Layer→Neutral-50→#F4F6F6 |
Text/On-Base/Secondary→Neutral-700→#3A4545 |
7.38:1 |
AAA |
|
|
Button/On-Base/Primary/Background/Default→Purple-500→#540ABD |
Button/On-Base/Primary/On-background/Default→Neutral-0→#FFFFFF |
9.74:1 |
AAA |
|
Primitive colors / Identity / Purple
Colors
#fdfaff
#f7f0ff
#efe1fe
#d9bafd
#6e0bef
#540abd
#4f1e9a
#48277c
#402b64
#372853
Purple / 50
#fdfaff
Purple / 100
#f7f0ff
Purple / 200
#efe1fe
Purple / 300
#d9bafd
Purple / 400
#6e0bef
Purple / 500
#540abd
Purple / 600
#4f1e9a
Purple / 700
#48277c
Purple / 800
#402b64
Purple / 900
#372853
Text
DNP
1.1
Text
DNP
1.2
Text
DNP
1.6
Text
AA
6.9
Text
AAA
9.4
Text
AAA
10.2
Text
AAA
10.9
Text
AAA
11.6
Text
AAA
12.8
Text
DNP
1.1
Text
DNP
1.1
Text
DNP
1.5
Text
AA
6.4
Text
AAA
8.8
Text
AAA
9.5
Text
AAA
10.2
Text
AAA
10.8
Text
AAA
11.9
Text
DNP
1.2
Text
DNP
1.1
Text
DNP
1.4
Text
AA
5.7
Text
AAA
7.8
Text
AAA
8.5
Text
AAA
9.1
Text
AAA
9.7
Text
AAA
10.6
Text
DNP
1.6
Text
DNP
1.5
Text
DNP
1.4
Text
AA18
4.2
Text
AA
5.7
Text
AA
6.2
Text
AA
6.7
Text
AAA
7.1
Text
AAA
7.8
Text
AA
6.9
Text
AA
6.4
Text
AA
5.7
Text
AA18
4.2
Text
DNP
1.4
Text
DNP
1.5
Text
DNP
1.6
Text
DNP
1.7
Text
DNP
1.9
Text
AAA
9.4
Text
AAA
8.8
Text
AAA
7.8
Text
AA
5.7
Text
DNP
1.4
Text
DNP
1.1
Text
DNP
1.2
Text
DNP
1.2
Text
DNP
1.4
Text
AAA
10.2
Text
AAA
9.5
Text
AAA
8.5
Text
AA
6.2
Text
DNP
1.5
Text
DNP
1.1
Text
DNP
1.1
Text
DNP
1.1
Text
DNP
1.2
Text
AAA
10.9
Text
AAA
10.2
Text
AAA
9.1
Text
AA
6.7
Text
DNP
1.6
Text
DNP
1.2
Text
DNP
1.1
Text
DNP
1.1
Text
DNP
1.2
Text
AAA
11.6
Text
AAA
10.8
Text
AAA
9.7
Text
AAA
7.1
Text
DNP
1.7
Text
DNP
1.2
Text
DNP
1.1
Text
DNP
1.1
Text
DNP
1.1
Text
AAA
12.8
Text
AAA
11.9
Text
AAA
10.6
Text
AAA
7.8
Text
DNP
1.9
Text
DNP
1.4
Text
DNP
1.2
Text
DNP
1.2
Text
DNP
1.1
Couleurs identitaires
Violet
Le violet est la couleur principale d’interaction. Il est réservé exclusivement aux éléments fonctionnels :
- Boutons primaires
- Liens
- États hover et selected (card, radio, checkbox, accordion, etc.)
- Filtres, switch, datepicker
❌ Mauvais usage :
- Ne pas utiliser sur du texte statique.
- Ne pas utiliser pour des éléments décoratifs (illustrations, pictos). Utiliser un vert identitaire pour les éléments décoratifs.
Vert
Le vert identitaire et ses variantes sont strictement décoratifs. Il peut être utilisé pour dans les illustrations, les bannières etc.
✅ Bon usage :
- Illustration
- Icônes
- Pictogrammes
- Section ou élément mis en avant (ex : section hero)
❌ Mauvais usage :
- Texte vert sur fond non contrasté
- Utilisation du vert dans des composants interactifs et fonctionnels
- Plus de 10% de vert dans une interface (risque de confusion visuelle)
Couleurs de fond
Surfaces
Les couleurs de fond servent à distinguer les différents niveaux de profondeur dans l’interface.
|
Token couleur |
Utilisation |
|---|---|
|
Surface/Base |
Fond principal des pages et sections. Surfaces neutres permettant de maximiser le contraste avec le texte et les éléments interactifs. |
|
Surface/Layer |
Fonds secondaires ou couches superposées au fond principal. Utilisé pour créer de la profondeur ou séparer des blocs sans trop de contraste. |
|
Surface/Overlay |
Couleur d’overlay semi-opaque pour les modales, menus latéraux, écrans d’attente. Sert à assombrir l’arrière-plan tout en mettant en avant un contenu (focus). |
|
Surface/Contrasted |
Fonds à fort contraste pour des messages importants ou statuts positifs (validation, confirmation). |
|
Surface/Contrasted neutral |
Fond sombre pour sections ou composants nécessitant une ambiance inversée (dark). |
Fonds contrastés
Sur des surfaces spécifiques (ex : menus flottants, bannières colorées), l’usage de couleurs contrastées est encadré.
L’utilisation du vert contrasté pour distinguer un élément doit être minime, et uniquement sur l’élément le plus important d’une page pour diriger l’attention d’un utilisateur comme un menu latéral ou une bannière/section dans une landing page.
✅ Bon usage :
- Utiliser le token on-contrasted pour boutons/texte et le token contrasted pour la couleur de fond
Bordures
Deux niveaux de contraste sont disponibles pour souligner ou hiérarchiser les éléments. À utiliser pour structurer des composants comme les cards, tableaux etc.
Couleurs système
Ces couleurs ne doivent jamais être utilisées pour styliser des éléments décoratifs ou visuels de branding.
|
Type |
Utilisation |
|---|---|
|
Success |
Validation de formulaire, badge de succès,… |
|
Warning |
Message temporaire, info partielle,… |
|
Error |
Champ invalide, notification d’échec,… |
Couleurs pour illustrations
Les couleurs dites “étendues” (dont le vert identitaire) sont réservées à :
- Illustrations figuratives ou abstraites
- Icônes et pictogrammes (non interactifs)
→ Utiliser le token: Illustration Primitive colors/Identity/Green
📌 Ces couleurs ne doivent pas être utilisées dans des composants UI ou des éléments interactifs. Sauf sur fond contrasté vert, le mode on-contrasted est à utiliser.
Synthèse d’usage des couleurs
|
Type de couleur |
Rôle |
Couleur(s) concernées |
Bon usage |
Mauvais usage |
|---|---|---|---|---|
|
Violet |
Fonctionnel/Interactif |
Violet identitaire |
Boutons, états actif / survol |
Texte statique, décorations |
|
Vert |
Décoratif |
Vert identitaire + variantes |
Illustrations, pictos, zones visuelles |
Eléments interactifs, composants, textes |
|
Système |
Feedback |
Success, Warning, Error |
Formulaires, notifications |
Non-sémantique |
|
Neutres |
Structure |
Surface, Border, Neutrals |
Fonds, surfaces, bordures |
Interactions directes |