Accueil › Design & UX › Charte graphique

Création de charte graphique

Les règles qui gardent votre image cohérente, quel que soit le support ou le prestataire.

La différence

Identité visuelle ou charte graphique : la différence

L'identité visuelle, c'est votre image. La charte graphique, c'est le mode d'emploi qui la protège : comment utiliser le logo, les couleurs, les typographies.

Charte graphique

Contenu d'une charte

Zones de protection et tailles minimales du logo
Codes couleurs pour l'écran et l'impression
Hiérarchie typographique
Exemples d'usages autorisés et interdits

Exemple réel

Réalisation

Exemple réel : la charte de ce site, Studio From The Sea. Chaque couleur a un rôle, et chaque association texte / fond est vérifiée selon les règles d'accessibilité WCAG 2.1.

Palette de couleurs

Abysse#03111AFond principal

Profond#062230Sections secondaires

Encre#0B1F29Texte sur fond clair

Écume#EEF4EFTexte sur fond sombre, sections claires

Fluo#5CFFD1Accent : boutons, titres surlignés

Brume#8FA9B0Texte secondaire

Algue#0D7A5FAccent sur fond clair

Typographies

AntonTitres, en capitales

Inter TightTextes, menus, boutons

Contrastes vérifiés (WCAG 2.1)

Aperçu	Association	Rapport	Niveau
Aa	Écume sur AbysseTexte courant	17.1 : 1	AAA
Aa	Fluo sur AbysseAccent, boutons	15.2 : 1	AAA
Aa	Brume sur AbysseTexte secondaire	7.7 : 1	AAA
Aa	Encre sur ÉcumeTexte sur fond clair	15.2 : 1	AAA
Aa	Algue sur ÉcumeAccent sur fond clair	4.7 : 1	AA
Aa	Encre sur FluoTexte des boutons fluo	13.4 : 1	AAA
Aa	Fluo sur ÉcumeÀ éviter : fluo sur fond clair	1.1 : 1	Insuffisant

Seuils WCAG 2.1 : 4,5 : 1 pour le texte courant (AA), 3 : 1 pour les grands textes (AA), 7 : 1 pour le niveau renforcé (AAA). Rapports calculés à partir des codes couleur exacts du site.

FAQ

Questions fréquentes

Quel format est livré ?

Un document PDF de référence et les fichiers sources utiles à vos prestataires.

Combien de temps ?

On vous l'indique avec le devis, selon ce qui existe déjà.