Partez de la couleur de votre logo — la principale. L’outil en dérive quatre autres — l’accent (complémentaire), la secondaire (analogue), le fond clair et l’encre — vérifie que le texte se lit dessus, et vous donne les codes pour l’écran (HEX, RVB) et pour l’imprimeur (CMJN). C’est le point de départ de toute palette qu’on livre à l’atelier.
Palette de marque : de une couleur à cinq
blanc #FFFFFF · encre #111111 (WCAG 2.1 : 4,5 texte · 3 grand texte)
De la couleur du logo à la palette : pourquoi cinq, pas plus
Une palette applicable tient sur une main — c'est ce qu'on livre avec chaque logo, et ce que détaille la page sur l'identité visuelle : la principale (le logo, les titres), l'accent (les boutons, ce qu'on veut qu'on voie), la secondaire (les fonds de section, les illustrations), le fond (la page) et l'encre (le texte). Au-delà, plus personne ne sait quelle couleur va où, et le site finit avec douze bleus.
Le contraste, la règle qu'on ne négocie pas
Le texte doit contraster avec son fond à 4,5 pour 1 au minimum (norme WCAG 2.1, niveau AA), 3 pour 1 pour les grands titres. L'outil calcule ce rapport pour chaque couleur sur blanc et sur noir, et indique où elle peut porter du texte. Une couleur qui échoue n'est pas interdite : elle sert de fond ou d'accent, pas d'encre.
HEX, RVB, CMJN : quel code pour quoi
Le HEX (#00A6E0) et le RVB (0 166 224) décrivent la lumière : écrans, sites, réseaux sociaux. Le CMJN (100 26 0 12) décrit l'encre : imprimeur, enseigne, textile. Une couleur d'écran n'a pas d'équivalent exact en encre — le cyan pur de l'écran est plus vif que le cyan process — d'où l'intérêt de donner les deux dans la charte graphique.
