🎯 Intention

<aside> ✅ Pré-requis

On cherche à créer un système de couleurs fonctionnel, où on affecte chaque couleur à une intention sur l’interface.

On veut des associations harmonieuses et conformes aux normes d’accessibilité niveau AA.

C’est pourquoi on va générer et tester toutes les combinaisons qu’on utilisera dans l’UI

👉🏼 Points clés

<aside> 💡 Regarde les exemples pour bien comprendre les points clés

</aside>

Etape	Point clé	Raison
⚫ Choisir 4 nuances grises pour les textes

Exemple | - fg-defaultpour le texte général

fg-muted pour les textes secondaires
fg-subtle pour les placeholders
fg-on-emphasis pour combiner avec un background .emphasis | fg pour “foreground “(Premier plan)

plusieurs nuances pour permettre une hiérarchie | | ⚪ Choisir 3 nuances de blanc et gris pour les backgrounds neutres

Exemple | - bg-default , le principal

bg-subtle pour alterner avec un contraste léger
bg-emphasis pour le plus grand contraste | Créer des séparateurs visuels pour les éléments | | 🟡 Choisir 3 nuances par couleur de la palette

Exemple 1 et Exemple 2 | - [ROLE]-fg pour le texte

[ROLE]-subtle pour background de message
[ROLE]-emphasis pour background d’un item important (même couleur que [ROLE]-fg)
[ROLE]-muted pour les bordures

[ROLE] correspond à la fonction de la couleur, exemple success ou accent | Associer les couleurs aux intentions de l’interface

Exemple 1 et Exemple 2 | | 🤍 Créer les combinaisons de couleurs neutres

Exemple | - fg-default avec bg-default et bg-subtle

fg-muted avec bg-default et bg-subtle
fg-subtle avec bg-default
fg-on-emphasis avec bg-emphasis | Pouvoir tester les contrastes | | 💜 Créer les combinaisons pour les couleurs

Exemple | Pour chaque couleur

[ROLE]-fg avec bg-default ,bg-subtle et [ROLE]-subtle
[ROLE]-emphasis et fg-on-emphasis | Pouvoir tester les contrastes | | ✅ Tester le contraste de chaque combinaison de couleurs | Le contraste doit être supérieur à 4.5:1. Utiliser un outil automatisé (exemple) Sinon, ajuster les nuances | Être conforme niveau AA du WCAG 2.1 |

<aside> ℹ️

Le nom des variables (ex: fg-default) est inspiré du Design System de Github

</aside>

<aside> 💡 Tu peux ouvrir les images en grand pour mieux te rendre compte

</aside>