Modèle de charte graphique pour site web : les règles web qu'un PDF de logo oublie

Un modèle de charte graphique conçu pour les sites web, pas pour l'impression : usage du logo sur fonds clairs et sombres, tableau des couleurs avec les associations qui passent le contraste, échelle typographique, états des boutons et des liens, règles d'images et de ton, et une checklist de validation pour quiconque crée une page.

La plupart des chartes graphiques ont été faites pour un designer qui met en page une brochure. Elles montrent le logo sur fond blanc, listent les couleurs en CMJN et Pantone, citent une police que le site ne peut pas charger, et ne disent rien de l'apparence d'un bouton au survol. Ensuite, un développeur, un client ou un créateur de sites doit deviner. Ce modèle couvre les décisions dont un site a réellement besoin, dans l'ordre où la personne qui crée une page en aura besoin, avec les valeurs d'accessibilité déjà intégrées.

Qui lit une charte graphique web

Écrivez pour trois lecteurs. Un designer qui créera de nouvelles pages et veut le système. Un développeur ou créateur de sites qui a besoin de valeurs exactes : codes hex, noms de polices, tailles en pixels. Et un rédacteur de contenu, souvent le dirigeant, qui ajoutera une page dans deux ans et doit savoir ce qu'il ne faut pas faire. Une règle que le troisième lecteur ne peut pas appliquer ne survivra pas.

Faites court. Une synthèse d'une page avec les valeurs clés, plus une référence détaillée, vaut mieux qu'un document de 60 pages que personne n'ouvre. Si vous voulez un premier jet rapide des valeurs, notre générateur de guide de style gratuit en produit un ; ce guide porte sur ce qui doit figurer dans la version finale.

1. Logo

Les sites placent des logos là où l'impression ne le fait jamais : un onglet de navigateur de 32 pixels, un en-tête en mode sombre, un menu mobile, une signature e-mail. Précisez :

Élément	Usage	Format
Logo principal, pour fonds clairs	En-tête, pied de page sur thèmes clairs	SVG, plus PNG en 2x
Logo pour fonds sombres	En-tête sombre, mode sombre, pied de page sombre	SVG, plus PNG en 2x
Symbole compact (sans texte)	En-tête mobile, icônes d'application, avatars sur les réseaux sociaux	SVG, PNG carré
Favicon	Onglet du navigateur et favoris	Symbole simplifié encore reconnaissable à 16-32px

Puis les règles : largeur d'affichage minimale (par exemple « jamais moins de 96px pour le logo complet, utiliser le symbole en dessous »), zone de protection, fonds autorisés, et deux ou trois exemples de mauvais usage (étiré, recoloré, posé sur une photo chargée). Fournissez toujours une version sombre dans un fichier séparé : demander à quelqu'un de « l'inverser » produit un logo différent à chaque fois.

2. Couleurs, contraste déjà vérifié

L'échec d'accessibilité le plus courant sur les sites de marque est une couleur de marque incapable de porter du texte. L'exigence de contraste des WCAG (critère de succès 1.4.3) demande au moins 4.5:1 pour le texte normal et 3:1 pour le grand texte, que le W3C définit comme au moins 18 points, ou 14 points en gras, soit environ 24px ou 18.5px. Le W3C précise que les valeurs ne doivent pas être arrondies : 4.499:1 échoue. Les boutons, bordures de formulaires et icônes que les gens doivent voir ont leur propre exigence de 3:1 par rapport aux couleurs adjacentes (1.4.11).

Ne listez donc pas les couleurs seules. Listez-les avec les associations autorisées :

Nom	Hex	Rôle	Texte autorisé dessus	Interdit
Forest	#1F5130	Boutons principaux, titres	Texte blanc, toutes tailles	Texte noir
Sage	#8DB596	Fonds, illustrations	Texte foncé (#1A1A1A)	Texte blanc, quelle que soit la taille
Ember	#E4572E	Accents, grand texte d'affichage	À vérifier selon la taille ; souvent grand texte uniquement	Texte courant, liens sur fond blanc
Ink	#1A1A1A	Texte courant	Sur blanc, Paper, Sage	Sur Forest
Paper	#FAF7F2	Fond de page	Ink, Forest	Texte Sage

