Créer une charte graphique d'une page, avec les paires de couleurs conformes

La plupart des chartes graphiques répondent à la question que pose le client, « quelles sont nos couleurs ? », et sautent celle que pose ensuite le développeur : « sur lesquelles puis-je mettre du texte ? » Une charte d’une page peut répondre aux deux, et c’est la seconde réponse qui empêche la marque d’être mal utilisée.

Ce qu’il faut sur une charte minimale

Quatre éléments, chacun présent parce que quelqu’un, plus loin dans la chaîne, va s’en servir :

• Le logo, sous forme de fichier. La charte y renvoie ; elle ne le redessine pas.
• La palette, chaque couleur nommée selon son rôle et donnée en valeur hex, pour que personne n’ait à la prélever dans un PDF.
• Une association de polices : une police de titre et une police de texte courant. En proposer trois garantit qu’aucune ne sera suivie.
• Une matrice des combinaisons approuvées, la section que la plupart des modèles omettent.

Une matrice des combinaisons approuvées est une grille qui montre chaque couleur de la marque posée en texte sur chacune des autres, avec le contraste mesuré et un verdict conforme ou non pour chaque case. Elle transforme une palette en consignes, car cinq codes hex n’apprennent rien à un développeur sur les couleurs qui peuvent porter du texte sur telle ou telle autre. Les chartes publiées par UCLA, GOV.UK, le système Carbon d’IBM et Scope en contiennent toutes une, avec les échecs signalés ; UCLA les marque DNP, pour « does not pass » (ne passe pas).

Ce qu’une charte d’une page peut laisser de côté, ce sont les textes de ton de marque générés et une déclaration de mission rédigée par un outil. Un champ vide pour ces éléments est plus honnête que du remplissage.

Créer la charte avec l’outil

1. Ouvrez le Brand sheet generator et choisissez un point de départ. I have a logo (j’ai un logo) extrait jusqu’à quatre couleurs distinctes directement de l’image (PNG, JPEG, WebP ou SVG). Start from scratch (partir de zéro) ouvre une palette de quatre couleurs que vous pouvez remplacer.
2. Saisissez le nom dans Brand name.
3. Dans Palette, réglez chaque couleur avec sa pastille ou son champ hex, puis renommez-la. Add porte la palette jusqu’à six couleurs et Remove la réduit à deux. Si vous êtes parti d’un logo, vérifiez les noms : les couleurs sont libellées Primary, Ink, Surface et Accent dans l’ordre où elles ont été trouvées, pas selon leur fonction.
4. Dans Typography, choisissez une association. Les filtres en haut (All, Modern, Editorial, Technical, Warm, Classic, Expressive) affinent la liste, et Explore all 16 pairings affiche les autres. Toutes les polices sont sur Google Fonts sous licence OFL.
5. Lisez Approved combinations. La ligne sous le titre compte les paires refusées. Le tableau a quatre colonnes : Text on background (texte sur fond), WCAG, APCA et Use instead (utiliser plutôt). Sous le tableau, toute paire de couleurs qui se confond en simulation de daltonisme est signalée.
6. Exportez depuis la barre du bas : PDF pour un document A4 à envoyer, PNG pour la charte en une seule image à glisser dans une présentation, et Tokens pour les couleurs au format JSON W3C DTCG. Save here conserve la charte sur cet appareil.

Incluez les couleurs dont vous pensez qu’elles vont échouer. Une matrice d’où l’on a retiré les couleurs gênantes n’est pas une consigne.

Une matrice à quatre couleurs, pas à pas

La palette de départ de l’outil fait un bon cas d’essai, parce qu’elle a l’air sûre : Primary #2563EB, Ink #0F172A, Surface #FFFFFF et Accent #F59E0B.

Chaque case est un rapport de contraste WCAG : (luminance la plus claire + 0.05) ÷ (luminance la plus foncée + 0.05). Les luminances relatives des quatre couleurs sont 0.1532, 0.0088, 1 et 0.4389. Quatre couleurs donnent 4 × 3 = 12 cases, car « Ink sur Surface » et « Surface sur Ink » sont des lignes distinctes. Le rapport est le même dans les deux sens ; voici donc les six paires distinctes :

