Couleurs - palette - Color

La palette de couleurs du système de design de l’État est définie par la charte graphique de l'État , elle permet de créer une cohérence entre les interfaces et d’offrir une expérience optimale à l’utilisateur. Leur respect renforce également la reconnaissance de la parole de l’État.

 

La palette de couleur

L’utilisation de la palette de couleurs est obligatoire pour l’ensemble des sites. Il est en conséquence prohibé d’utiliser d’autres couleurs que celles proposées.

 

La palette de couleur de l’État se décompose en :

  • couleurs de marque

  • couleurs d’interface

    • primaires

    • neutres

    • fonctionnelles

  • couleurs illustratives

 

Les couleurs de la marque de l'État

Elles sont utilisées dans le bloc marque qui permet à l’utilisateur d’identifier la marque de l'état.

$blue-france
$white
$red-marianne
#000091
RGB : 0, 0, 45
#fff
RGB : 255, 255, 255
#E1000F
RGB : 255, 0, 15

Les couleurs d’interface

Couleurs primaires

Elles sont utilisées pour marquer l’identité de l’état dans des composants qui véhiculent l’image de la marque, ou sur lesquels il est nécessaire d’attirer l’attention de l’utilisateur, tels que les éléments cliquables ou les états actifs.

 

$blue-france-100
$blue-france-200
$blue-france-300
#F2F2F9
RGB : 242, 242, 249
#E5E5F4
RGB : 229, 229, 224
#9A9AFF
RGB : 154, 154, 255
$blue-france-400
$blue-france-500
$blue-france-600
#7F7FC8
RGB : 127, 127, 200
#000091
RGB : 0, 0, 45
#000074
RGB : 0, 0, 116

 

 

$blue-france-700

 

 

#00006D
RGB : 0, 0, 109

 

 

 

Couleurs neutres

Couleurs de base utilisées dans les typographies, fonds, contours, et séparateurs dans la majorité des composants. Elles sont notamment utilisées dans les éléments non cliquables et pour représenter les états inactifs.

$g100
$g200
$g300
#F8F8F8
RGB :248, 248, 248
#F0F0F0
RGB :240, 240, 240
#E7E7E7
RGB :231 231, 231
$g400
$g500
$g600
#CECECE
RGB :206, 206, 206
#9C9C9C
RGB : 156 156, 156
#6A6A6A
RGB : 106,106, 106
$g700
$g750
$g800
#383838
RGB : 56, 56, 56
#2A2A2A
RGB : 30, 30, 30
#1E1E1E
RGB : 30, 30, 30
$white
$beige
#fff
RGB :255, 255, 255
#F9F8F6
RGB :249, 248, 246

 

Couleurs fonctionnelles

Couleurs utilisées exclusivement pour représenter des états et des statuts.

$success
$error
$info
#008941
RGB : 137, 65, 100
#E10600
RGB : 255, 6, 0
#0762C8
RGB : 7, 98, 200

 

Les couleurs illustratives

Cet ensemble de couleurs issues de la charte peut être utilisé à des fins d’animation, de décoration et d’illustration (illustrations, éléments graphiques).

Si vous les utilisez, veillez à vérifier les contrastes pour le respect des règles d'accessibilité et pour le confort de lecture.

Chaque couleur illustratives est disponible en 7 teintes comme le Bleu-France. Nous présentons ci-dessous la teinte 500. Vous pouvez retrouver l’intégralité des teintes en téléchargeant la librairie dans la section “Pour commencer - Designers”.

 

A-green-warm
B - green-light
C-green-warm
#958B62
RGB : 149, 139, 98
#91AE4F
RGB : 145, 174, 79
#169B62
RGB : 22, 155, 98
D - green-dark
E - green-soft
F - blue-soft
#466964
RGB : 70, 105, 100
#00AC8C
RGB : 0, 172, 140
#5770BE
RGB : 87, 112, 190
G - blue-dark
H - pink-soft
I - pink-dark
#484D7A
RGB : 72, 77, 122
#FF8D7E
RGB : 255, 141, 126
#D08A77
RGB : 208, 138, 119
J - pink-light
K - yellow-medium
L - yellow-dark
#FFC29E
RGB : 255, 194, 158
#FFE800
RGB : 255, 232, 0
#FDCF41
RGB : 253, 207, 65
M - orange-medium
N - orange-dark
O - orange-soft

 

#E18863
RGB : 225, 136, 99
#FF6F4C
RGB :255, 111, 76

 

P - purple
Q - brown

 

#7D4E5B
RGB : 125, 78, 91
#A26859
RGB : 162, 104, 89

 

 

