Les couleurs peuvent capter l’attention et donner le ton d’un projet. Mais vous ne voulez pas attirer l’attention des gens pour de mauvaises raisons. Par exemple, voici une diapo qui utilise une palette de couleurs que j’ai vu récemment sur un panneau. Qu’en pensez-vous ?

Il y a de fortes chances que vous ayez eu la même réaction que moi. L’image attire votre attention, mais pas pour les bonnes raisons !

Dans cet article, nous verrons pourquoi le graphisme de la diapo ci-dessus ne fonctionne pas. Ensuite, nous examinerons quelques façons étonnamment simples d’améliorer un projet comme celui-ci en changeant une seule chose : les couleurs.

Ce qui ne va pas sur cette diapo

La plupart des gens trouvent les palettes de couleurs comme celle de l’exemple ci-dessus désagréables à l’œil. Et ce ne sont pas seulement eux qui sont trop sensibles – ces couleurs sont réellement dures pour les yeux parce qu’elles sont très saturées. Regardons du côté de la théorie des couleurs pour expliquer ce qui se passe.

La façon la plus simple d’identifier une couleur est par sa teinte – pensez aux couleurs principales d’un arc-en-ciel, comme « bleu », « vert » ou « orange ». Les teintes pures sont très saturées et vibrantes, comme vous pouvez le voir ici.

L’intensité d’une teinte pure peut attirer l’attention, diriger le regard et faire ressortir les choses. Mais utiliser trop de teintes pures est compliqué pour notre cerveau car il a du mal à comprendre ce qu’il faut regarder en premier. De plus, si vous regardez trop longtemps la barre de couleur ci-dessus, vous remarquerez probablement que ces couleurs vives provoquent également une fatigue oculaire. Les teintes pures sont comme des cris en graphisme, donc en utiliser beaucoup ensemble, comme dans notre exemple de diapositive, est visuellement épuisant.

Pour modifier cette diapo, nous devons passer à une palette de couleurs qui n’est pas composée uniquement de teintes pures. Il existe un nombre presque infini de combinaisons de couleurs, mais voici quelques solutions faciles et rapides pour choisir une palette agréable.

Solution n°1 : désaturer les couleurs

Une façon de rendre les couleurs moins intenses est d’ajuster leur saturation. Les teintes pures sont des couleurs très saturées, donc les désaturer les rend moins intenses et plus grises.

La teinte dans la barre ci-dessus ne change pas (elle est toujours orange), mais elle est plus saturée à l’extrême gauche et progressivement moins à mesure que vous vous déplacez plus vers la droite.

Si vous aimez les couleurs vives, ne vous inquiétez pas. Un tout petit peu de désaturation adoucit les teintes pures. Cela signifie que vous pouvez garder la gaieté de la couleur vive tout en la rendant plus agréable pour les yeux.

Ici, j’ai pris le dessin original et j’ai légèrement désaturé chaque couleur. L’image a toujours un côté sympa et colorée, mais elle est moins agressive que l’originale.

Vous remarquerez peut-être également que le nouveau graphisme part moins dans tous les sens. C’est simplement parce qu’il a moins de couleurs. L’étiquette du menu est maintenant blanche, au lieu de son vert vif d’origine. Le blanc simplifie la palette de couleurs et réduit le désordre visuel de l’image originale.

Remarque sur l’accessibilité : bien que nous ayons résolu les problèmes de fatigue oculaire, le contraste des couleurs entre certains cercles et l’arrière-plan n’est pas toujours suffisant pour répondre aux normes d’accessibilité. Pour résoudre ce problème, il faudrait continuer à ajuster les couleurs à l’aide d’un contrôleur de contraste de couleur comme celui-ci.

Solution n° 2 : utiliser l’ordre des couleurs de l’arc-en-ciel

Les couleurs d’origine étaient intenses, mais elles semblaient aussi choisies un peu au hasard. Vous pouvez rendre votre mise en page plus harmonieuse en utilisant des combinaisons de couleurs d’un même thème.

À première vue, cette version est aussi lumineuse et agréable que la solution précédente. Mais si vous regardez de plus près, vous remarquerez que certaines couleurs ont changé. Elles sont également disposés comme les couleurs de l’arc-en-ciel, rouge, orange, jaune, vert et bleu. Cette disposition est plus habituelle pour les yeux.

Solution n° 3 : utiliser une seule couleur

Si vous ne souhaitez prendre aucun risque, choisissez une palette avec une seule couleur.

