Quelques notions de mise en page : Les couleurs et les contrastes

les couleurs sont une composante importante d’une mise en page réussie, tant par l’apport visuel, que par sa symbolique, ne vous y trompez pas, chaque couleur a son importance et transmet un message bien précis.

Préambule

J’ai eu, pendant mes études, un professeur de couleurs (et oui un cours à l’année uniquement pour parler des couleurs), un type formidable dont j’ai, hélas, oublié le nom, mais c’est ce que l’on peut appeler; Un Monsieur.

Pourtant, nous étions partis du mauvais pied, imaginez une classe d’une vingtaine de jeunes loups et louves, qui ont passé leur première année avec brio, qui pensent déjà tout savoir sur tout, et surtout qui ne comprennent pas l’intérêt de se taper un cours uniquement pour parler des couleurs.

Bref, imaginez ce vieux monsieur (en plus), qui arrive, nous toise avec un regard torve et nous sort direct : Bonjour je suis « Je me rappelle plus son nom », ces trois premiers mois, je vais les passer à nettoyer la merde que vous avez dans vos têtes, ensuite, et seulement ensuite, quand vous aurez appris à écouter et à apprendre, nous commencerons à travailler.

Trois mois plus tard, il était devenu notre dieu, vous vous en doutez.

Bref, revenons à nos moutons.

La couleur

La couleur, c’est un sujet passionnant, que l’on parle de synthèse additive (lumière), ou soustractive (matière), mais c’est surtout, pour revenir à notre sujet, un élément communiquant fort.

Si vous ne deviez retenir qu’une chose de la couleur, ce serait ceci :

Le Cercle chromatique :

Cercle Chromatique

