Couleur

La couleur donne un signal clair à la marque sans concurrencer le contenu. Utilisez des jetons nommés plutôt que des valeurs littérales afin que la même décision se prolonge dans les sites, les documents, les présentations et les futurs médias.

Couleurs de base, d’accent et neutres#

Les couleurs de base établissent la reconnaissance et le contraste de lecture. Orange signal est la seule couleur d’accent : réservez-la à l’identité, à l’emphase et à un nombre limité d’actions intentionnelles. Les neutres créent les surfaces calmes et les limites structurelles qui les entourent.

Couleurs de base

Noir presque pur Aa

Noir presque pur

color.ink

17.88:1 rapport de contraste · texte normal AA des WCAG

Papier chaud Aa

Papier chaud

color.paper

17.88:1 rapport de contraste · texte normal AA des WCAG

Couleur d’accent

Orange signal Aa

Orange signal

color.accent

4.76:1 rapport de contraste · texte normal AA des WCAG

Texte d’accent accessible Aa

Texte d’accent accessible

color.accent-text

5.03:1 rapport de contraste · texte normal AA des WCAG

Sur l’accent Aa

Sur l’accent

color.on-accent

4.76:1 rapport de contraste · texte normal AA des WCAG

Neutres

Ligne discrète Aa

Ligne discrète

color.line

13.17:1 rapport de contraste · texte normal AA des WCAG

Blanc Aa

Blanc

color.white

19.03:1 rapport de contraste · texte normal AA des WCAG

Noir Aa

Noir

color.black

19.74:1 rapport de contraste · texte normal AA des WCAG

Usage fonctionnel#

Texte#

Utilisez Noir presque pur pour le texte de lecture principal et Papier chaud pour le texte inversé sur une surface sombre approuvée. Orange signal est une couleur d’accent, pas la couleur par défaut du corps du texte. Ne créez pas une nouvelle couleur de texte pour résoudre un problème local de mise en page.

Arrière-plans et surfaces#

Papier chaud est l’arrière-plan par défaut. Noir presque pur et Noir créent des moments intentionnels à contraste élevé; Blanc et Ligne discrète soutiennent les surfaces surélevées et la structure. Gardez les grands champs de couleur assez rares pour que la surface de lecture reste calme.

Appels à l’action et emphase#

Orange signal marque la marque, une action principale, un état courant ou le focus clavier. Associez-le à un indice qui n’est pas de couleur lorsqu’il communique un état, et ne l’utilisez pas seulement pour décorer du contenu sans lien.

Couleur de l’interface Web#

Couleur Web définit les rôles propres à l’implémentation, les associations de premier plan approuvées et les contrôles de contraste WCAG pour les sites Web. Utilisez cette page pour le travail d’interface; utilisez cette page de fondation pour les décisions qui touchent aussi les publications, les présentations et les autres surfaces de marque.