Charte graphique : contenu, exemple réel et méthode

Qu’est-ce qu’une charte graphique ?

Elle sert à garder une marque reconnaissable quel que soit celui qui produit le support. Ses lecteurs sont le graphiste qui crée une affiche, l’imprimeur qui calibre une couleur, le développeur qui intègre un site, l’équipe interne qui monte une présentation.

Une charte utile se vérifie. Chaque règle peut être contrôlée par quelqu’un qui n’a pas participé à sa création : un code couleur, un ratio de contraste, une taille minimale, une licence. Sans ces repères, chacun interprète.

Charte graphique, identité visuelle, design system : quelles différences ?

Une marque personnelle applique les mêmes principes à une échelle plus petite (photo de profil, couleurs, police), comme le montre notre guide du personal branding.

Que contient une charte graphique ?

Trois éléments forment le socle d’une charte graphique : le logo, les couleurs et les typographies. S’y ajoutent les icônes et les images, la mise en page, une signature graphique, les déclinaisons par support et la liste des interdits.

Pour les déclinaisons, chaque plateforme de réseaux sociaux impose ses formats d’image et de vidéo : la charte précise comment le logo, les couleurs et les marges s’y placent.

La licence des polices fait partie de la charte : elle dit si la police peut servir sur le site, à l’impression et dans le logo. L’exemple d’Elev8 Lab, plus bas, utilise trois polices sous licence libre.

Exemple de charte graphique : le design system d’Elev8 Lab

Elev8 Lab publie ici son propre design system en exemple. La version 1.1, validée le 23/09/2026, habille ce site : les couleurs, polices et tailles citées plus bas se lisent dans sa feuille de style publique.

Son principe : « Pop le jour, Nocturne la nuit », un seul jeu de composants pour deux ambiances. Le thème clair « Pop » a des contours francs, des ombres décalées pleines et le corail en accent. Le thème sombre « Nocturne » a des fonds bleu nuit, des contours fins et une lueur bleue. Le site suit le réglage clair ou sombre de votre appareil.

Entre les deux thèmes, seuls changent les couleurs, l’épaisseur des bordures (2 px en clair, 1 px en sombre) et les ombres.

La charte est un document versionné : toute évolution incrémente la version et passe par une validation explicite avant d’arriver sur le site.

Logo et signature visuelle

Le logo d’Elev8 Lab est composé dans une police grasse à empattements carrés. Son « 8 » se désagrège en pixels vers la gauche.

• Couleur : bleu #015EE9 en thème clair, blanc cassé #EDF1F8 en thème sombre, blanc sur fond bleu.
• Fichiers : cinq SVG, soit le logo complet, le symbole « 8 », le symbole blanc sur carré bleu (avatars), les parties « ELEV » et « LAB ».
• Intégration : le SVG est inséré avec fill="currentColor" et suit la variable --c-logo. Un seul fichier sert donc aux deux thèmes.
• Motif pixel : des carrés de 3 à 15 px repris du « 8 », plus denses vers la gauche. Il sert dans les bandeaux d’en-tête, les couvertures et la page 404, jamais en fond de page entière ni derrière du texte.
• Bascule de thème : la charte prévoit un passage du clair au sombre pixel par pixel, coupé si le visiteur a demandé moins d’animations (prefers-reduced-motion).

La charte garde aussi un point ouvert : à 16 px, les fragments fins du « 8 » disparaissent du favicon, et la version simplifiée reste « à définir ».

Couleurs : un rôle par variable

Chaque couleur de la charte a un rôle, une variable CSS et une valeur par thème. Aucun composant n’écrit une couleur en dur.

Le corail est l’unique accent de la palette. La charte exclut aussi les dégradés violets et le néon. La palette du thème WordPress compte 25 couleurs nommées, aux mêmes valeurs que les variables CSS (comparaison du 19/10/2026).

Le nombre de couleurs compte moins que leur rôle : une couleur sans fonction écrite laisse chaque prestataire choisir où la mettre.

Typographies : trois familles, sous licence libre

Le design system utilise trois familles, et aucune autre.

• Bricolage Grotesque (dessinée par Mathieu Triay) pour les titres : graisse 800 en thème clair, 700 en thème sombre car, selon la charte, un texte clair sur fond sombre paraît plus gras.
• DM Sans (Colophon Foundry) pour le texte et l’interface : graisses 400, 500 et 700, italique 400.
• Geist Mono (équipe Vercel) pour les dates, les données et le code : graisses 400 et 500.