Paire	Calcul	Rapport	Verdict
Ink et Surface	1.05 ÷ 0.0588	17.85:1	AA
Ink et Accent	0.4889 ÷ 0.0588	8.31:1	AA
Primary et Surface	1.05 ÷ 0.2032	5.16:1	AA
Primary et Ink	0.2032 ÷ 0.0588	3.45:1	Grand texte uniquement
Primary et Accent	0.4889 ÷ 0.2032	2.40:1	Ne passe pas
Surface et Accent	1.05 ÷ 0.4889	2.14:1	Ne passe pas

La ligne au-dessus du tableau affiche donc « 6 of 12 pairings fail AA for body text » (6 paires sur 12 échouent au niveau AA pour le texte courant). La moitié des combinaisons de la palette ne peut pas porter de texte courant, et celle qui surprend, c’est l’accent : l’ambre sur le fond de page blanc mesure 2.14:1, très loin des 4.5:1 qu’exige le texte courant. C’est un très bon remplissage pour un badge ou un bouton avec du texte foncé dessus. Ce n’est pas une couleur de texte sur blanc.

Les rapports sont tronqués plutôt qu’arrondis. 1.05 ÷ 0.2032 donne 5.167, affiché 5.16:1 : une paire à 4.499 ne peut donc jamais s’afficher 4.50 et sembler conforme.

La colonne des substituts

Signaler une paire refusée, c’est la moitié d’une consigne. L’autre moitié, c’est ce qu’il faut utiliser à la place, et « choisissez une autre couleur » n’est pas une réponse quand la couleur est la marque.

Chaque ligne refusée propose un substitut, quand il en existe un, en conservant la teinte de la couleur du texte et en cherchant sur son axe de luminosité la valeur la plus proche qui dépasse 4.5:1. La case signifie « cette couleur sur celle-là » : c’est donc toujours la couleur du texte qui est remplacée, jamais le fond. Le substitut reste perçu comme la couleur de la marque, car c’est la teinte qui rend une couleur reconnaissable et la luminosité qui détermine la mesure. Cette distinction est détaillée dans comment corriger le contraste sans changer la couleur de votre marque.

Le PDF reprend le même tableau avec trois verdicts, AA, Large only et DNP, et le hex du substitut partout où il y en a un. La colonne APCA reste à l’écran.

Où s’arrête une matrice conforme

Une matrice entièrement conforme est une palette qui n’échouera pas sur le contraste. Ce n’est pas une marque accessible, et trois limites méritent d’être imprimées sur la charte elle-même :

• « Grand texte » a une définition. Le WCAG considère un texte comme grand à partir de 24px, ou de 18.66px en gras. Les paires « grand texte uniquement » vont sur les titres, pas sur les légendes.
• Le chiffre APCA est calculé pour du 16px en graisse normale. Il prédit mieux la lisibilité du texte courant, c’est pourquoi il figure à côté du rapport WCAG au lieu de le remplacer.
• Le contraste n’est qu’un critère. Le critère WCAG 1.4.1 exige séparément que la couleur ne soit jamais le seul moyen de transmettre une information, ce qu’aucun audit de palette ne peut vérifier. La ligne sur le daltonisme sous le tableau sert de rappel, et comment créer une palette adaptée aux daltoniens va plus loin.

Les autres méthodes

Aucun système d’exploitation ne propose de méthode intégrée pour créer une charte graphique ou sa matrice. À la main, c’est un tableur : une ligne et une colonne par couleur, la diagonale laissée vide, et chaque case restante mesurée dans un vérificateur de contraste comme le Contrast checker. Le nombre de cases grimpe vite. Quatre couleurs font 4 × 3 = 12 mesures ; six en font 6 × 5 = 30. Trouver un substitut à chaque échec à la main revient à ajuster la luminosité et à remesurer jusqu’à ce que ça passe.

Vérifier que rien n’a été envoyé

Le logo que vous ajoutez est lu dans un canvas dans l’onglet, et le PDF et le PNG y sont aussi construits. Le code qui écrit chaque export est téléchargé la première fois que vous appuyez sur le bouton, ce qui apparaît dans le panneau Network des outils de développement comme une requête de script entrante. Surveillez ce même panneau pendant que vous ajoutez votre logo et exportez : rien ne sort avec l’image ou la palette.

Et ensuite

Ouvrez le Brand sheet generator avec la palette exactement telle qu’on vous l’a remise, et lisez d’abord les lignes refusées. C’est là que le document justifie sa place.