Catégories
CC1-cours Com-Créa

Les couleurs en design graphique

Nous allons voir dans ce cours quels sont les fondamentaux de l’utilisation de la couleur en design graphique.

Nous aborderons en particulier la question du choix des couleurs en fonction de la thématique du message à communiquer. Nous verrons aussi comment construire des nuanciers fonctionnels garantissant la lisibilité des textes mis en page.

En guise d’introduction, je vous propose de visionner un diaporama réalisé avec le framework BIG. Testez les touches J (jump) P (print) et T (talk) 😉

http://graphizm.fr/com-crea/couleurs-design-graphique/#0

L’essentiel du cours est dans ce diaporama ! Sans image (ou presque)…

Dans le navigateur Chrome, ouvrez le diaporama avec ce navigateur et enfoncez la touche « P ». Le diaporama s’affiche sous une forme imprimable que vous pourrez annoter ultérieurement.

Capture d'écran annotée de la fenêtre d'impression de Chrome.

Liste de thèmes abordés dans le diaporama “Les couleurs en design graphique”

  • Les couleurs qui rassurent les utilisateurs (qui plaisent aux utilisateurs) VS Les couleurs qui nous plaisent
  • Les couleurs qui fonctionnent bien ensemble VS Les couleurs qui vont bien ensemble
  • Les couleurs qui aident à structurer la présentation d’un message VS Les couleurs qui n’aident pas à comprendre le message
  • Les couleurs qui coopèrent avec les autres composantes graphiques (textes, images, cadres, motifs, textures, etc.) VS Les couleurs qui ne collaborent pas avec les autres composants graphiques
  • Les couleurs qui permettent de guider l’utilisateur-lecteur vers l’essentiel VS Les couleurs qui perdent le lecteur
  • Les couleurs utilisées en petit nombre VS Les couleurs utilisées en grand nombre
  • Les couleurs aux valeurs régulièrement étagées VS Les couleurs aux valeurs non étagées
  • Les couleurs qui favorisent la lisibilité (et la visibilité) VS Les couleurs qui n’aident pas à mieux voir et mieux lire les contenus
  • Les couleurs qui respectent les codes graphiques d’un secteur professionnel VS Les couleurs qui ne respectent pas les codes d’un secteur professionnel
  • Les couleurs qui entrent en correspondance avec le sujet traité VS Les couleurs qui ne collent pas au sujet traité
  • Les couleurs qui priment sur les logos VS Les couleurs qui ne jouent aucun rôle dans une identité visuelle
  • Les couleurs choisies en début de processus de design VS Les couleurs choisies en fin de processus de mise en page

➜ Quels sont les points sur lesquels vous disposez de bases solides ? Quels sont les points que vous souhaiteriez approfondir ? Quels sont les points qui ne vous “parlent” absolument pas ?

Les couleurs en pratique

Prenons le temps d’approfondir quelques thématiques listées plus haut.

Les couleurs qui nous rassurent

Nous avons continuellement besoin d’être rassurés. De ce fait, les couleurs rassurantes ne sont pas des teintes jugées apaisantes par tel ou tel spécialiste mais bien les couleurs que nous nous attendons à rencontrer aux endroits où elles sont sensées se trouver !

Je suis rassuré si la croix de la pharmacie du coin est verte, si la voiture des pompiers est rouge, si l’ambulance est blanche (ou jaune), si le tract de promotion de mon vendeur de pizzas est vert et rouge, si mon ordinateur est noir ou gris, si l’affiche pour l’expo sur le grand requin blanc au musée de la mer est bleue, etc.

Il y a toujours des francs-tireurs, mais ce sont soit des grosses marques qui n’ont pas grand chose à perdre, soit des « petits » qui essayent de se démarquer (…par rapport aux autres « petits »).

Les couleurs qui fonctionnent bien

Le design professionnel est en général centré sur les utilisateurs, sur leurs besoin de clarté dans l’agencement des choses, de facilité d’utilisation des objets (concrets ou virtuels), de simplicité. Les designers affirment que le design suit la fonction. Concernant la couleur, le choix d’une couleur suit l’analyse de la fonction de l’objet coloré.