Les tailles sont fluides et passent par des variables (clamp()) : titre H1 jusqu’à 54 px, H2 jusqu’à 38 px, H3 à 24 px, texte à 17 px avec un interligne de 1,65. Une ligne de texte courant ne dépasse pas 68 caractères.

Les trois familles sont publiées sous SIL Open Font License 1.1, d’après les métadonnées du dépôt de Google Fonts.

Cette licence, datée du 26/02/2007 et inchangée depuis, permet de les utiliser dans des livres, des affiches, des logos et des sites web, sans mention obligatoire (SIL). Elle permet aussi de les modifier ou de les redistribuer, avec un éventuel changement de nom.

La charte les fait auto-héberger, pour la performance et le RGPD : huit fichiers WOFF2, licences jointes.

Formes, espacements et icônes

• Espacements : une échelle de huit valeurs, 4, 8, 12, 16, 24, 40, 64 et 96 px.
• Rayons : 8 px pour les champs, 14 px pour les cartes, 22 px pour les grands blocs, pilule pour les boutons et les étiquettes. Une page n’utilise qu’un seul système d’arrondis.
• Ombre « Pop » : décalée et pleine en thème clair (4px 4px 0), remplacée par un reflet interne en thème sombre.
• Icônes : Phosphor Icons, trait régulier, sous licence MIT. Les 23 icônes validées sont exportées une à une en SVG, sans charger la police complète. Aucun émoji dans l’interface.

Ce que la charte interdit

La charte d’Elev8 Lab interdit de :

• ajouter une couleur, une police ou un rayon qui n’est pas dans la charte ;
• mettre du texte blanc sur le corail, ou utiliser le corail pour une action principale ;
• écrire une couleur en dur au lieu de sa variable ;
• utiliser des pop-ins, des comptes à rebours ou des barres collantes ;
• poser un visuel généré pour remplir une zone ;
• créer une section qui ne fonctionne qu’au survol, donc pas sur mobile ;
• lancer un effet glitch en boucle.

Elle contient aussi une part éditoriale : aucun tiret cadratin ni demi-cadratin, guillemets français, un libellé par intention (« S’abonner » partout), aucun chiffre sans source dans les gabarits, où l’on écrit XX % à la place.

Comment décliner une charte graphique pour le web ?

Une charte pensée pour le papier ne dit rien de ce qu’un écran mesure : le contraste de chaque paire de couleurs, le comportement en thème sombre, le poids des polices, le favicon. Le contraste et le favicon ont des seuils publiés ; le thème sombre et les polices se règlent dans les variables.

Contrastes : les seuils du WCAG 2.2

Le WCAG 2.2, Recommandation du W3C dans sa version du 12/12/2024, fixe les seuils de contraste du niveau AA. Le critère 1.4.3 demande 4,5:1 au moins pour le texte et 3:1 pour le texte de grande taille. Selon la note explicative du W3C mise à jour le 06/09/2026, la grande taille commence à 18 points, ou 14 points en gras (environ 24 px et 18,5 px).

• Les seuils ne s’arrondissent pas : 4,499:1 ne satisfait pas 4,5:1.
• Le texte d’un logo ou d’un nom de marque est exempté, sauf si le logo sert de composant d’interface (un bouton, par exemple).
• Les composants d’interface, leurs états et les parties de graphiques demandent 3:1 contre les couleurs voisines (critère 1.4.11).
• La couleur ne doit jamais être le seul moyen de transmettre une information (critère 1.4.1).

