Logo, couleurs et typographie

Charte graphique

Identité

Charte d’exemple. Remplacez chaque élément par ceux de votre marque : tout est enregistré dans ce navigateur.

Charte graphique

Couleurs

Une principale et une secondaire, chacune avec une variante claire et une sombre, plus les couleurs du texte et du fond. Les variantes se calculent seules tant que vous ne les modifiez pas.

Combinaisons texte et fond

Ratio WCAG de chaque couleur de texte (en ligne) sur chaque couleur de fond (en colonne). Une case ouvre la paire dans l’onglet Contraste.

  • AA ou AAA : tous les textes
  • AA grand : grands textes et interface
  • Échec : à éviter
Contraste de chaque couleur de texte, en ligne, sur chaque couleur de fond, en colonne

Typographie

Une police pour les titres, une pour le texte courant, et une échelle de tailles. Choisissez une famille, une police installée ou importez son fichier.

Aa

Titres ·

Aa

Un texte courant se lit sans effort quand sa police, sa taille et son interligne restent sobres. Gardez des lignes d’environ soixante-cinq caractères et un contraste d’au moins 4,5:1.

Texte courant ·

Hiérarchie des textes

Tailles, graisses et interlignes de chaque niveau de texte
NiveauTailleGraisseInterligneContraste minimalAperçu

Charte graphique

La version définitive, composée à partir de vos réglages : logo, couleurs et typographies. C’est elle qui s’imprime et s’exporte en PDF.

Charte graphique

Logo

Le logo s’utilise dans ses couleurs d’origine sur un fond clair. Sur la couleur principale ou sur un fond sombre, il passe en blanc.

Zone de protection
Un espace vide de de sa hauteur, tout autour.

Taille minimale
de haut.

  • Fond sombre
  • Couleur principale
  • Noir
  • Blanc
2Logo

Couleurs

La couleur principale porte l’identité, la secondaire l’accompagne. Leurs variantes claire et sombre servent aux fonds et aux accents.

Le texte et le fond composent les pages courantes.

3Couleurs

Typographie :

4Typographie des titres

Typographie :

5Typographie du texte

Variables CSS