Dans cette version, tous les cercles sont des versions plus claires ou plus foncées de la même teinte, de sorte que l’on comprend instantanément qu’ils vont ensemble. De plus, la lente progression du clair au foncé renforce inconsciemment l’idée de parcourir un module en plusieurs parties.

Remarque sur l’accessibilité : il peut être difficile de trouver une couleur de fond qui contraste suffisamment avec les teintes les plus claires et les teintes les plus sombres dans une palette de couleurs en monochrome. Cette version vous propose une solution à ce problème : utiliser le même contour à contraste élevé autour de chaque couleur.

Solution n° 4 : chercher une palette en ligne 

Si vous n’êtes pas à l’aise pour associer les couleurs ou si vous êtes à court d’idées, Internet est là pour vous aider !

Essayez de chercher « palette de couleurs » sur Google ou Pinterest pour trouver déjà quelques idées. Ou consultez les palettes tendance sur Coolors, ce que j’ai fait pour la version ci-dessus.

Dans cette version, la palette de couleurs des cercles ne ressortait pas bien sur le fond bleu foncé d’origine. Je l’ai donc changé contre un blanc cassé plus discret. En cas de doute, il est difficile de se tromper avec un fond blanc.

Solution n° 5 : utiliser un générateur de palettes de couleurs 

Coloors a une autre fonctionnalité précieuse pour créer des palettes élégantes : un générateur de palette de couleurs. Je l’ai utilisé pour choisir les couleurs de cette version.

Une recherche en ligne vous donnera de nombreux générateurs de palettes de couleurs. Ces sites créent des combinaisons de couleurs agréables en utilisant des algorithmes ou en utilisant les couleurs dominantes d’une image de votre choix. Bien que les résultats puissent nécessiter quelques ajustements, ils vous permettront de démarrer avec une bonne base. De plus, c’est assez chouette de voir les super palettes de couleurs que ces ces sites peuvent créer !

Solution n° 6 : simplifier et réduire la taille 

Les solutions précédentes sont pratiques lorsque vous êtes libres des choix de couleurs. Mais comment faire si vous n’avez pas le choix de la palette de couleurs en raison des exigences de la marque ou des préférences des parties prenantes ?

La première chose à faire dans ces situations est de réduire le nombre de couleurs que vous mettez sur une seule diapositive. Dans cette refonte, j’ai utilisé le bleu indigo avec parcimonie et j’ai complètement supprimé le vert vif. Cela a réduit le nombre d’éléments en compétition pour attirer l’attention de l’apprenant.

J’ai également simplifié le fond. Plutôt que de m’en tenir au bleu indigo hautement saturé du design original, je l’ai remplacé par un blanc cassé moins intense. Cela a donné aux couleurs restantes plus d’espace pour se démarquer – et le blanc est rarement interdit dans les chartes graphiques.

Ensuite, j’ai pris les cercles de couleurs vives et je les ai réduits, pour diminuer l’intensité du visuel. La réduction des cercles crée également plus d’espace blanc entre chaque couleur vives – une autre bonne astuce pour éviter que les teintes pures ne soient trop visuellement présentes.

Est-ce que le résultat final est quelque chose que je mettrais en place si on me donnait carte blanche visuellement ? Pas vraiment. Je trouve toujours les couleurs un peu désagréables à regarder. Mais le résultat est une bonne solution de compromis lorsque vous ne pouvez pas du tout modifier la palette de couleurs.

Le mot de la fin

Certaines associations de couleurs sont vraiment difficiles à regarder. Mais heureusement, même les pires d’entre elles peuvent être simples à améliorer. Vous pouvez obtenir des idées de palettes de couleurs plus attrayantes en pensant à la saturation, à l’harmonie et au nombre de couleurs que vous utilisez. Et si vous avez besoin d’un peu d’aide, des palettes créées par d’autres et des générateurs de palettes de couleurs peuvent vous donner toutes les idées dont vous avez besoin.

Vous cherchez plus de conseils sur l’utilisation de la couleur dans vos projets ? Lisez ces articles !

• 5 palettes de couleurs classiques pour le e-learning
• Template pour concevoir sa palette de couleurs
• Fiche pratique : Couleurs de thème Storyline

Et n’oubliez pas de nous suivre sur Twitter et de vous abonner au blog pour plus de conseils utiles sur tout ce qui concerne le e-learning. Si vous avez des questions ou des idées pour choisir les palettes de couleurs, n’hésitez pas à en parler dans les commentaires.