Les valeurs hex ci-dessus sont un exemple ; mesurez vos propres associations avec n'importe quel outil de contraste et notez le ratio à côté de chaque association autorisée. Définissez aussi les couleurs par rôle, pas seulement par nom : « action principale », « lien », « erreur », « succès », « bordure ». Un développeur peut alors construire un thème, et un mode sombre, sans deviner.

3. Typographie

Les polices d'impression ne sont souvent pas sous licence pour le web, ou sont trop lourdes pour se charger vite. Décidez :

Polices web : noms exacts des familles et graisses que vous chargerez. Deux familles et trois ou quatre graisses suffisent largement ; chaque fichier supplémentaire ralentit le premier affichage.
Polices de secours : les polices système utilisées pendant le chargement de la police web ou en cas d'échec.
Une échelle typographique : les tailles de chaque niveau, sur ordinateur et sur mobile.

Niveau	Ordinateur	Mobile	Graisse	Interligne
H1	48px	34px	700	1.1
H2	34px	26px	700	1.2
H3	24px	20px	600	1.3
Texte courant	18px	17px	400	1.6
Petit	15px	14px	400	1.5

Ajoutez les règles que les gens enfreignent : pas de texte courant tout en majuscules, pas de texte justifié, une longueur de ligne d'environ 60-80 caractères, des liens soulignés dans le texte pour ne pas dépendre de la seule couleur.

4. Boutons, liens et états

C'est la section qu'une charte d'impression n'a jamais et dont un site a toujours besoin. Pour chaque type de bouton, précisez chaque état :

Élément	Par défaut	Survol	Focus clavier	Désactivé
Bouton principal	Fond Forest, texte blanc, rayon 999px	Forest plus foncé	Contour visible de 2px, décalé de 2px	Fond gris, texte toujours lisible, non cliquable
Bouton secondaire	Contour Forest, texte Forest	Fond Sage pâle	Même règle de contour	Contour gris
Lien texte	Forest, souligné	Soulignement plus épais	Contour	-

Ne supprimez jamais le contour de focus pour des raisons esthétiques ; les utilisateurs du clavier en dépendent. Indiquez le rayon des angles, les marges intérieures et si les boutons ne prennent une majuscule qu'au premier mot. « Un seul bouton principal par écran » est une bonne règle à écrire.

5. Mise en page et espacements

Donnez une échelle d'espacements (par exemple 4, 8, 12, 16, 24, 32, 48, 64, 96px) et précisez que tous les écarts en sont issus. Indiquez la largeur maximale du contenu, la marge latérale sur mobile et le nombre de colonnes de la grille à chaque largeur. Ce sont ces règles qui font que des pages créées à des mois d'écart par des personnes différentes ressemblent à un seul et même site.

6. Images et icônes