Nous avons :

  • les couleurs primaires (cyan (bleu primaire, magenta (rouge primaire) et jaune : P
  • les couleurs secondaires : S
  • les couleurs tertiaires : T

Je ne vais pas m’étendre sur les couleurs complémentaires ni sur les théories des couleurs contraste, mais sachez qu’à partir de ce cercle chromatique, vous pouvez aisément tester n’importe quelle concordance de couleurs.

Deux autres variations de ce cercle chromatique :

Une version désaturée :

Cercle Chromatique désaturé

Une version « lavée » appelée le plus souvent « pastel » :

Cercle Chromatique pastel

Au passage, merci à je ne sais plus qui, ce cercle chromatique a été réalisé à partir d’un fichier flash vu je ne sais plus où mais si vous le reconnaissez, comme d’habitude je me ferais un plaisir d’insérer l’origine de la source dans ce billet.

Imaginez, le nombre de variations de couleurs possibles, elles sont quasiment infinies, mais vous verrez, vous reviendrez assez rapidement au cercle chromatique de base.

Ajoutez à cela les gris qui vont du « blanc » au « noir ».

On peut de façon très schématique les classer en trois catégories :

  • Les gris neutres : simples niveaux de gris du blanc au noir sans autre information de couleur
  • les gris chauds : des gris neutres contenant en plus des ajouts de jaune et de magenta (rouge primaire)
  • les gris froid : des gris neutres qui contiennent en plus des ajouts de cyan (bleu primaire) et de magenta (rouge primaire)

Je précise, si des fois des puristes passaient par là, je schématise totalement.

Les trois couleurs

Tout comme l’usage des polices , que l’on limite à trois différentes dans un même document, on va essayer de se limiter à trois couleurs principales lorsque l’on construit une mise en page.

Je dis bien trois couleurs principales, il peut y avoir des variantes de ces couleurs (plus pastel, plus sombre, moins saturées…).

La couleur Symbole

La principale, celle qui va identifier le la chromie du site, ce n’est pas forcément celle qui remplit le plus de surface mais plutôt celle que l’on voit le plus.

Je parlais eu début de l’article des « messages » véhiculés par les couleurs, savez vous pourquoi, par exemple, le bleu est utilisé dans tout ce qui touche au conseil, à la formation, et plus généralement aux sites de business?

Parce que le bleu est ce que l’on appelle une couleur concentrique (Moi vers Lui) et donc assimilée à l’information. Raccourci : ce message est bleu, il est informatif.

Je ne vais pas m’étendre sur la symbolique des couleurs, de nombreux sites en parlent, je vous conseille au passage l’excellent pourpre.com.

La couleur d’appoint

En général c’est celle qui va être utilisée pour des aplats, pour délimiter des zones d’information, parfois même sous simple forme d’ombrés ou de cadres.

Cette « couleur » est souvent une variante de gris, neutre, chaud ou froid, à voir pour offrir un minimum de contraste avec votre couleur symbole :

  • Si votre couleur « symbole » est « chaude » préférez un gris froid ou neutre
  • Si votre couleur « symbole » est « froide » préférez un gris chaud ou neutre

Dernier point, si vous utilisez des ombrés pour vos blocs d’information, essayez si possible d’appliquer la même chose :

  • Si votre objet ombré utilise une couleur chaude utilisez un ombré en gris froid
  • Si votre objet ombré utilise une couleur froide utilisez un ombré en gris chaud

La couleur contraste

C’est la couleur qui va souligner les informations importantes, celle qui va « détacher » un élément de votre design, par petites touches. Pour l’exemple d’un site internet : les puces des listes à puces, les liens hypertextes (ou les liens au survol).

Pour la choisir, utilisez de préférence le cercle chromatique de cette façon :

Cercle chromatique avec une aide au choix des couleurs contrastes

C’est une méthode, il en existe beaucoup d’autres. Sur mon exemple, vous utilisez le Magenta comme couleur « contraste » du Cyan, vous pouvez remplacer magenta par rouge et cyan par bleu. Il existe une infinité de rouges et une infinité de bleus. Pour trouver vos bonnes couleurs « contraste » rien ne remplace l’expérimentation.

Points de précision

Si vous regardez bien l’AJblog, vous trouverez quatre couleurs, le vert, le bleu, le gris et le rouge. Ce n’est pas un exemple du fameux : faites ce que je dis, ne faites ce que je fais.

En fait, le bleu et le vert utilisés sont ce que l’on appelle vulgairement des couleurs qui « frottent », c’est à dire peu de contraste entre les deux couleurs, une saturation équivalente, une impression visuelle égale. Elles sont presque à considérer comme une couleur unique. La meilleure façon pour savoir si deux couleurs « frottent » est de faire deux aplats de même taille dans un document, de les coller l’un à l’autre. Si en prenant du recul, vous avez l’impression que la liaison entre les deux blocs devient floue, voir dégradée, c’est que vos couleurs flottent.

N’utilisez JAMAIS de couleur forte pour vos textes, sauf pour souligner certains passages, et encore, n’utilisez que la gamme des gris, mais en contraste suffisant avec le « fond » pour une lisibilité optimale.

L’ajout de couleurs à votre document risque de modifier l’impact visuel de vos « gris typographiques » (voir « les bases : le texte et les blancs »). Vous serez donc peut être obligés de revoir vos réglages.

Je n’ai pas parlé du fond général de votre site, la « couleur » de fond, elle aussi à un impact très fort sur votre document. Ce fond créé une « lumière » ambiante, qui peut énormément modifier l’impression visuelle de vos documents.

Pour exemple, regardez le cercle chromatique de base, mais avec différents fonds :

cercle chromatique de base, mais avec différents fonds

Si vous avez un visuel fort qui habille votre site, image, illustration, ou simplement votre logo, utilisez ses couleurs pour habiller votre site, uniquement pour une question d’uniformité graphique.

Pour finir (enfin)

Ce second billet se voulait simple à l’origine, désolé de l’avoir rendu peut être moins lisible en utilisant des « gros mots ».

Si vous n’avez aucune idée des couleurs pouvant aller avec votre site ou votre blog, n’hésitez pas à aller voir la « concurrence », vous vous rendrez vite compte qu’il existe des codes couleur bien précis par secteur d’activité, à tel point que les lecteurs sont habitués à identifier le secteur d’un site internet uniquement sur les couleurs utilisées, pensez-y, ce n’est pas une obligation, vous pourrez vous démarquer quand vous vous sentirez assez confiant pour créer vos propres couleurs.

Ou faites appel à un professionnel. ;)

Les articles de la série:

D’autres sont à venir.

Quelques lectures :

Quelques sites et outils

Cordialement,
Aymeric Jacquet

Tags : ,

Be Sociable, Share!

10 Commentaires pour Quelques notions de mise en page : Les couleurs et les contrastes

  • Yvan L.

    Très bon article, merci :)
    J’aurais bien aimé avoir un peu plus d’informations sur l’utilisation du cercle chromatique… je connais le site pourpre.com et je pense que je vais m’y attarder quelques heures quand j’aurais un moment pour approfondir un peu :)

    Le 14 décembre 2006 à 11 h 43 min

  • Aymeric Jacquet

    @Yvan : je vais revenir sur le cercle chromatique dans un billet futur. Je me rends bien compte que les informations données dans celui-ci sont incomplètes et méritent un certain approfondissement.

    Le 18 décembre 2006 à 15 h 39 min

  • alex

    bonjour,
    je cherche le code entre notre ressenti et les couleurs.

    Le 10 février 2007 à 22 h 51 min

  • ô mon dieu Aymeric, il faut que je linke tout le monde vers ce post, car mes yeux pleurent devant les mochetés que les gens "osent" !!!! ;)

    Le 10 février 2007 à 23 h 14 min

  • @alex : il me faudrait quelques petites précisions sur ce que vous désirez réellement, pour que je puisse le cas échéant vous proposer une liste de ressources en fonction de vos besoins réels (psychologie de la couleur, tout ce qui touche aux perceptions relatives par exemple…).

    @Cath : alors que c’est si simple de faire quelque chose de "propre". ;)

    Le 12 février 2007 à 10 h 07 min

  • alex

    Bjr,
    il me faudrait tout ce que vs avez Aymeric!!!
    Merci d’avance.

    Le 17 février 2007 à 15 h 16 min

  • Bonjour,
    un grand merci pour cet exposé trés clair
    En grande novice, je suis en train de defricher ce terrain totalement inconnu jusqu’a il y a peu.
    Moi aussi, je suis a la recherche d’info sur l’utilisation du cercle chromatique, et plus précisemment comment l’utiliser pour faire des accords « heureux » de trois couleurs.
    Nul doute qu’en continuant de fouiller dans ton blog et tes liens, je devrais avancer.
    A bientôt

    Le 12 mars 2007 à 19 h 31 min

  • Bonjour Mondemo et désolé, je découvre ton commentaire aujourd’hui (j’ai vraiment des emails qui partent dans la nature moi).

    Pour précision, dans ma série d’articles, je ne fais que survoler le sujet, il y a tellement de choses à dire, mais tu y trouvera surement une base et le cas échéant, des sources pour aller plus loin.

    Bonnes recherches.

    Le 7 mai 2007 à 11 h 09 min

  • claire

    merci beaucoup pour cet exposé c’était vraiment intérésent, bien que j’aurais aimé avoir un peut plus d’info sur les couleurs contrastés …
    Tu connais beaucoup de choses et tu as de la chance …
    merci beaucoup pour tout ça et à bientôt !!!

    Le 6 octobre 2007 à 16 h 46 min

  • LALLEMAND

    Merci pour ces conseilsJe n’ai jamais pris de cours mais je pense que les gris chauds et froids  font beaucoup pour un tableau figuratif aussi.

    Cordialement YVES.

    Le 21 février 2010 à 8 h 56 min