Parlons de la couleur des ambulances… c’est d’actualité ! Elles sont généralement blanches. Blanches comme la tenue du personnel hospitalier (ou du moins l’idée qu’on s’en fait…), blanches comme par opposition aux véhicules noirs des pompes funèbres. Eh bien vous avez certainement déjà croisé des ambulances jaunes ! Ces dernières se voient mieux (et pas seulement en Belgique).

Je vous invite à lire ces articles, consacrés à une nouvelle couleur d’ambulance, sur laprovince.be et sur chu-poitiers.fr

Les couleurs d’un secteur professionnel

Lors de tout brief préalable à la réalisation d’un

Pour illustrer la question des codes chromatiques dans tel ou tel secteur professionnel, je vous propose de lire cet article sur nouvelobs.com. Il y est question du secteur de la promotion cinématographique.

Les couleurs qui collent avec le sujet abordé

Ce qui rend la couleur cohérente avec le sujet traité relève de ce qui s’appelle la symbolique des couleurs. Loin d’être aussi subjectif que nous pourrions le penser, la symbolique des couleurs est une donnée culturelle (culture continentale, nationale, régionale, familiale, etc.) fortement ancrée dans notre esprit.

Je vous recommande le site evolutiongraphique.com pour approfondir le sujet.

➜ Saisissez « symbolique des couleurs » dans Pinterest, vous trouverez de nombreuses infographie sur le sujet !

Des couleurs que tous distingent bien

Nous en avons déjà parlé et nous avons tous (je crois…) fait les tests de discrimination chromatique. Si quelqu’un ne les a pas fait, c’est sur studiobenziv.wordpress.com 😉

Faites une recherche sur Google Images sur le daltonisme, vous allez voir que la question de la fonctionnalité et de la symbolique des couleurs ne se pose pas de la même manière pour tout le monde ! Les designers graphiques, qui se soucient des utilisateurs de leurs produits, prennent en compte ces anomalies de perception en misant sur d’autres paramètres pour permettre la distinction entre deux composants colorés.

C’est là que la valeur de la couleur (son niveau de luminosité, ou son équivalent en niveau de gris) prend toute son importance. Le contraste de valeurs établit une différence visible par tous, même par les personnes devant composer quotidiennement avec leur achromatopsie (encore une recherche intéressante à faire dans Google images !).

Des couleurs qui rendent les formes visibles et lisibles

Vous l’avez compris, tout est une question de contraste et en particulier de contraste de valeurs (ou contraste de luminosité). Vous allez apprendre à travailler comme si vous observiez votre travail à travers un appareil photo numérique réglé sur noir et blanc.

Créer et utiliser des nuanciers fonctionnels

Concrètement, un designer graphique choisit d’utiliser des couleurs en fonction du contraste qu’elles présentent les unes sur les autres. S’il souhaite mettre en valeur un texte ou une forme en utilisant la couleur, il choisira une couleur de fond (arrière-plan) dont la valeur de gris sera très différente de celle de l’objet mis en avant. A contrario, s’il souhaite dissimuler une information, il jouera sur un faible contraste de valeurs de gris entre forme informative et fond.

Utiliser des palettes de couleurs étagées

La question de l’étagement des valeurs des couleurs est clairement abordée dans le domaine du webdesign. On trouve donc sur le Web des palettes de couleurs RVB classées par valeurs et étagées régulièrement du blanc au noir.

Voici une palette de couleurs RVB dont les couleurs ont été étagées par valeurs de gris. Sa correspondance en niveaux de gris permet de se faire une juste idée de la qualité de l’étagement des gris. Cette palette est une simulation réalisée au sein de l’Université de Berkeley, en Californie, pour afficher en RVB le nuancier utilisé par le WCS (World Color Survey). Il est surprenant de constater à quel point la perception des couleurs fausse notre perception des valeurs de gris !

Faites un clic-droit > Enregistrer sous et récupérez ces images sur vos postes pour les utiliser dans vos productions RVB.

