Quelle est la charte graphique d’un site ?

Qu’est-ce qu’une charte graphique ?

Une charte graphique rassemble les choix visuels qui rendent une marque reconnaissable : couleurs, polices, logo et règles pour les employer. Elle sert à ce que votre site, vos documents et vos réseaux sociaux se ressemblent.

Les trois éléments les plus faciles à relever sont les couleurs, les polices et le logo. L’outil les cherche à partir de l’adresse d’un site, pour retrouver ceux de votre propre site ou observer ceux d’un marché.

Que montre l’outil ?

Saisissez l’adresse d’un site : l’outil lit la page et affiche :

• le titre de la page, ou à défaut son adresse ;
• jusqu’à 8 couleurs, chacune avec son code hexadécimal et son contraste sur blanc ;
• jusqu’à 6 polices déclarées, ou la mention « Aucune police déclarée dans la page » ;
• le logo, quand l’outil en trouve un exploitable.

L’adresse analysée est inscrite dans l’adresse de votre page : un lien suffit pour relancer ou partager l’analyse.

Comment analyser un site ?

L’analyse tient en quatre gestes :

1. Saisissez l’adresse, avec ou sans https:// : aurentia.fr suffit.
2. Cliquez sur Analyser.
3. Lisez les couleurs, les polices et le logo.
4. Vérifiez chaque valeur avant de la reprendre.

Prenons aurentia.fr. L’outil ajoute https://, lit la page puis jusqu’à trois de ses feuilles de style, et affiche chaque couleur sur une ligne du type « #ff4d00 · 3,3 pour 1 sur blanc » : le code, puis le rapport de contraste du WCAG 2.1 calculé sur fond blanc, arrondi à une décimale.

D’où viennent les couleurs ?

L’outil relève d’abord la couleur de thème déclarée par la page, puis les couleurs écrites dans ses balises de style, puis celles des feuilles de style liées, trois au plus. Les codes hexadécimaux et les notations rgb() ou rgba() sont lus ; les notations hsl() et les noms de couleur ne le sont pas. Chaque couleur est ramenée à un code #rrggbb, comptée, et les plus fréquentes passent en premier au sein de chaque source. L’outil en garde 8.

Ce n’est donc pas un classement de l’ensemble du site : blanc, noir et gris apparaissent comme les autres. Les styles écrits directement dans les attributs des balises ne sont pas lus.

Comment les polices sont-elles trouvées ?

Les polices viennent des déclarations font-family des balises de style de la page, puis de ses feuilles de style liées, trois au plus. Un site dont les polices sont choisies par un script, ou dans un fichier que l’outil ne lit pas, affichera « Aucune police déclarée dans la page », même s’il en utilise bien.

La liste reprend les noms tels que le site les déclare, sans les familles génériques (serif, sans-serif, system-ui) qui ne désignent aucune police précise. Ce sont des polices déclarées, pas la preuve qu’elles sont chargées ou qu’elles servent aux titres.

Comment le logo est-il trouvé ?

L’outil retient, dans cet ordre, l’image de partage de la page (og:image), l’icône tactile (apple-touch-icon), puis l’icône déclarée par la page. Sans aucune de ces images, ou si l’image est inutilisable, il tente l’icône que tous les sites servent à une adresse fixe, favicon.ico. Ce n’est donc pas toujours un logo : une image de partage peut être une illustration ou une photo.

L’image doit être au format PNG, JPEG, WebP, GIF ou ICO et peser 128 Kio au plus. Le format SVG est refusé, car c’est du code et non une image inerte. Nos serveurs récupèrent l’image et l’intègrent à la page de résultat : votre navigateur ne contacte jamais le site analysé.

Quelles adresses sont acceptées ?

Seules les adresses publiques en https. L’outil refuse http, tout port autre que 443, un identifiant ou un mot de passe dans l’adresse, les adresses IP quelle que soit leur écriture, ainsi que localhost et les noms locaux ou internes. Chaque refus s’accompagne d’un message qui dit quoi corriger.

La requête part de nos serveurs et se présente sous le nom « AurentiaFreeTools/1.0 » : le site analysé voit un visiteur identifié comme tel. Elle suit trois redirections au plus, attend la page 8 secondes et chaque feuille de style ou image 5 secondes, et lit 512 Kio de la page et 256 Kio de chaque feuille de style.

Pourquoi l’analyse échoue ou reste maigre ?

Quand la page ne peut pas être lue, le message dit pourquoi. « Ce site refuse les analyses automatiques » signifie que le site répond par un refus (erreur 401, 403 ou 429) : il filtre les robots, et l’outil, qui se présente honnêtement, ne cherche pas à contourner cette protection. Les grandes enseignes et certains sites très visités le font. « Le site met trop de temps à répondre », « Le site est injoignable pour le moment », « Cette adresse ne mène à aucune page » et « Cette adresse ne renvoie pas une page web » désignent chacun leur cause. Un site lent ou injoignable est interrogé une seconde fois avant d’abandonner, et un nom de domaine nu est aussi essayé avec www.

« Trop de demandes en peu de temps » signifie que la limite de 10 demandes par minute et par adresse IP est atteinte. Enfin, une connexion échouée de votre côté a son propre message.

Un résultat maigre est plus fréquent : l’outil n’exécute aucun script, donc une couleur ajoutée après coup par JavaScript n’apparaît pas.

Ce que l’outil ne peut pas faire

Il lit la page telle qu’elle est servie, sans l’afficher. Le résultat est une base à vérifier, pas la charte officielle d’une marque : il ne dit ni quelle couleur est la principale, ni quelle police sert aux titres, ni les règles d’usage.

Le contraste n’est calculé que sur blanc et arrondi à une décimale : un « 4,5 » affiché peut cacher un 4,46. Enfin, un logo ou une identité trouvés ici ne sont pas pour autant libres de droits.

Aller plus loin avec Aurentia

Une palette relevée reste une liste de codes tant qu’elle n’est nulle part enregistrée. Dans Aurentia, cette palette, ces polices et ce logo deviennent la fiche d’identité unique de votre projet. Elle sert ensuite de référence à vos textes, à vos visuels et aux emails générés.