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
color.ink17.88:1 rapport de contraste · texte normal AA des WCAG
Papier chaud
color.paper17.88:1 rapport de contraste · texte normal AA des WCAG
Couleur d’accent
Orange signal
color.accent4.76:1 rapport de contraste · texte normal AA des WCAG
Texte d’accent accessible
color.accent-text5.03:1 rapport de contraste · texte normal AA des WCAG
Sur l’accent
color.on-accent4.76:1 rapport de contraste · texte normal AA des WCAG
Neutres
Ligne discrète
color.line13.17:1 rapport de contraste · texte normal AA des WCAG
Blanc
color.white19.03:1 rapport de contraste · texte normal AA des WCAG
Noir
color.black19.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.