Une charte graphique web « légère » sert à une chose : garder un site cohérent, lisible et facile à faire évoluer. C’est utile pour le branding, la conversion et la compréhension par les moteurs. Concrètement, cela évite qu’une page à Sierre ne ressemble plus à une page à Yverdon, ou qu’un bouton sur mobile n’ait pas la même apparence que sur desktop. Sur WordPress, les thèmes block et les styles globaux permettent de cadrer tout cela proprement.
Exemples de contextes locaux : page service pour une entreprise à Fribourg, page « zones d’intervention » Vaud-Valais-Neuchâtel, page contact pour le Jura, landing pour une campagne à Monthey ou Porrentruy. L’objectif reste identique : une identité simple, stable, et une navigation sans friction.
Sources officielles utiles : WordPress (theme.json, styles globaux), WordPress (Site Editor), WordPress (thèmes block), W3C (WCAG 2.2), W3C (contraste 4.5:1, SC 1.4.3), Google Fonts (Inter).
1) Les 5 briques d’une charte web qui tient dans une page
- Couleurs : 1 accent principal, une gamme de neutres, et 2 ou 3 accents utilitaires (info, succes, alerte).
- Typographies : une police pour titres et texte (ou une combinaison simple), avec une hiérarchie claire.
- Grille et rythme : une base d’espacement, des marges, des rayons, des ombres sobres.
- Composants : boutons, liens, champs de formulaires, cartes, badges.
- Accessibilité : contrastes, focus visible, cibles tactiles, alt-text utiles.
Astuce : une charte web efficace n’est pas un catalogue. Elle fixe des règles simples, puis laisse respirer le contenu.
2) Appliquer la charte dans WordPress : Site Editor + styles globaux
Avec un thème block, le Site Editor permet de piloter l’en-tête, le pied de page et les modèles. Ensuite, theme.json sert à cadrer les styles globaux (couleurs, typographies, espacements) et à éviter les variations au fil des pages.
Exemple de base (theme.json) : couleurs, typos, rayons, boutons
Ci-dessous, un exemple volontairement minimal. Il sert de point de départ pour cadrer l’identité dans un thème block, puis affiner avec des patterns.
{
"version": 2,
"settings": {
"color": {
"palette": [
{ "slug": "accent", "name": "Rouge", "color": "#E20000" },
{ "slug": "noir", "name": "Noir", "color": "#0B0B0B" },
{ "slug": "blanc", "name": "Blanc", "color": "#FFFFFF" },
{ "slug": "gris-100", "name": "Gris 100", "color": "#E7E7E7" },
{ "slug": "gris-400", "name": "Gris 400", "color": "#A8A8A8" },
{ "slug": "bleu", "name": "Bleu", "color": "#1D4ED8" },
{ "slug": "vert", "name": "Vert", "color": "#16A34A" },
{ "slug": "jaune", "name": "Jaune", "color": "#EAB308" }
]
},
"typography": {
"fontFamilies": [
{
"slug": "inter",
"name": "Inter",
"fontFamily": "Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif"
}
],
"fontSizes": [
{ "slug": "base", "name": "Corps", "size": "1rem" },
{ "slug": "lg", "name": "Grand", "size": "1.125rem" },
{ "slug": "h3", "name": "H3", "size": "1.5rem" },
{ "slug": "h2", "name": "H2", "size": "2.125rem" },
{ "slug": "h1", "name": "H1", "size": "3rem" }
]
},
"spacing": {
"spacingSizes": [
{ "slug": "2", "name": "8", "size": "8px" },
{ "slug": "3", "name": "12", "size": "12px" },
{ "slug": "4", "name": "16", "size": "16px" },
{ "slug": "6", "name": "24", "size": "24px" },
{ "slug": "8", "name": "32", "size": "32px" },
{ "slug": "12", "name": "48", "size": "48px" }
]
}
},
"styles": {
"typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "lineHeight": "1.4" },
"elements": {
"link": { "typography": { "textDecoration": "underline" } }
},
"blocks": {
"core/button": {
"border": { "radius": "12px" },
"spacing": { "padding": { "top": "14px", "right": "20px", "bottom": "14px", "left": "20px" } }
},
"core/group": {
"spacing": { "padding": { "top": "var(--wp--preset--spacing--6)", "bottom": "var(--wp--preset--spacing--6)" } }
}
}
}
}3) Le bouton CTA : une règle simple pour éviter l’effet « sapin de Noel »
Sur une page, un CTA principal suffit presque toujours. Un second bouton (secondaire) peut exister, mais il doit rester discret. Cela clarifie la lecture et réduit l’hésitation, en particulier sur mobile.
- 1 CTA principal : couleur d’accent, libellé direct.
- 1 CTA secondaire : fond clair, bord, ou simple lien.
- Les liens restent soulignés par défaut pour la lisibilité.
4) Motif signature : un détail qui structure sans surcharger
Un motif répété avec parcimonie structure la page : par exemple une barre verticale fine à gauche d’un bloc titre (hero, citation, preuve). La règle utile : une seule barre par bloc, avec une respiration nette, et un alignement propre à la grille. Cela guide l’oeil sans voler la vedette au contenu.
5) Accessibilité : 3 contrôles rapides avant publication
- Contraste : viser au minimum 4.5:1 pour les textes standards, surtout sur boutons et liens.
- Focus visible : la navigation clavier doit rester claire sur menu, boutons, formulaires.
- Cibles tactiles : éviter les boutons trop petits sur mobile (menu, icones, CTA).
Ces contrôles évitent les irritants classiques, notamment sur des pages locales qui reçoivent du trafic mobile.
Checklist express (10 minutes)
- Palette et typographies cohérentes sur 3 pages : Accueil, Service, Contact.
- Un seul CTA principal par section clé.
- Liens soulignés, pas seulement une couleur.
- Contraste et focus visibles partout.
- Images optimisées et alt-text utiles.
FAQ Charte graphique WordPress (Suisse romande)
Faut-il une charte graphique complète pour un site vitrine à Neuchâtel ou en Valais ?
Non. Une charte légère suffit souvent : 1 palette, 1 typographie, une hiérarchie de titres, et 2 styles de boutons. Le gain est immédiat sur la cohérence et la maintenance.
theme.json remplace-t-il le CSS sur WordPress ?
Pas totalement. theme.json cadre les réglages et styles globaux de manière standard, puis un complément CSS reste possible si un besoin précis apparaît. L’intérêt est de réduire le CSS « au cas par cas ».
Pourquoi insister sur le contraste pour une page locale (Vaud, Fribourg, Jura) ?
Parce qu’une grande partie du trafic local arrive sur mobile, parfois en extérieur. Un contraste correct et des liens clairs limitent les abandons avant le formulaire ou l’appel.
Comment garder une identité cohérente quand plusieurs personnes éditent le site ?
Créer des patterns réutilisables (hero, services, preuve, FAQ, contact), puis cadrer couleurs et typos via styles globaux. Le contenu peut évoluer, sans dériver visuellement.
Besoin d’une charte web appliquée proprement sur WordPress ?
Pour cadrer couleurs, typographies, patterns, CTA et accessibilité sur un thème block, et garder un site cohérent sur l’ensemble des cantons romands, contactez clickclick.ch.
