×

La charte graphique d’un site web de niche tient en 5 éléments et une seule page. Logo décliné en favicon, 2 à 3 couleurs à contraste vérifié, 1 ou 2 polices, un style d’images en 3 règles, une fiche qui fixe le tout. Comptez 4 à 8 heures en autonomie, 250 à 550 € chez un freelance. Les modèles de 40 pages visent une marque nationale, pas un site de niche.

Quels sont les 5 éléments d’une charte graphique de site web qui suffisent ?

Élément Minimum utile Test à passer Logo 3 versions : couleur, monochrome, favicon Lisible à 32 px Couleurs 2 à 3 codes HEX Texte ≥ 4,5:1, boutons ≥ 3:1 Polices 1 à 2 familles, 4 graisses maximum Corps de texte à 16 px Images 3 règles écrites Ratio fixe, poids ≤ 200 Ko Fiche de règles 1 page Un rédacteur l’applique sans vous

1. Le logo en 3 versions, dont un favicon lisible à 32 px

Le logo s’affiche surtout en petit : en-tête mobile de 40 px, onglet à 16 px. Google exige un favicon carré 1:1 d’au moins 8×8 px, recommande plus de 48×48 px, et le lit via la balise <link rel= »icon »>. Prévoyez trois fichiers : 32 px, apple-touch-icon de 180 px, 192 px pour Android. Le favicon garde le pictogramme ou l’initiale.

2. Deux à trois couleurs avec codes HEX et contraste vérifié

Une primaire, une d’accent pour les boutons, un neutre pour le texte. Le critère 1.4.3 des WCAG 2.2, repris par le critère 3.2 du RGAA 4, exige 4,5:1 pour le texte courant. Le texte de plus de 24 px, ou 18,5 px en gras, descend à 3:1, comme les boutons et bordures de champ (critère 1.4.11). Aucun arrondi : 4,49:1 échoue.

Cas réel : un vert #1F5E4A sur blanc donne 7,61:1, parfait pour les titres. Un orange #E07A2E plafonne à 3,00:1 : valable en fond de bouton avec texte gras, jamais pour un lien. Foncé en #B85A12, il passe à 4,66:1. Le gris #999999 échoue à 2,85:1 ; #767676 passe à 4,54:1.Le W3C exempte le logo de toute exigence de contraste. Le slogan ou le menu posés à côté restent du texte, soumis au 4,5:1.

3. Une ou deux polices, pas plus

Une sans serif pour le corps, une seconde, facultative, pour les titres. Chaque graisse WOFF2 pèse 15 à 40 Ko : au-delà de 4 fichiers, l’affichage ralentit sur mobile. Corps à 16 px, interlignage de 1,5 à 1,7, lignes de 60 à 75 caractères.

4. Un style d’images en 3 règles

Trois règles testables, pas un moodboard : un ratio unique (16:9 ou 3:2), un traitement (lumière naturelle, aucun filtre), une source (vos photos ou une seule banque d’images). Export en WebP sous 200 Ko.

5. Une page de règles, pas un PDF de 40 pages

Les chartes classiques font 10 à 100 pages. La vôtre tient sur une page : les 3 logos, les codes HEX avec leurs ratios, les tailles de police (H2, H3, corps, bouton), les 3 règles d’images et 3 interdits.

Ce qu’un site de niche peut zapper sans risque

Quatre postes gonflent les devis sans servir un site.

• CMJN et Pantone : réservés à l’impression → ajoutez-les au premier flyer.
• Papeterie et signalétique : propres au local physique → inutiles en ligne.
• Iconographie maison de 50 pictogrammes : coûteuse → une seule bibliothèque libre, Lucide ou Phosphor.
• UI kit complet : sert une application → sur WordPress : couleur, survol et arrondi du bouton.

Combien coûte une charte minimale, et en combien de temps ?

En autonomie avec Figma ou Canva, Adobe Color et le WebAIM Contrast Checker, la fiche se boucle en 4 à 8 heures, pour 0 €. Sur Codeur.com, une charte de TPE se négocie entre 100 et 500 € HT, 250 € en moyenne. Une charte sans logo pour site vitrine ressort à 550 € de devis moyen, livrée en 4 jours. Une agence démarre vers 5 000 €.

Sans logo existant, le forfait évite les dépassements : une offre de logo et charte à prix fixe arrête le périmètre avant le premier croquis. Exigez dans le devis les sources SVG, les PNG 32 et 180 px et la fiche d’une page.

Les 4 erreurs qui ruinent une charte de site de niche

Le logo réutilisé tel quel en favicon : à 16 px, un nom de 12 lettres devient une tache. Testez à 16, 32 et 48 px, zoom à 100 %.Quatre couleurs ou plus : au-delà de 3, l’accent ne guide plus le clic.Un gris clair pour le texte : #767676, jamais #999999.Une charte jamais reportée dans le thème : saisissez codes HEX et polices dans le Customizer WordPress le jour même.