La signification des couleurs et des formes

1. Objectifs

   • Connaître ce qu'évoquent les couleurs et les formes, et les limites de ces associations.
   • Construire une palette harmonieuse à partir du cercle chromatique.
   • Donner un rôle à chaque couleur : marque, texte, fond, états.
   • Vérifier les contrastes selon les règles d'accessibilité (WCAG).
   • Utiliser les formes pour donner une personnalité et un sens aux composants.

1. Pourquoi les couleurs comptent

   • La couleur est la première chose que l'œil perçoit, avant les formes et les mots. Elle crée une ambiance et permet de reconnaître une marque d'un coup d'œil.
   • Dans une interface, elle a aussi une fonction: signaler une action possible, un état (succès, erreur), une information importante.
   • Une bonne palette sert les deux : elle exprime les valeurs du service et elle guide l'usager.

1. Ce qu'évoquent les couleurs

   • Rouge: énergie, urgence, passion, erreur. Il stimule l'appétit, d'où son usage en restauration rapide.
   • Orange: chaleur, convivialité, enthousiasme. Souvent utilisé pour les appels à l'action.
   • Jaune: optimisme, attention. Difficile à utiliser pour du texte : il manque de contraste sur fond blanc.
   • Vert: nature, santé, fraîcheur, réussite (« c'est validé »).
   • Bleu: confiance, calme, sérieux. Très présent dans les banques et les administrations.
   • Violet: créativité, originalité, parfois luxe.
   • Noir, gris, blanc: sobriété, élégance, clarté. Ce sont les couleurs du texte et des fonds.

1. Construire une palette harmonieuse

   • Le cercle chromatique range les teintes en cercle. Il aide à trouver des couleurs qui vont ensemble.
   • Monochrome: une seule teinte déclinée en clartés différentes. Sobre et toujours harmonieux.
   • Analogues: des teintes voisines sur le cercle (vert, vert-bleu, bleu). Doux et naturel.
   • Complémentaires: deux teintes opposées (bleu et orange). Contraste fort : l'une domine, l'autre sert d'accent.
   • Triadique: trois teintes à 120°. Vif, à équilibrer avec beaucoup de neutres.
   • Des outils gratuits comme Adobe Color ou Coolors proposent ces accords à partir d'une couleur de départ.

1. Donner un rôle à chaque couleur

   • Primaire: la couleur de la marque. Elle sert aux boutons principaux, aux liens, aux éléments actifs.
   • Secondaire (ou accent) : pour mettre en avant un élément (badge « Nouveau », promotion). Utilisée avec parcimonie.
   • Neutres: le texte (gris très foncé plutôt que noir pur), le texte secondaire, les fonds, les bordures. Ce sont les couleurs les plus présentes.
   • Sémantiques: succès (vert), erreur (rouge), alerte (orange), information (bleu). Elles ont le même sens dans toutes les applications : on ne les détourne pas.
   • La règle 60-30-10: environ 60 % de couleur dominante (souvent les neutres), 30 % de couleur secondaire (la marque), 10 % d'accent. C'est un repère d'équilibre, pas une loi.

1. Vérifier les contrastes

   • Le rapport de contraste compare la luminosité du texte et celle du fond. Il va de 1 : 1 (aucune différence) à 21 : 1 (noir sur blanc).
   • Les règles d'accessibilité WCAG (niveau AA, celui que l'on vise) demandent au moins 4,5 : 1 pour le texte normal et 3 : 1 pour le grand texte (24 px, ou 19 px en gras), les icônes et les bordures de champs.
   • Un contraste suffisant aide tout le monde : les personnes malvoyantes, mais aussi l'étudiant qui lit son téléphone dehors, au soleil.
   • On le mesure avec un outil : l'extension Contrast ou Stark dans Figma, le vérificateur de WebAIM en ligne, ou l'onglet « Palette » du classeur du TP 11.
   • Ne portez jamais une information par la couleur seule: environ 8 % des hommes ont une forme de daltonisme. Un champ en erreur reçoit aussi une icône et un message.

1. Ce qu'évoquent les formes

   • Cercle: unité, douceur, communauté. Pas d'angle, donc pas d'agressivité.
   • Carré, rectangle: stabilité, ordre, fiabilité. La forme des cartes et des écrans.
   • Triangle: direction, mouvement, alerte. Selon son orientation, il montre un chemin ou un danger.
   • Coins arrondis: convivial, accessible, moderne. Angles vifs: précis, sérieux, technique.
   • Dans une interface, la forme porte aussi un sens fonctionnel: un rectangle arrondi plein se lit comme un bouton, un petit cercle avec un chiffre comme une notification, un chevron comme « dérouler ».

1. Activités

1. Erreurs fréquentes

1. Bilan

   • Les couleurs et les formes évoquent des émotions, mais ces associations dépendent de la culture et du contexte.
   • Une palette se construit avec le cercle chromatique et se répartit selon la règle 60-30-10.
   • Chaque couleur a un rôle: marque, accent, neutres, états.
   • Le contraste se mesure : 4,5 : 1 pour le texte, 3 : 1 pour les icônes et les bordures.
   • Les formes ont un sens fonctionnel: une même forme, un même comportement.

Une couleur se choisit avec les yeux, mais se valide avec un chiffre : celui du contraste.