Le ratio se calcule par la formule (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance relative de la couleur la plus claire ; il va de 1:1 à 21:1. Appliquée aux valeurs du design system d’Elev8 Lab, elle donne le tableau suivant (calcul du 19/10/2026).

Les échecs expliquent deux règles de la charte. Le corail ne porte jamais de texte blanc et ne sert pas au texte courant. En thème sombre, les liens prennent un bleu plus clair que le bleu d’action.

Thème sombre : des valeurs propres, pas une inversion

La caractéristique média CSS prefers-color-scheme détecte si l’utilisateur a demandé un thème clair ou sombre, par un réglage du système ou du navigateur ; ses valeurs sont light et dark (MDN). La spécification qui la définit, Media Queries Level 5, est un Working Draft du W3C (version du 19/02/2026), pas une Recommandation.

Un thème sombre demande ses propres valeurs. Le même bleu #015EE9 atteint 5,47:1 en texte sur le fond clair et seulement 3,56:1 sur le fond sombre. Elev8 Lab garde ce bleu pour les boutons, où le texte blanc posé dessus atteint 5,56:1, et donne aux liens un bleu #8AB6FF à 9,63:1. Les titres passent aussi de la graisse 800 à 700.

Dans le code, la charte devient un jeu de variables redéfinies par thème. Le principe, réduit à la couleur des liens :

• :root { --c-link: #0150C8; } pour le thème clair, par défaut ;
• @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-link: #8AB6FF; } } pour suivre le réglage de l’appareil ;
• [data-theme="dark"] { --c-link: #8AB6FF; } quand le thème sombre est forcé sur la balise <html>.

Variables, theme.json et design tokens

Dans un thème WordPress, les palettes de couleurs, les tailles de police et les dégradés déclarés dans theme.json deviennent des propriétés personnalisées CSS, chargées sur le site et dans les éditeurs (WordPress Developer Resources). La palette de l’éditeur de blocs reprend alors les couleurs de la charte, au lieu de codes recopiés à la main.

Pour échanger une charte entre outils, le Design Tokens Community Group a publié le Design Tokens Format Module 2025.10, rapport final du 28/10/2025. Ce n’est pas un standard du W3C. Le groupe y définit les design tokens comme une façon d’exprimer des décisions de design indépendamment des plateformes. Un token y est un objet doté d’une propriété $value, la seule obligatoire.

Favicon, logo et polices : ce que lisent Google et le navigateur

Google affiche un seul favicon par nom d’hôte, déclaré par une balise <link rel="icon"> sur la page d’accueil. L’image doit être carrée, d’au moins 8 × 8 px, et Google recommande plus de 48 × 48 px (Google Search Central, mis à jour le 11/09/2026). Une charte web prévoit donc un symbole lisible en très petit : c’est le point encore ouvert de l’exemple d’Elev8 Lab.

Pour le logo, la propriété logo des données structurées Organization aide Google à savoir quelle image afficher. Elle doit mesurer au moins 112 pixels de largeur et de hauteur (documentation Organization, mise à jour le 12/09/2026). Garder le même nom, le même logo et les mêmes profils partout vise à faciliter le rapprochement des mentions d’une même marque, sans garantie d’affichage : c’est le travail sur l’entité de marque.

Côté polices, la charte nomme une police de secours pour chaque famille (Arial derrière DM Sans, par exemple). Choisies aux dimensions proches, elles limitent les décalages de mise en page mesurés par les Core Web Vitals pendant le chargement.

D’autres exemples de chartes graphiques à consulter

Trois formats coexistent : la charte en composants et variables, le site de marque, le PDF.

Le Système de design de l’État (DSFR) est un ensemble de composants HTML, CSS et JavaScript pour les sites publics, développé et maintenu par le Service d’information du Gouvernement (dépôt officiel). Polices Marianne et Spectral, thèmes clair et sombre par l’attribut data-fr-scheme (system suit le réglage du système d’exploitation).

Le DSFR montre aussi qu’une charte peut restreindre son usage. Son code est sous licence Etalab 2.0, sauf certains éléments comme les polices Marianne. Son utilisation est pourtant interdite hors des sites de l’État et d’un domaine en .gouv.fr, parce qu’il marque l’identité visuelle de l’État. Une administration doit demander un agrément.

Côté sites de marque, Uber publie le sien (brand.uber.com) et Mozilla un portail de marque (brand.mozilla.com). Ils étaient en ligne le 19/10/2026.

Les chartes PDF restent un format courant. Un PDF fige les valeurs à une date et pèse lourd : deux chartes d’organismes relevées le 19/10/2026 font 4,2 et 9,3 Mo. Notre avis : un PDF suffit à une petite structure ; dès qu’un site et plusieurs prestataires entrent en jeu, une charte en variables évite les copies qui divergent.

Comment faire une charte graphique ?

Une charte graphique se construit en sept étapes, de la marque au versionnage.

1. Partir de la plateforme de marque, décrite dans notre guide du branding, et du persona marketing : à qui la marque parle.
2. Inventorier les supports réels : site, réseaux sociaux, gabarits d’emails marketing, documents, impression.
3. Fixer chaque élément et son rôle : versions du logo, rôle de chaque couleur, polices et graisses, icônes, grille et espacements.
4. Tester : contraste de chaque paire texte / fond dans les deux thèmes, logo à 16 px, licence web de chaque police.
5. Écrire les interdits, en une liste courte.
6. Choisir le format : PDF, page en ligne, variables CSS ou fichier de tokens.
7. Versionner la charte et désigner la personne qui valide chaque évolution.

Un graphiste, une agence ou l’équipe interne peut rédiger la charte. Dans tous les cas, nommez la personne qui tranche quand un support sort des règles.