Palette de couleurs RVB étagées, des plus claires aux plus foncées.
Palette de valeurs étagées, des plus claires aux plus foncées, réalisée à partir de sa version en couleur.

En ouvrant ces images dans Photoshop et en survolant les couleurs avec la pipette activée, vous pourrez lire dans le panneau « Informations » les valeurs de gris des différentes couleurs. Si vous ne lisez pas le même type d’infos que sur la capture d’écran ci-dessous, pensez à régler les options du panneau « Informations ».

L’attribut alt de cette image est vide, son nom de fichier est infos-valeur-couleur-1.png.

Voici d’autres palettes Web, bien étagées, utilisées pour le design des sites du gouvernement des États-Unis.

L’attribut alt de cette image est vide, son nom de fichier est uswds-standard-color-wheel-2.6.0.jpg.
L’attribut alt de cette image est vide, son nom de fichier est uswds-vivid-color-wheel-2.6.0.jpg.

➜ Une conversion en CMJN de la palette ci-dessus, retouchée pour en étager régulièrement les valeurs des couleurs, est disponible en ligne au format tif.

Note : cette palette est perfectible car plusieurs couleurs utilisent de très faibles pourcentages des couleurs primaires ou du noir (pourcentages inférieurs à 5%). Dans la mesure du possible, approchez la couleur choisie en supprimant ces petits pourcentages et vérifiez sa valeur de gris après ajustement.

Utiliser une palette de couleurs moyennes

➜ Pour composer des nuanciers de 3 couleurs régulièrement étagées intégrant le noir et le blanc, vous pouvez utiliser une palette de couleurs moyennes normalisées. Dans cette palette, les couleurs moyennes présentent un contraste suffisant sur le noir et le blanc pour répondre à la norme d’accessibilité AA pour toutes les tailles de caractères. Cette norme pour le webdesign exige un ratio de contraste entre 2 couleurs supérieur à 4.5. Pour en savoir plus à ce sujet, consultez les sites proposés en bas de la page Web indiquée.

Faites l’expérience suivante : téléchargez l’image ci-dessus et convertissez-la en niveaux de gris dans Photoshop. Toutes les couleurs moyennes auront une valeur de gris proche de 54% et ne se distingueront plus l’une de l’autre.

Notez que vous pouvez constituer des nuanciers de 4 couleurs avec cette palette. La seule contrainte sera de ne jamais utiliser les 2 couleurs moyennes l’une sur l’autre. On parle alors de nuanciers avec des couleurs substituables de même valeur de gris.

Utiliser une palette accessible

Les futures chartes graphiques utiliseront nécessairement des nuanciers de couleurs étagées répondant aux normes d’accessibilité en vigueur. En effet, toute entreprise doit désormais communiquer en ligne et par conséquent tenir compte des contraintes du média Web.

Palette de couleurs accessibles avec explications sur le site source

La palette interactive présentée ci dessus permet de créer des nuanciers accessibles en respectant quelques règles simples. La personnalisation de la palette nécessite de modifier des variables CSS dans le code source de la page. Des explications détaillées sont données sur la page Web correspondante. Le principe de construction de telles palettes de couleurs concerne tous les designers graphiques et non seulement les webdesigners.

Conclusion

Vous voilà munis des références essentielles pour construire rapidement des nuanciers pertinents et fonctionnels.

3 points à retenir dans tout cela :

  • Le designer graphique choisit la couleur dominante de son produit de communication en fonction du code symbolique et culturel du public cible. Il se documente donc sur la culture du public visé.
  • Le designer graphique construit son nuancier pour favoriser la visibilité et la lisibilité de ce qu’il veut montrer (donner à lire). Il commence donc ses recherches en niveaux de gris.
  • Le designer graphique anticipe l’utilisation de son nuancier sur le Web et veille à étager ses couleurs pour favoriser l’accessibilité de ses produits de communication.

Une dernière petite chose aussi : les gris sont des « couleurs » très intéressantes dans un nuancier fonctionnel… À utiliser sans modération. 😄

Par Yves Goguely

Formateur au GRETA Clermont-Auvergne