Palette pour sites et applications françaises avec le DSFR
Le Systeme de Design de l'Etat français (DSFR) impose une palette couleur precise pour tous les services publics numeriques. Pour les projets prives, construire une palette coherente a partir d'une couleur de base est la premiere etape de tout systeme de design. Cet outil genere automatiquement les teintes, nuances et harmonies complementaires. Les configurations Tailwind CSS personnalisees , tres populaires dans les equipes frontend françaises , acceptent directement les valeurs HEX generees dans le fichier tailwind.config.js.
Le RGAA 4.1 (critere 3.3) exige un rapport de contraste de 4,5:1 pour le texte courant. Verifiez chaque nuance generee avec le Verificateur de Contraste avant de l'utiliser pour des textes ou des composants interactifs. Les couleurs autour de 50% de luminosite echouent souvent aux deux tests (texte blanc sur fond colore ET texte noir sur fond colore).
Exigences de contraste WCAG / RGAA
| Niveau | Texte normal | Grand texte (18pt+ ou 14pt gras) |
|---|---|---|
| AA (minimum) | 4,5:1 | 3:1 |
| AAA (renforce) | 7:1 | 4,5:1 |
Limites des schemas d'harmonie chromatique
Les schemas d'harmonie (complementaire, triadique, etc.) decrivent des relations mathematiques sur la roue HSL , ils ne garantissent pas un resultat esthetique dans tous les contextes. Un rouge et un vert complementaires sont techniquement valides, mais inappropries pour une interface medicale ou financiere. Utilisez la palette generee comme point de depart et adaptez-la au ton de marque, au secteur et au public cible.
De la palette aux tokens de design
Copiez les proprietes CSS personnalisees dans votre bloc :root. Pour un workflow de tokens, les valeurs HEX s'importent directement dans Style Dictionary, Theo ou Figma Tokens. Utilisez l'Extracteur de Palette pour partir d'une image existante et affiner ici les teintes et nuances.