Charte graphique : définition et exemple

Définition : le mode d’emploi de votre image

Une charte graphique rassemble, en un seul document, les choix visuels de l’entreprise et la façon de les appliquer. Elle répond à des questions que chacun se pose sans en avoir l’air : quel logo sur fond sombre ? Quel bleu exactement ? Quelle police pour un titre, laquelle pour un paragraphe ? Jusqu’où peut-on rapprocher un texte du logo ?

Charte graphique, identité visuelle, logo : ce qui les distingue

• Le logo est le signe qui vous représente.
• L’identité visuelle est l’ensemble de ce qui rend votre entreprise reconnaissable : logo, couleurs, typographies, style des images, ton des textes.
• La charte graphique est le document qui fixe les règles de cette identité. L’identité existe même sans charte ; la charte évite qu’elle se déforme.

Ce que contient une charte graphique

1. Le logo et ses variantes : en couleur, en noir et blanc, à l’horizontale, en carré, sur fond clair et sur fond sombre.
2. Les couleurs : la couleur principale, les secondaires et les neutres, avec leurs valeurs exactes pour l’écran (code hexadécimal) et pour l’impression (CMJN).
3. Les typographies : une police pour les titres, une pour le texte, avec les tailles et les graisses.
4. Les règles d’usage : la zone de protection autour du logo, sa taille minimale, les déformations et recolorations interdites.
5. Le style des images : photos, illustrations, icônes, et ce qu’on évite.
6. Le ton des textes, quand l’entreprise en a un : vouvoiement ou tutoiement, mots à éviter.

Les quatre premiers éléments suffisent pour une petite entreprise. Un document de quelques pages, facile à relire, sera utilisé ; un classeur de plusieurs dizaines de pages, non.

Un exemple réel : extrait de la charte d’EP Digital

Plutôt qu’un exemple inventé, voici des extraits de la nôtre. C’est celle du site que vous lisez.

Chaque ligne évite une hésitation : la personne qui prépare une présentation n’a pas à demander « quel bleu ? ».

Le point qu’on oublie : le contraste des couleurs

Une couleur jolie n’est pas forcément lisible. Les règles d’accessibilité du web (WCAG 2.1, niveau AA, publiées par le W3C) demandent un rapport de contraste d’au moins 4,5 pour 1 entre un texte normal et son fond, et de 3 pour 1 pour un grand texte (au moins 18 points, ou 14 points en gras).

Sur notre exemple, avec la formule des WCAG (calcul de notre part) :

• l’encre #12151C sur le fond #F7F6F3 : environ 16,9 pour 1, très lisible ;
• le bleu #2E67FF sur blanc : environ 4,7 pour 1, juste au-dessus du seuil ;
• l’orange #FF6C35 sur blanc : environ 2,8 pour 1, insuffisant pour du texte. Cette couleur est donc réservée aux accents.

C’est le genre de règle qu’une charte doit écrire noir sur blanc : « l’orange n’est pas une couleur de texte ».

Le second point : à qui appartient votre logo ?

Le code de la propriété intellectuelle est clair : l’auteur d’une œuvre en est propriétaire « du seul fait de sa création » (article L111-1). Un logo dessiné par un graphiste ou une agence appartient donc, par défaut, à son créateur, même si vous l’avez payé.

Pour l’utiliser librement, il vous faut une cession des droits, écrite, où chaque droit cédé est mentionné et où le domaine d’exploitation est précisé : étendue, destination, lieu et durée (article L131-3). Demandez-la avant de signer, quel que soit le prestataire.

Vous pouvez aussi déposer le logo comme marque à l’INPI, pour les produits et services de votre activité : la protection dure dix ans, renouvelable indéfiniment. C’est une démarche à part.

Comment on construit une charte, dans l’ordre

1. Le brief : ce que fait l’entreprise, à qui elle s’adresse, l’image souhaitée, des exemples qui plaisent.
2. Les pistes de logo : quelques propositions, on en choisit une, on l’affine.
3. La charte : couleurs, typographies, règles d’usage, testées sur un vrai site et de vrais documents.
4. La remise des fichiers : logo dans tous les formats, charte en PDF, à partager avec ceux qui en auront besoin.

Ces étapes sont celles de notre création de logo et de charte graphique. Si vous nous confiez aussi votre site, nous l’habillons à votre image.