Photographie : de vraies personnes et de vrais lieux plutôt que des banques d'images ; décrivez lumière et ambiance avec deux bons et deux mauvais exemples.
Recadrage : les formats utilisés (par exemple 16:9 pour les bannières, 4:3 pour les cartes, 1:1 pour les photos d'équipe).
Texte alternatif : une règle de rédaction : décrire ce que montre l'image et pourquoi elle est là ; alt vide pour les images purement décoratives.
Icônes : un seul jeu d'icônes, une seule épaisseur de trait, une seule échelle de tailles. Des styles d'icônes mélangés sont le moyen le plus rapide de donner l'air d'un site bricolé.

7. Ton et mots

Sur le web, le ton de la marque est surtout une affaire de clarté. Notez trois ou quatre traits de ton avec un exemple « ceci, pas cela » pour chacun, puis les micro-règles : comment vous écrivez les dates, les prix, les numéros de téléphone, le nom de l'entreprise, les mots que vous évitez, et ce que disent les boutons (« Réserver une visite », pas « Envoyer »). Incluez les messages d'erreur et les états vides ; eux aussi font partie de la marque.

8. E-mails et pages de connexion

Les visiteurs rencontrent votre marque en dehors du site : e-mails de confirmation, réinitialisations de mot de passe, page de connexion d'un portail client. Précisez le logo, les couleurs et le nom d'expéditeur utilisés, et qui en est responsable. Un e-mail de réinitialisation qui ne respecte pas la marque ressemble à de l'hameçonnage.

Checklist de validation pour toute nouvelle page

Le logo est dans la bonne version pour le fond et au-dessus de la taille minimale.
Chaque association texte/fond figure dans la liste autorisée, ou a été mesurée à 4.5:1 (3:1 pour le grand texte).
Seules les polices et graisses prévues sont utilisées ; les tailles viennent de l'échelle.
Les boutons ont un état de survol et un focus clavier visible.
Les espacements suivent l'échelle ; la largeur du contenu respecte le maximum.
Les images suivent les règles de recadrage et de texte alternatif ; les icônes viennent du jeu unique.
Les textes respectent le ton et les micro-règles.

Appliquer la charte sur de nombreux sites

Les agences et organisations qui gèrent de nombreux sites ont un problème plus difficile : une charte appliquée une fois dérive au fil des modifications de différentes personnes. C'est en inscrivant les valeurs clés dans la plateforme, plutôt que dans un PDF, qu'on les préserve. Sur la plateforme en marque blanche de We.Inc, une marque est configurée une fois avec son nom, ses logos clair et sombre, son favicon, ses couleurs, une police Google et un style de bouton, qui se retrouvent ensuite sur la connexion client, le tableau de bord et les e-mails. Nos pages personnalisation de la marque et gouvernance de la marque vont plus loin.

Des logos clair et sombre distincts plus un favicon, conformes à la section 1 du modèle, avec des images de fond facultatives pour les modes clair et sombre.

Couleurs principale, d'accent et secondaire en valeurs hex, plus la police Google de la marque. Vérifiez vous-même le contraste de chaque association de texte ; la plateforme ne le certifie pas.

Couleurs et arrondi des boutons principal et secondaire, les valeurs de l'état par défaut de la section 4.

La marque se retrouve sur la connexion client, l'objet de la section 8.

Les e-mails système utilisent le logo et les couleurs de la marque, avec un aperçu avant envoi.

Pour voir une marque configurée de bout en bout sur une démonstration, réservez une démo.

Sources

Dernière vérification le 2026-10-25.

Questions fréquentes

Que doit contenir une charte graphique de site web ?

Des versions du logo pour fonds clairs et sombres plus un favicon, des couleurs avec les associations de texte autorisées, des polices web et une échelle typographique, les états des boutons et des liens, les espacements, les règles d'images et d'icônes, les règles de ton et de micro-textes, et l'apparence des e-mails et pages de connexion.

Quel contraste les couleurs de marque doivent-elles offrir pour le texte ?

Le critère WCAG 1.4.3 demande au moins 4.5:1 pour le texte normal et 3:1 pour le grand texte (18 points, ou 14 points en gras). Les valeurs ne sont pas arrondies : 4.499:1 échoue.

En quoi un guide de style web diffère-t-il d'une charte graphique d'impression ?

Il ajoute ce dont l'impression n'a jamais besoin : logos pour fonds sombres et favicons, associations de couleurs vérifiées pour le contraste, polices web chargeables avec polices de secours, tailles de texte adaptatives et états interactifs comme le survol et le focus clavier.

Comment les agences gardent-elles de nombreux sites clients fidèles à la marque ?

En inscrivant les valeurs clés dans la plateforme plutôt que dans un PDF. Sur la plateforme en marque blanche de We.Inc, logos, couleurs, police et style de bouton sont définis une fois par marque et se retrouvent sur la connexion client, le tableau de bord et les e-mails.