Charte graphique : définition, contenu, exemple et prix

En bref : une charte graphique ne crée pas l'identité, elle la rend utilisable. Elle tient en 15 à 40 pages, se lit en dix minutes et doit répondre à une seule question : un graphiste qui ne vous connaît pas peut-il produire un visuel juste avec ce seul document ? Sur le marché français, la médiane relevée par La Fabrique du Net est de 15 000 € pour une charte graphique conçue par une agence de branding.

Charte graphique : la définition

La charte graphique est le mode d'emploi de votre identité visuelle. Elle dit quels éléments existent (le logo et ses versions, la palette, les polices, le style d'image) et surtout comment s'en servir : tailles, espaces, associations permises et interdites.

Elle ne remplace pas le travail créatif. Elle arrive après. D'abord on décide ce que la marque doit exprimer, ensuite on dessine les signes, enfin on écrit les règles qui les protègent. C'est cette troisième étape qu'on appelle la charte.

Une bonne charte a deux lecteurs. Votre équipe marketing, qui l'ouvre pour vérifier un détail avant de publier. Et vos prestataires, qui la reçoivent le premier jour d'un projet : imprimeur, agence événementielle, développeur web. Si elle ne sert qu'à être présentée en comité de direction, elle a raté sa cible.

Charte graphique, identité visuelle, plateforme de marque : qui fait quoi

Les trois termes se mélangent souvent. Ils ne décrivent pas la même chose et ne se produisent pas au même moment.

La plateforme de marque est le fond. L'identité visuelle est la forme. La charte graphique est le code de la route qui garde la forme fidèle au fond, support après support.

Ce que contient une charte graphique

Le contenu varie selon la taille de la marque, mais huit rubriques reviennent dans toutes les chartes qui servent vraiment. Pour chacune, le tableau indique ce qu'il faut préciser et l'oubli que nous voyons le plus souvent quand une entreprise nous transmet sa charte existante.

Deux remarques. La rubrique ton peut sembler hors sujet dans un document graphique. Nous la gardons parce qu'un bouton mal libellé abîme une page aussi sûrement qu'une couleur fausse. Et les gabarits sont la partie la plus utilisée de la charte : c'est par eux que les règles sont appliquées au quotidien, sans que personne ait à les relire.

Le choix de chaque couleur se travaille en amont, avec la personnalité de la marque. Nous détaillons cette étape dans notre guide sur la couleur d'un logo et sa signification.

Exemple : la charte graphique de Synqro, page par page

Les chartes des grandes marques circulent en PDF, mais elles décrivent des organisations de plusieurs milliers de personnes. Pour une PME, l'exemple le plus utile est une charte courte et vraie. Voici donc la nôtre, avec les valeurs exactes utilisées sur synqro.co, relevées dans le code du site en octobre 2026.

Le logo

Un pictogramme de trois barres rayées, suivi du mot Synqro. Il existe en noir sur fond clair et en blanc sur fond sombre, jamais en bleu sur bleu. Sur le site, il est livré en SVG avec une couleur héritée du texte (currentColor), ce qui évite de multiplier les fichiers : la même source s'affiche en noir ou en blanc selon le fond. Sa hauteur de référence dans l'en-tête est de 21 px sur ordinateur.

Les couleurs

Quatre couleurs seulement, avec un rôle chacune.

La dernière colonne n'est presque jamais dans une charte. Elle devrait l'être. Nous l'avons calculée avec la formule de contraste des WCAG, la norme d'accessibilité du web. Elle nous a appris une chose : notre bleu sur notre fond nuit ne donne que 3,48:1. C'est assez pour un grand titre (le seuil est de 3:1), pas pour un paragraphe (4,5:1). La règle est donc écrite noir sur blanc dans notre charte : sur fond nuit, le texte courant est blanc, et le bleu ne sert qu'aux grands éléments.

Les typographies

Une seule famille, la PP Neue Montreal, en deux graisses : Regular (400) pour les titres et le texte, Medium (500) pour les boutons et les petits libellés. Le site ne charge que ces deux fichiers, ce qui compte pour la vitesse.

Titres en Regular plutôt qu'en gras, approche légèrement resserrée : c'est ce qui donne au site son ton calme. Une charte qui se contente d'écrire « PP Neue Montreal » sans ces réglages laisse chaque prestataire réinventer la hiérarchie, et c'est là que la cohérence se perd.

Les formes et les règles d'esprit

Des angles à 2 px, jamais d'arrondi large. Pas de dégradé. Un seul accent bleu par écran. Beaucoup de blanc. Ces quatre lignes tiennent sur une page et suffisent à écarter la moitié des visuels hors charte que nous voyons passer.

C'est tout. Une charte de PME n'a pas besoin de cent pages. Elle a besoin de valeurs précises et de quelques interdits clairs.

Les règles web que la plupart des chartes oublient

Beaucoup de chartes sont encore pensées pour l'imprimé, puis déclinées sur le web. Le site devient alors le support le moins bien encadré, alors que c'est souvent celui que vos clients voient en premier. Voici ce que nous ajoutons systématiquement.

