Beaucoup de PME qui nous contactent pour un site web n'ont pas de charte graphique, et c'est normal : une entreprise de dix personnes a rarement eu besoin d'un document de marque avant son site. Ce n'est pas un prérequis. Quand elle manque, les règles utiles (couleurs, polices, usage du logo) se décident avec vous au début du projet, et le design est inclus dans l'abonnement.
Il y a aussi le cas inverse : le livre de marque de 60 pages livré il y a quatre ans, que personne n'a rouvert et qui ne répond à aucune des questions qu'un site pose.
Dans les deux cas, voici ce qu'une charte de PME doit contenir pour servir un site, que vous l'apportiez ou qu'on la bâtisse ensemble, et les deux endroits où elle échoue presque toujours : le contraste et les licences de polices.
La réponse courte, pour les pressés
Une charte graphique de PME utile tient en quelques pages et contient cinq choses. Le logo en fichier vectoriel (SVG), avec une version pour fond foncé, une version carrée et une zone de protection. Une palette où chaque couleur a un rôle et où le contraste a été vérifié : le WCAG 2.2 exige 4,5:1 entre un texte courant et son fond, et 3:1 pour les grands caractères et les composants d'interface. Deux polices dont la licence couvre explicitement le Web : une licence « bureau » ne suffit pas, et une police d'Adobe Fonts doit être chargée par l'abonnement Creative Cloud du client lui-même. Une direction photo. Un ton, y compris le choix entre tutoiement et vouvoiement. Les polices de Google Fonts, surtout sous licence SIL Open Font License, sont gratuites pour un usage commercial, logo compris. Le reste d'un livre de marque peut attendre : chaque règle doit se traduire en une valeur qu'un site peut appliquer.
Ce que le mot veut dire au Québec
Le Grand dictionnaire terminologique de l'Office québécois de la langue française classe « charte graphique » dans le domaine Internet et la définit comme l'« ensemble des règles de présentation relatives aux éléments visuels qui composent un site Web, visant à lui donner une cohérence graphique et à définir son identité visuelle, et ayant pour but de faciliter la navigation et la lisibilité de ses pages ». La note qui suit énumère notamment les menus, les boutons et la couleur des liens.
Au sens de l'OQLF, une charte graphique est donc déjà un document de site web. C'est pourquoi le livre de marque de 60 pages échoue si souvent : il décrit l'intention (la marque est « chaleureuse et audacieuse ») sans répondre aux questions pratiques. De quelle couleur est un lien sur fond foncé? Quelle police porte un bouton? Que fait-on du logo quand il n'a que 32 pixels de hauteur?
Le logo : les fichiers avant l'esthétique
Un logo reçu en JPEG de 400 pixels de large est une photo du logo. La charte doit livrer le fichier maître en vectoriel, idéalement en SVG, qui reste net à toutes les tailles. Autour de lui, quatre déclinaisons couvrent presque tous les usages d'un site : la version couleur sur fond clair, une version pour fond foncé (souvent blanche), un symbole carré pour l'icône d'onglet et les réseaux sociaux, et une version à une seule couleur.
Deux règles complètent le dossier. La zone de protection, l'espace vide minimal autour du logo, exprimée dans une unité du logo lui-même (la hauteur d'une lettre, par exemple) pour rester valable à toutes les échelles. Et la taille minimale, sous laquelle on passe au symbole seul.
Un détail que peu de gens connaissent : les règles d'accessibilité exemptent le logo. Le critère de contraste du WCAG 2.2 précise que le texte faisant partie d'un logo ou d'un nom de marque n'a aucune exigence de contraste. Votre logo peut être gris pâle sur crème si c'est votre identité. Le texte qui l'entoure, lui, ne le peut pas, et c'est là que la plupart des chartes trébuchent.
La palette : une couleur de marque n'est pas une couleur de texte
Le WCAG 2.2, recommandation du W3C depuis le 5 octobre 2023, fixe au niveau AA un contraste d'au moins 4,5:1 entre le texte et son fond. Les grands caractères (18 points, ou 14 points en gras) descendent à 3:1, tout comme ce qui permet d'identifier un bouton, un champ ou un état d'interface. Le cadre légal est expliqué dans notre article sur le site accessible; ici, c'est l'arithmétique qui compte.
Le contraste se calcule avec une formule publiée dans la norme. Faites le calcul pour un orange vif comme #FF6600 sur fond blanc : 2,94:1. Superbe sur une enseigne, illisible pour un paragraphe. Sur noir, le même orange dépasse 7:1 : la couleur a un rôle, et ce n'est pas le texte courant sur blanc.
Une palette utile donne donc à chaque couleur un rôle écrit (fond, texte, accent, état), et chaque association texte-fond permise y a été mesurée.
Il y a une contrainte plus sournoise. Pour atteindre 4,5:1 sur blanc pur, une couleur doit rester sous une luminance relative d'environ 0,183. Pour l'atteindre sur noir pur, elle doit dépasser 0,175. La fenêtre qui fonctionne sur les deux fonds est minuscule, et elle disparaît dès qu'on remplace le blanc par une crème et le noir par un gris très foncé. Une marque qui a des pages claires et un pied de page foncé, et dont l'accent porte du texte des deux côtés, a donc besoin de deux teintes de cet accent.
C'est ce que fait notre propre site. L'accent orange existe en deux versions : une plus sombre pour les fonds clairs (5,43:1 sur notre crème), une plus claire et plus chaude pour les fonds foncés (5,34:1 sur notre noir). On choisit la version selon ce que l'accent touche, jamais selon la page.
Deux polices, et une licence qui couvre le Web
Deux familles suffisent presque toujours : une pour les titres, une pour le texte. La charte précise laquelle sert à quoi et avec quelles graisses. Au Québec, vérifiez aussi que la police dessine les capitales accentuées et les guillemets français : une police sans « É » vous condamne à écrire « Equipe » sur votre page d'accueil.
La licence est le piège le plus coûteux, parce qu'on ne le voit pas avant longtemps. Trois situations reviennent.
La licence bureau. Chez le revendeur MyFonts, les licences se vendent séparément : bureau, Web, application mobile, publicité numérique. La licence bureau permet d'installer la police sur un poste et de dessiner le logo. Elle ne couvre pas son intégration dans un site. La licence Web se paie en général à l'année selon le nombre de pages vues par mois, et vaut pour un seul domaine.
Adobe Fonts. La FAQ d'Adobe est explicite : un graphiste ne peut pas utiliser son propre abonnement pour les polices du site d'un client. Le site du client doit les charger par son propre abonnement Creative Cloud, et si cet abonnement est annulé, les polices cessent de s'afficher et le site bascule sur une police de remplacement. Votre identité typographique devient un abonnement mensuel, souvent sans que personne vous l'ait dit.
Google Fonts. L'option la plus simple. Selon sa FAQ, toutes les polices du catalogue sont libres et gratuites, utilisables commercialement, y compris dans un logo et sur un site. La plupart sont sous licence SIL Open Font License, dont la seule vraie restriction pour une PME est de ne pas revendre la police elle-même.
Aucune de ces options n'est mauvaise. Ce qui coûte cher, c'est d'ignorer laquelle s'applique. Pour chaque police, la charte écrit qui détient la licence et ce qu'elle couvre.
Photos et ton : les deux sections qu'on saute
La direction photo n'exige pas un budget de séance. Elle exige des décisions : photos réelles de l'équipe et des lieux ou banque d'images, lumière naturelle ou studio, et surtout ce qu'on refuse (la poignée de main en complet, par exemple). Sinon, chaque page reçoit l'image la plus rapide à trouver.
Le ton comporte au Québec une décision que les chartes importées ignorent : tutoyer ou vouvoyer. Le choix change la voix de chaque bouton et de chaque message d'erreur. Si le site est bilingue, la charte dit aussi si la version anglaise est une traduction ou une adaptation.
De la charte au site : des règles qu'un programme peut vérifier
Un site bien construit traduit la charte en jetons de design : des valeurs nommées (« papier », « encre », « accent ») que tous les composants utilisent. Changer une couleur de la marque se fait alors à un seul endroit.
L'avantage moins connu : une règle exprimée en jetons peut être testée. Sur notre site, la palette tient en quatre fonds et un accent en deux versions, la typographie en deux familles qui ont chacune un seul rôle, et des tests automatisés échouent si une association de couleurs passe sous AA ou si une troisième police apparaît. La charte cesse d'être un PDF qu'on espère voir respecté.
C'est aussi pourquoi une charte absente coûte cher au moment d'une refonte : les décisions qu'elle aurait contenues se prennent quand même, mais une page à la fois, et souvent de façon contradictoire.
Ce qu'on regarde au démarrage
Le dossier minimal tient en cinq éléments : le logo en SVG et ses déclinaisons, la palette avec le rôle de chaque couleur, le nom des deux polices et de leur licence, une page de direction photo, une page de ton. S'il en manque, ou si vous n'avez rien de tout ça, ce n'est pas un frein. Dans notre abonnement, le design est inclus : on conçoit à partir de zéro ou on intègre vos maquettes, et les règles manquantes se décident au début du projet, une fois, plutôt qu'au fil des pages.
Et si vous avez déjà le livre de marque de 60 pages, apportez-le. On en extraira les pages qui comptent pour le Web, et on vous dira lesquelles de vos couleurs peuvent réellement porter du texte.
Écrit parXavier Peich