Charte graphique

Une charte graphique est le document qui rassemble les règles visuelles d’une marque et la manière de les appliquer : quel logo, dans quelles couleurs, avec quelles polices, et ce qu’il ne faut jamais faire. Elle sert à garder une marque reconnaissable, quel que soit le support et quelle que soit la personne qui l’utilise.

Charte graphique, identité visuelle, brand book : ne pas tout mélanger

Ces termes se croisent, et les confondre brouille les demandes. L’identité visuelle est le système de signes qui rend la marque identifiable : logo, couleurs, typographies, images. La charte graphique en est le mode d’emploi. Le brand book va plus loin, car il ajoute la plateforme de marque (mission, valeurs, ton de voix) à la partie visuelle. Le style guide, lui, descend au niveau de l’exécution, souvent pour le web ou l’éditorial.

Un dernier voisin mérite d’être cité : la charte éditoriale. Elle cadre les mots (ton, vocabulaire, façon de titrer) quand la charte graphique cadre les images. Les deux se complètent. En anglais, on cherchera plutôt « brand guidelines ».

Les détails qui font la différence dans chaque rubrique

Le logo : versions, zone de respect, interdits

Une bonne charte ne se contente pas de montrer le logo. Elle donne ses déclinaisons (horizontale, verticale, version réduite, monochrome, sur fond sombre), la zone de protection à laisser libre autour de lui, la taille minimale d’affichage, et la liste de ce qu’on s’interdit : étirer le logo, le recolorer, lui ajouter une ombre, le poser sur une image illisible.

Les couleurs : des codes, pas des intentions

« Un bleu profond » n’est pas une consigne. La charte donne chaque couleur avec ses valeurs selon l’usage : HEX et RVB pour l’écran, CMJN ou Pantone pour l’impression. Elle fixe aussi les proportions (une couleur dominante, un accent), les associations autorisées et les couples texte et fond validés pour la lisibilité.

Les typographies : titres, texte, solution de repli

On y trouve la police des titres et celle du texte, les graisses retenues, des tailles et interlignes types, et une police de remplacement quand la première n’est pas disponible. Un point souvent oublié : la licence. Un usage sur un site, dans une application ou en impression n’est pas toujours couvert par la même licence, et mieux vaut le savoir avant de livrer.

Images, icônes et mise en page

Photographies (cadrage, lumière, sujets), illustrations, icônes (épaisseur du trait, angles), grille et marges : ces règles évitent l’effet patchwork sur les réseaux sociaux et dans les présentations. Un ou deux exemples « à faire » et « à éviter » valent mieux qu’une page d’explications.

Comment construire une charte graphique, étape par étape

1. Partir du positionnement. Une charte traduit en formes ce que la marque veut dire. Sans positionnement de marque clair, on dessine à l’aveugle.
2. Faire l’inventaire de l’existant. Lister tous les supports actuels, ce qui fonctionne et ce qui jure.
3. Poser le socle. Logo, palette et typographies d’abord : tout le reste en découle.
4. Tester sur des cas réels. Page d’accueil, signature d’e-mail, publication sociale, présentation, affiche. Une charte qui n’a jamais été appliquée a des trous, et ils se voient tout de suite.
5. Écrire les règles et les interdits, avec des exemples bons et mauvais.
6. Livrer les fichiers de travail. Logos en SVG, PNG et PDF, palettes, polices, modèles de documents. Une charte sans fichiers oblige chacun à bricoler.
7. Désigner un responsable et un lieu unique où trouver la dernière version, datée.

Une charte pour le web : ce qui change

Sur écran, la charte doit répondre à des questions que le papier ignore. La première est le contraste : les règles d’accessibilité du W3C (WCAG, niveau AA, consultées en octobre 2026) demandent un rapport de contraste d’au moins 4,5 pour 1 pour le texte courant et 3 pour 1 pour les grands textes. Une jolie palette qui échoue à ce test est une palette à corriger, pas à défendre.

Viennent ensuite le comportement du logo en petit format et en favicon, les polices web (poids de chargement, police de repli), l’adaptation des titres sur mobile et, de plus en plus, le mode sombre. Surtout, la charte devient un système : couleurs, espacements et typographies se transforment en design tokens, puis en composants réutilisables dans un design system. Nos projets prolongent souvent la charte dans le webdesign : couleurs et typographies posées en variables dans Figma, puis reprises dans Webflow.

Quel format : PDF, page web ou fichier Figma ?

Le PDF circule facilement, mais il vieillit vite et personne ne sait lequel est le dernier. Une page web dédiée reste à jour et permet de télécharger les fichiers. Un fichier Figma donne les composants prêts à l’emploi aux équipes qui conçoivent. Beaucoup de marques combinent les trois : un PDF court pour les partenaires externes, une page ou un fichier de référence pour les équipes.

Les erreurs qui reviennent

• Une charte trop longue, que personne n’ouvre.
• Des consignes vagues (« des couleurs chaudes ») au lieu de codes précis.
• Un seul logo fourni, sans version sur fond sombre ni version réduite.
• Une palette trop large, qui donne dix variantes de bleu et aucune cohérence.
• Aucun exemple d’application, donc autant d’interprétations que d’utilisateurs.
• Une charte jamais mise à jour après l’arrivée d’un nouveau support.
• Le web traité en dernier, alors que c’est souvent le premier point de contact avec la marque.

Quand la reprendre

Une charte se révise lors d’un changement de positionnement, d’une ouverture à un nouveau marché, de l’arrivée d’un produit ou d’une application, ou quand l’équipe constate que les supports ne se ressemblent plus. Si vous partez de zéro, ou si la vôtre ne tient plus face à vos nouveaux usages, c’est le terrain de notre expertise Brand et design graphique : stratégie de marque, identité visuelle, charte et supports. Vous pouvez aussi lire notre article sur la cohérence de marque sur un site Webflow.