Générateur de charte graphique gratuit : Votre site devient une charte graphique avec ses couleurs, ses polices et ses règles

Qu'est-ce qu'une charte graphique ?

Une charte graphique, c'est le guide visuel de votre marque. Elle décrit votre logo, vos couleurs et vos polices, puis explique comment les utiliser.

Elle sert d'abord à garder la même image sur tous vos supports. Votre site, vos posts LinkedIn, vos emails et vos stands se ressemblent alors. Elle vous fait aussi gagner du temps : un graphiste freelance, une agence ou un nouveau salarié trouve les réponses seul, et vous validez plus vite, car les règles existent déjà.

Votre logo n'a pas la même couleur sur le site et sur la plaquette commerciale ? Chaque présentation utilise une police différente ? Ce flou vient presque toujours d'un manque de règles écrites. Toute charte graphique d'entreprise répond aux mêmes questions : qu'utilise-t-on, où, et comment ?

Que contient une charte graphique ?

Une charte complète couvre 7 éléments. Pour chacun, elle précise des règles concrètes et mesurables.

Commencez par le logo, les couleurs et les typographies : vos équipes s'en servent chaque jour.

Exemple de charte graphique

Prenons Maison Ardoise, un torréfacteur de café fictif. Il vend ses cafés en boutique et sur son site. Voici l'essentiel de sa charte graphique.

La palette de couleurs

Le brun sur fond crème atteint un contraste de 10,7:1. Le cuivre sur crème plafonne à 3,3:1 : Maison Ardoise le réserve donc aux grands textes et aux éléments décoratifs.

Les typographies

• Titres en Fraunces, graisse 700, 32 px pour le H1 et 24 px pour le H2.
• Texte courant en Inter, graisse 400, 16 px, et graisse 600 pour les mots importants.

Les règles du logo

• Laissez autour du logo un espace libre égal à la hauteur du grain de café du symbole.
• Affichez-le à 24 px de haut au minimum à l'écran.
• Ne le déformez pas, ne le recolorez pas et ne le posez jamais sur une photo chargée.

Comment créer une charte graphique en 7 étapes

1. Partez de votre positionnement. Notez vos valeurs, vos personas et l'image que vous voulez laisser. Chaque choix visuel doit s'y rattacher.
2. Faites l'inventaire de l'existant. Rassemblez votre site, vos présentations, vos brochures et vos posts. Repérez ce qui revient et ce qui diverge.
3. Fixez le logo et ses versions. Prévoyez une version couleur, une version monochrome et une version pour fond sombre. Définissez la zone de protection.
4. Définissez la palette. Choisissez une couleur principale, 1 ou 2 secondaires et des neutres. Notez les codes HEX et RVB pour l'écran, CMJN pour l'impression.
5. Choisissez vos polices. 2 polices suffisent souvent, une pour les titres et une pour le texte. Fixez les graisses et les tailles de chaque niveau.
6. Cadrez les images et la mise en page. Décrivez le style photo, les icônes et la grille. Montrez 2 ou 3 exemples réussis.
7. Rédigez, testez et diffusez. Testez vos règles sur 3 supports réels avant de les figer, puis partagez la charte avec toutes les personnes qui produisent vos supports.

La charte graphique d'un site web

Un site impose des contraintes que le papier ignore. Votre charte graphique de site web doit donc aller plus loin.

Des codes HEX précis

Le web lit les couleurs en HEX ou en RVB. Notez chaque code sans arrondi, sinon vos équipes obtiennent des teintes voisines.

Des contrastes conformes aux WCAG

Les règles WCAG fixent un contraste minimal entre le texte et son fond :

• texte courant : 4,5:1 au minimum ;
• grands textes : 3:1 au minimum. Les WCAG considèrent comme grand un texte de 24 px, ou de 18,66 px en gras.

Vérifiez chaque couple texte et fond de votre palette : vous saurez alors où chaque couleur peut servir.

Des polices pensées pour le web

Vérifiez que la licence de chaque police autorise l'usage web. Limitez le nombre de graisses, car chaque graisse ajoute un fichier à charger. Prévoyez aussi une police de repli si la police principale ne charge pas.

Vos développeurs apprécieront des variables CSS prêtes à l'emploi :

:root {
  --couleur-principale: #4A2C2A;
  --couleur-secondaire: #F5EDE0;
  --couleur-accent: #C8693A;
  --police-titres: "Fraunces", Georgia, serif;
  --police-texte: "Inter", Arial, sans-serif;
}

Créez votre charte graphique à partir de votre site

Votre site porte déjà votre identité. Le générateur gratuit de charte graphique de Mark AI part de son adresse : Mark lit la page et ses feuilles de style, puis en tire :

• la palette de couleurs, avec la couleur principale, les secondaires et les neutres, en HEX et en RVB ;
• les polices des titres et du texte, avec leurs graisses et leurs tailles ;
• le logo et l'icône du site.

Mark vérifie ensuite les contrastes selon les règles WCAG, puis rédige les règles d'usage : le rôle de chaque couleur, l'emploi des polices et du logo, ce qu'il faut faire et ce qu'il faut éviter. Vous copiez le résultat en variables CSS ou vous le téléchargez en PDF.

L'outil documente l'identité visible sur votre site. Il ne crée pas de logo et ne propose pas de nouvelles couleurs. Pour une charte complète, il vous indique ce qu'il reste à ajouter, comme les codes CMJN ou le style des photos.

Charte graphique, charte éditoriale et brand book : les différences

Ces 3 documents se complètent. Chacun répond à une question différente.

Le brand book réunit souvent les 2 chartes dans un même document. Pour la partie éditoriale, le générateur de charte éditoriale de Mark AI tire votre ton et vos règles d'écriture de vos pages.

Modèle de charte graphique : le sommaire type

Reprenez ce sommaire et adaptez-le à votre marque.

1. Introduction, avec le rôle du document, le contact du responsable et la date de mise à jour.
2. Logo, avec ses versions, sa zone de protection et ses interdits.
3. Couleurs, avec les codes HEX, RVB et CMJN et le rôle de chaque teinte.
4. Typographies, avec les polices, les graisses et la hiérarchie des titres.
5. Iconographie, avec le style et la taille des icônes.
6. Photos et illustrations, avec des exemples à suivre et à éviter.
7. Mise en page, avec la grille, les marges et les espacements.
8. Déclinaisons par support, du site web à la signalétique.
9. Ressources, avec le logo en SVG et PNG, les polices et les variables CSS.

Dans chaque section, donnez la règle, montrez un exemple, puis signalez l'erreur à éviter.

Les erreurs à éviter

• Multiplier les couleurs. Au-delà de 5 ou 6 teintes, vos équipes hésitent et la cohérence se perd.
• Donner des couleurs sans codes. « Bleu foncé » ne veut rien dire pour un développeur.
• Ignorer les contrastes. Une couleur jolie à l'écran peut rendre votre texte illisible.
• Oublier le digital. Pensez à l'icône du site, au mode sombre et aux formats des réseaux sociaux.
• Écrire des règles sans exemple. Une image montre en 1 seconde ce qu'un paragraphe explique mal.
• Choisir une police sans licence web. Vous risquez de devoir tout changer après la mise en ligne.
• Laisser le document dormir. Une charte que personne ne trouve ne protège pas votre marque.

Questions fréquentes sur la charte graphique