Couleurs - Colors

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 la reconnaissance de la parole de l’État.

Chaque couleur est représentée par un “design token”, c’est-à-dire un nom transverse au design (à travers les bibliothèques Sketch et Figma) et au code.

Convention de nommage des tokens

La nomenclature des tokens d’options est la suivante :

COULEUR- NOM - VARIANTE - INDICE - ÉTAT

  • La couleur indique la nuance (sur l’arc en ciel) : bleu, vert, rouge, gris…
  • Le nom est celui hérité de la charte de l'État, le cas échéant.
  • La variante indique si la couleur est une couleur de référence (“main”), une variante pour thème clair (“sun”) ou thème sombre (“moon”). La plupart des couleurs n’ont pas de variante.
  • L’indice est le niveau de luminosité de la couleur, et sert à vérifier l’accessibilité des associations de couleurs. Consultez l’article de présentation détaillée du système de couleurs  pour en savoir plus.
  • L'état indique, le cas échéant, la variation de la couleur au survol ou en état actif.

À chaque token est rattaché une valeur hexadécimale, une valeur RGB et une valeur HSL. Par exemple, la couleur de référence pour le vert “Tilleul Verveine” :

green-tilleul-verveine-main-707

#B7A73F
rgb(183,167,63)
hsl(52deg 48.8% 48.2%)

hover
#a19237
rgb(161,146,55)

active
#908331
rgb(144,131,49)

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 du Système de Design de l’État comprend deux parties : la palette “thème clair” et la palette “thème sombre”. Chacune de ces parties se décompose en catégories :

Couleurs primaires

Construites à partir des deux grandes couleurs de la marque de l'État (bleu et rouge, le blanc étant intégrés aux neutres), elles sont utilisées pour marquer l’identité de l’État dans des composants qui véhiculent l’image de la marque (comme le bloc 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.

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.

Couleurs système

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

Couleurs illustratives

Couleurs complémentaires de la charte de l'État, pouvant servir à la composition d’illustration. Dans le contexte du Système de Design de l'État, ces couleurs sont également utilisables pour accentuer des composants, c’est-à-dire varier la couleur de certains éléments (texte, fonds, bordures) pour apporter de la diversité ou une hiérarchie visuelle.

L’utilisation des couleurs illustratives est possible sur certains composants :
Voir la liste des composants accentuables.

Le Système de Design de l'État 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 mélanger les couleurs du thème clair et celles du thème sombre.

Les correspondances suivantes sont intégrées en code, en tant que sous-couche technique. Pour appliquer une couleur à un contexte, préférer l’utilisation des tokens de décision, qui intègrent la correspondance thème clair / thème sombre.

Couleurs primaires

Bleu France
Correspondance
Thème clair
Thème sombre
strong $blue-france-sun-113 $blue-france-625
softest $blue-france-850 $blue-france-200
light $blue-france-925 $blue-france-125
lighter $blue-france-950 $blue-france-100
lightest $blue-france-975 $blue-france-75
main $blue-france-main-525 $blue-france-main-525
inverted $blue-france-975 $blue-france-113
Rouge Marianne
Correspondance
Thème clair
Thème sombre
strong $red-marianne-425 $red-marianne-625
softest $red-marianne-850 $red-marianne-200
light $red-marianne-925 $red-marianne-125
lighter $red-marianne-950 $red-marianne-100
lightest $red-marianne-975 $red-marianne-75
main $red-marianne-main-472 $red-marianne-main-472
inverted $blue-france-975 $blue-france-113
Couleurs neutres
Correspondance
Thème clair
Thème sombre
black $grey-50 $grey-1000
darkest $grey-75 $grey-975
dark $grey-125 $grey-925
strongest $grey-200 $grey-850
strong $grey-425 $grey-625
soft $grey-625 $grey-425
softest $grey-850 $grey-200
light $grey-925 $grey-125
lighter $grey-950 $grey-100
lightest $grey-975 $grey-75
white $grey-1000 $grey-50
elevated $grey-1000 $grey-75
main $grey-main-525 $grey-main-525
Couleurs système
Correspondance Thème clair Thème sombre
strong $info-425 $info-625
softest $info-850 $info-200
light $info-925 $info-125
lighter $info-950 $info-100
lightest $info-975 $info-75
main $info-main-525 $info-main-525
softest $grey-850 $grey-200
light $grey-925 $grey-125
lighter $grey-950 $grey-100
lightest $grey-975 $grey-75
white $grey-1000 $grey-50
elevated $grey-1000 $grey-75
main $grey-main-525 $grey-main-525
Couleurs illustratives
Correspondance Thème clair Thème sombre
strong /couleur sun/ /couleur moon/
softest $xx-850 $xx-200
light $xx-925 $xx-125
lighter $xx-950 $xx-100
lightest $xx-975 $xx-75
main /couleur main/ /couleur main/
softest $grey-850 $grey-200
light $grey-925 $grey-125
lighter $grey-950 $grey-100
lightest $grey-975 $grey-75
white $grey-1000 $grey-50
elevated $grey-1000 $grey-75
main $grey-main-525 $grey-main-525

Règles d’usage

Dans les composants existants

Au sein de l’existant, des tokens de décision sont systématiquement appliqués, en vue d’optimiser l’affichage des composants mais également la compréhension des interfaces.

Pour comprendre le rôle et le fonctionnement des tokens de décisions, consultez la page dédiée. Il n’est pas permis de remplacer un token de décision au sein d’un composant si cela n’est pas indiqué dans la documentation (section “Accentuation” dans les pages de composants).

Accentuation

L’accentuation des composants est réglementée : un tableau récapitulatif des éléments qu’il est possible d’accentuer sur chaque composant est détaillé dans la page de documentation (paragraphe ‘Personnalisation > Couleurs d’accent’).

À l’heure actuelle, seuls les composants suivants sont ouverts à l’accentuation :

D’autres composants seront ajoutés à ce périmètre au fur et à mesure des mises à jour du Système de Design de l'État.
N’hésitez pas à nous faire des suggestions sur le sujet, sur le Slack ou en ouvrant un ticket.

Au-delà du Système de Design de l'État

Si vous êtes amenés à créer des pages uniques ou des composants inédits, prenez soin d’utiliser au maximum les tokens de décisions. Si ce n’est pas possible, merci de respecter les correspondances clair / sombre indiquées ci-dessus.

Hors des composants

La couleur est utile en dehors des composants :

  • Pour les fonds de page, il existe des tokens de décision dédiés.
  • Pour les pictogrammes illustratifs, utiliser les tokens appropriés.
  • Pour 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 (moins de 5) 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ées 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 :
Critères et tests - RGAA