• Le contraste. Les WCAG demandent 4,5:1 pour le texte courant et 3:1 pour les grands textes et les éléments d'interface. Indiquez pour chaque couleur avec quoi elle peut être associée. Notre guide sur l'accessibilité web détaille les obligations.
• Les variables. Chaque couleur, taille et espacement reçoit un nom (par exemple color-accent, text-body). Le développeur les reprend telles quelles dans le CSS ou dans les variables de l'outil.
• Les unités. Tailles en px dans la charte, conversion en rem dans le code pour respecter le réglage de taille du navigateur. Nous l'expliquons dans REM ou PX.
• Les états. Un bouton a un état normal, survolé, actif, désactivé et un focus visible au clavier. Si la charte n'en montre qu'un, les quatre autres seront improvisés.
• Les formats de fichiers. Logo en SVG, photos en WebP ou AVIF, favicon, image de partage pour les réseaux (1200 × 630 px).
• Le mouvement. Durée et courbe des animations, et une version sans animation pour les personnes qui l'ont désactivée.

Sur un site Webflow, ces règles deviennent des variables et des composants réutilisables. C'est le moment où une charte cesse d'être un PDF pour devenir un système. Quand nous construisons un site en tant qu'agence Webflow, nous partons de la charte et nous la traduisons en variables avant de dessiner la première page.

Comment créer une charte graphique en 6 étapes

1. Rassembler l'existant. Logos en circulation, supports imprimés, captures du site, publications. On découvre presque toujours trois versions du logo et cinq bleus différents.
2. Repartir de la plateforme de marque. Les choix visuels doivent s'expliquer par la personnalité écrite de la marque. Sans plateforme, on choisit au goût, et les goûts changent.
3. Fixer les éléments de base. Logo et versions, palette, typographies. C'est le travail de l'identité visuelle, qu'on valide avant d'écrire une seule règle.
4. Écrire les règles avec des valeurs. Tailles, espaces, contrastes, proportions. Chaque règle vague (« utiliser le bleu avec parcimonie ») est remplacée par une règle mesurable (« un seul aplat bleu par écran »).
5. Tester sur des supports réels. Une page du site, un post, une présentation commerciale, une signature e-mail. Les trous de la charte apparaissent tout de suite.
6. Livrer les gabarits et les sources. Fichiers Figma, modèles de présentation, kit pour les réseaux. Une charte sans gabarits finit dans un dossier partagé que personne n'ouvre.

Comptez quatre à huit semaines si l'identité visuelle est déjà validée, davantage si elle se crée en même temps. Le délai dépend surtout du nombre de supports à tester.

Combien coûte une charte graphique

Les fourchettes en ligne vont de quelques centaines d'euros à plusieurs dizaines de milliers. Deux relevés publics permettent d'y voir plus clair.

Source : baromètre des tarifs des agences de branding, La Fabrique du Net.

L'écart entre graphisme et branding ne vient pas du nombre de pages. Il vient de ce qui précède la charte : entretiens, analyse du marché, plateforme de marque. Un studio de graphisme met en règles une identité que vous lui décrivez. Une agence de branding commence par décider avec vous ce que l'identité doit dire. Nous détaillons ces écarts dans notre article sur le prix d'une identité visuelle.

Ce qui fait monter le devis, à périmètre égal :

• le nombre de déclinaisons du logo et de supports testés ;
• les gabarits livrés (une présentation commerciale complète prend du temps) ;
• les règles web, si elles sont écrites avec le développeur ;
• les langues, quand la marque parle à plusieurs marchés.

Les erreurs qui rendent une charte inutilisable

• Des intentions au lieu de valeurs. « Couleurs dynamiques », « typographie moderne » : aucune décision possible avec ça.
• Aucun interdit. Les exemples de mauvais usage (logo étiré, mauvaise couleur, fond trop chargé) évitent plus d'erreurs que dix pages de règles.
• Oublier le site. La charte décrit une carte de visite à la perfection et ne dit rien des boutons, des formulaires ni du contraste.
• Des fichiers introuvables. Un PDF sans les logos, les polices ni les gabarits oblige chaque prestataire à refaire le travail.
• Une charte figée. Une marque bouge. Datez chaque version et notez ce qui a changé. Quand l'écart devient trop grand, c'est le signe qu'il faut envisager une refonte de logo, voire de l'identité.

Modèle de charte graphique à reprendre

Pas de formulaire à remplir, voici le sommaire que nous utilisons pour une PME. Il tient en 15 à 25 pages.

1. Introduction : à quoi sert la charte, à qui elle s'adresse, la date de la version.
2. Rappel de la plateforme : une page, la promesse et la personnalité de la marque.
3. Logo : versions, zone de protection, tailles minimales (impression en mm, écran en px), fonds autorisés, interdits.
4. Couleurs : codes HEX, RVB, CMJN, Pantone, rôles, proportions, associations permises avec leur contraste.
5. Typographies : familles, graisses, échelle des tailles, interlignage, police de secours.
6. Images et iconographie : style, cadrage, exemples, interdits.
7. Mise en page : grille, marges, exemples par format.
8. Règles web : variables, états des boutons, formulaires, animations.
9. Ton : cinq règles d'écriture et des exemples.
10. Gabarits et ressources : liens vers les fichiers sources et le contact du responsable de la marque.

Si votre identité visuelle reste à créer, ou si votre charte actuelle ne tient plus face au site et aux réseaux, c'est le travail de notre agence de branding. Nous l'avons mené par exemple pour Sleeq, de la stratégie au site, puis au référencement.