Usage et correspondance des couleurs (thème clair / sombre)

 

Le DSFR propose des composants adaptés à deux modes de couleurs :

  • Le thème clair : pour être accessible sur fond clair.

  • Le thème sombre : pour être accessible sur fond foncé.

L’utilisation du thème sombre est notamment recommandé pour réduire la consommation d'énergie et réduire la fatigue oculaire. Il n'est pas possible de mixer composants en thème clair / sombre.

Les correspondances de couleurs entre ces deux thèmes ont été définies en fonction des usages sur les différents composants. Elles sont automatiquement appliqués lorsque vous installer le thème sombre sur votre site.

Pour les développeurs

Il est possible d’activer le thème sombre en ajoutant l'attribut data-rf-theme="dark" à la balise html

 

Thème clair

Thème sombre

Usage

Contexte

Composants

Thème clair

Thème sombre

Usage

Contexte

Composants

$blue-fr-500

 

$blue-fr-300

État cliquable

Fond

Boutons primaires

Bordure

Boutons secondaires

Typographie

Liens

État actif

Fond

Pagination

Bordure

Navigation principale, onglets

$blue-fr-500

$blue-fr-500

État actif

Typographie

Navigation principale, onglets

$blue-fr-100

$g750

État cliquable

Fond

Onglets

$blue-fr-200

$blue-fr-300

État cliquable

Fond

Tags

État actif

Fond

Navigation principale

$white

$g800

Par défaut

Fond

Page

Composants standards

$beige

$g750

Alternatif

Fond

Page

Pied de page, sommaire

$g100

$g750

Alternatif

Fond

Page

$g200

$g700

Par défaut

Fond

Composants non cliquables : Mise en avant, tags

Champs de saisie

Inactif

Fond

Tous

$g300

$g600

Alternatif

Bordures

Contours et séparateurs

$g400

$g500

Par défaut

Bordures

Contours et séparateurs

$g600

$g300

Par défaut

Typographie

Texte mention

$g600

$g400

État inactif

Typographie

Tous

$g700

$g200

Par défaut

Typographie

Corps de texte

Bordure

Tableaux

$g800

$white

Par défaut

Typographie

Titres

$white + ombre MD

$g750 + ombre MD

Sticky et scroll

fond + ombre

En-tête, zone d’action modale

$error

$error-dark-mode

Erreur

Fond, contour et typographie des composants qui portent l'information ou le statut “error”

Champs de saisie

$succes

$succes-dark-mode

Valide

Fond, contour et typographie des composants qui portent l'information ou le statut “succes”

Champs de saisie

$info

$info-dark-mode

Information

Fond, contour et typographie des composants qui portent l'information ou le statut “info”

À venir

 

Règles d’usage

Utilisation

La couleur doit être utilisée dans le respect de la charte et des règles définies dans la documentation de chaque composant. Cela dans l’objectif d’optimiser l’affichage des composants mais également la compréhension des interfaces.

  • Il n’est pas permis de remplacer la couleur du composant si cela n’est pas indiqué dans la documentation

  • Les trois couleurs autorisées en fonds de pages sont

    • En thème clair : le $g100, $white ou $beige

    • En thème sombre : le $g800 ou le $g750

  • Chaque couleur a une nomenclature normée ( communément appelé design token) qu’il est obligatoire d’utiliser dans vos design (exemple : $blue-france, $red-marianne, $success etc…)

 

Pour les couleurs illustratives :

Dans les illustrations, il est important en premier lieu de sélectionner des couleurs harmonieuses et correspondant à la thématique. Éviter un nombre de teintes trop important qui compliqueront la conception et la force de l’illustration.

Accessibilité

Vos interfaces doivent être conformes aux exigences du Référentiel Général d’Amélioration de l’Accessibilité - RGAA dans sa version 4.

  • toute information visuelle (exemple couleur ou illustration).doit être accompagnée d’une information textuelle dans le code (exemple classe, titre, description ou modificateur) Ces règles sont détaillé au cas par cas dans la section Accessibilité de chaque composant.

  • vous devez respecter des ratios de contraste accessibles ;

  • l’ensemble des composants proposés respecte les normes exigés par le RGAA, mais lors de vos modifications de couleurs, vous devrez vérifier vos propres contrastes. Vous pouvez utiliser des outils en ligne ou des plugins comme Stark ou Cluse.

 

Pour connaître la réglementation, vous pouvez vous rendre sur ce site : http://references.modernisation.gouv.fr/referentiel/introduction-RGAA.html