Catégories
CC1-cours Com-Créa

La symbolique des couleurs

Ce cours résume les points essentiels d’une dimension incontournable de la couleur : ce que les couleurs disent à ceux qui les perçoivent. Un designer graphique anticipe cette signification culturelle pour styliser ses produits de communication de manière à s’adapter aux utilisateurs des produits.

Les connotations culturelles des couleurs

➜ Exercices
Répondez au sondage lancé par le site pourpasunrond.fr

Regardez la vidéo ci-dessous. Elle pose les bases de ce qui est ensuite développé dans le cours.

Couleurs, histoire et cultures

Chaque période de l’histoire européenne a eu ses couleurs attitrées. Des ouvrages spécialisés permettent de repérer ces couleurs. Un site en présente une synthèse :

Notre culture occidentale contemporaine a non seulement ses couleurs préférées mais elle a développé une symbolique globale des couleurs, souvent prise en compte en design graphique.

Attention, la symbolique des couleurs change selon les régions du monde. Dans l’article ci-dessous, Epson France fait le point sur la question.

Les usages des couleurs

Dans les limites de la culture à laquelle s’adresse tel ou tel produit de communication, des outils et certaines études permettent d’affiner la connaissance des codes chromatiques en vigueur dans tel ou tel secteur.

Couleurs et secteurs d’activité

Interface de picular.co

➜ Exercice
Faites des recherches de couleurs dans picular.co en utilisant exactement les expressions suivantes :

  • yaourt
  • yaourt bio
  • yaourt 0%
  • voiture
  • voiture de sport
  • parfum
  • parfum de luxe
  • lait entier
  • lait demi-écrémé
  • lampe de chevet
  • lampe de bureau
  • chaussure femme
  • chaussure homme
  • magazine de voyages
  • magazine de mode
  • etc.

Impact émotionnel des couleurs

Les couleurs ont un impact sur nos ressentis affectifs. Certaines couleurs apaisent quand d’autres au contraire exitent ou dynamisent.

Couleurs et marketing

Les couleurs font vendre. De nombreuses décisions d’achat repose sur la couleur du produit proposé, la couleur de son emballage ou celle de son étiquette.

Couleurs et identités visuelles

Dans une identité visuelle les couleurs choisies ont autant sinon plus plus d’impact que la typographie ou le visuel utilisé. On ne choisit pas les couleurs d’un logo et d’une charte graphique à la légère (et surtout pas en fonction de nos goûts) !

Catégories
CC1-cours Com-Créa

La construction de nuanciers fonctionnels

Dans la pratique, vous serez confrontés à la nécessité d’utiliser des nuanciers de couleurs privilégiant la bonne lisibilité des textes. Vous devrez veillez à ce que le ratio de contraste entre la couleur de ces textes et la couleur du fond soit suffisant. Ce cours vous donne les indications nécessaires pour construire des nuanciers garantissant la lisibilité des textes.

Les normes d’accessibilité

Les normes d’accessibilité mettent l’accent (entre autres exigences) sur la nécessité de distinguer la forme sur le fond, pour toutes les personnes, y compris celles qui ne peuvent pas distinguer toutes les couleurs.

Ces normes mettent donc l’accent sur le contraste de luminosité entre la forme et le fond sur lequel cette forme se détache. Le contraste de luminosité entre deux couleurs joue un rôle clé dans la lisibilité des textes affichés avec ces couleurs.

Ces normes s’avèrent contraignantes dans le design des sites Web. Elles sont cependant nécessaires pour nous amener à prendre en compte les différents publics auxquels sont destinés nos produits de communication !

La traduction française agréée des WCAG 2.1 indique : « Afin de répondre aux besoins de divers groupes et de différents contextes, trois niveaux de conformité ont été définis : A (le plus bas), AA et AAA (le plus élevé). »

L’Union européenne recommande le niveau double A (AA). C’est également le niveau qu’on attend pour les sites concernés par le RGAA (Règlement Général d’Amélioration de l’Accessibilité, équivalent européen du WCAG). Pour être conforme au RGAA, il est nécessaire de valider l’ensemble des critères A et AA

Les textes officiels

Résumé des consignes officielles au niveau européen

La norme AA – RGAA 4.1.2 impose, concernant le texte d’une page Web, le respect des consignes suivantes (j’ai simplifié la formulation du texte officiel, beaucoup plus détaillé) :

  • Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px (18pt) doit vérifier la condition suivante :  le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins ;
  • Dans chaque page web, le texte et le texte en image en gras d’une taille restituée inférieure à 18,5px (14pt) doit vérifier la condition suivante : le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins ;
  • Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée supérieure ou égale à 24px (18pt) doit vérifier la condition suivante : le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins ;

Définition d’un nuancier ou palette fonctionnelle

Nous nommerons palettes ou nuanciers fonctionnel(le)s ou accessibles les palettes ou nuanciers tenant compte des normes d’accessibilité. Nous parlerons aussi de palettes ou nuanciers dont les valeurs sont régulièrement étagées.

Voici un schéma mettant en rapport des niveaux de luminosité et des ratios de contraste normalisés :

➜ Exercices

  • Choisissez des couleurs dans hsluv.org en fixant leur luminosité sur les pourcentages proposés dans le schéma ci-dessus et vérifiez avec un outil de contrôle de ratio de contraste si les ratios affichés sur le blanc et le noir sont justes (à peu de choses près et dans la mesure où ils sont conformes aux normes visées).

➜ Il se peut, pour certaines teintes, que vous soyez amenés à légèrement éclaircir ou assombrir la couleur choisie pour atteindre la norme annoncée. Comme il est précisé sur le schéma, les valeurs de luminosité sont approchantes. Nous sommes ici confrontés à ce que nous pourrions nommer les niveaux clés de luminosité.

  • Choisissez une couleur moyenne (49% de lumnosité) et trouvez une couleur proche du blanc présentant, avec la couleur moyenne, un ratio de 4,5 (norme AA). Utilisez pour cela un outil de contrôle du ratio de contraste (liste ci-dessous).

➜ Vous disposerez alors d’une teinte de blanc coloré (blanc cassé), utilisable à la place du blanc pure dans les nuanciers de 3 couleurs réversibles respectant la norme AA.

Interface de Colorable
  • Construisez une palette de 5 couleurs dont le noir et le blanc, intégrant une couleur claire et une couleur foncée. Conservez la palette mise au point en utilisant l’outil “Export” proposé sur coolors.co.

Sur coolors.co, les palettes sont sauvegardables sous forme d’URL (dans Deskyo, par exemple). L’URL de la palette ci-dessus est la suivante : https://coolors.co/ffffff-f5cd70-d0404f-1c2f36-000000.

Sur l’image ci-dessous figurent les ratios de contraste mesurés avec Colorable.

Annotations effectuées avec Skitch

➜ Quelles sont les couleurs qui ne doivent jamais être utilisées l’une sur l’autre pour présenter du texte ? Pensez-vous qu’il soit possible d’utiliser un blanc cassé à la place du blanc #fff, sans modifier les autres couleurs ?

Outils de contrôle du ratio de contraste des couleurs

Voici une liste d’outils permettant de contrôler le ratio de contraste entre deux couleurs.

➜ Exercices

  • Construisez un nuancier fonctionnel de 3 couleurs réversibles, respectant la norme AA Large, à partir d’une sélection aléatoire de 3 couleurs sourdes (avec Muted Colors sur CodePen).
  • Construisez (avec Color Review et Colorable), à partir d’une photo de votre choix, un nuancier fonctionnel de 3 couleurs réversibles respectant la norme AA Large.

Outils de construction de palettes fonctionnelles

Il existe des outils mis au point pour (sur le papier…) faciliter le travail des designers graphiques en matière de création de palettes fonctionnelles. Ils ne sont pas d’une prise en main aisée. Leonardo Color a été un temps relativement fonctionnel, de mon point de vue il ne l’est plus du tout.

  • https://leonardocolor.io/theme
    Outil mis au point par Adobe et donc l’interface s’est terriblement compliqué au fil des années !
  • https://palettte.app
    — Outil à l’interface attrayant mais dont l’utilité pratique reste à démontrer pour les débutants.

Un schéma de présentation des contrastes normalisés

Pour ma part, recherchant prioritairement à construire des nuanciers fonctionnels aux couleurs réversibles, le schéma suivant me permet de construire ces nuancier en me basant uniquement sur la luminosité des couleurs (toujours mesurée dans hsluv.org).

➜ Exercice

  • Vérifiez la pertinence du schéma ci-dessus en créant, d’après les indications de pourcentage de luminosité indiqués, des nuanciers fonctionnels de 3 couleurs réversibles respectant au moins la norme AA Large (ratio de contraste supérieur à 3, entre la couleur de premier plan et la couleur d’arrière plan). Utilisez hsluv.org et l’outil de contrôle de ratio de votre choix. Sauvegardez vos nuanciers en utilisant coolors.co.

Palettes de couleurs moyennes

En disposant d’une couleur dont la luminosité se situe entre 40 et 60%, vous êtes certains que cette couleur présentent un contraste suffisant sur le blanc et le noir pour répondre à la norme AA Large (ratio de contraste supérieur à 3).

Pour répondre à la norme AA (ratio de contraste supérieur à 4,5), il convient d’être plus prudent. La luminosité de la couleur moyenne doit alors se situer autour de 50%. Cependant, si nous voulons vraiment viser la norme AA, à la fois sur le blanc et sur le noir (pour garantir la réversibilité des couleurs) cette luminosité varie selon les teintes. Il convient alors d’effectuer un contrôle de ration de contraste.

Voici des pages Web sur lesquelles vous pouvez trouver ces couleurs moyennes “idéales” (les ratios de contraste sur le blanc et le noir ont été vérifiés).

➜ Cette palette de 63 couleurs moyennes a été réalisée par mes soins. Vous constaterez une chose : bien que les ratios de contraste de chacune de ces couleurs sur le noir et le blanc soient très proches, les texte en blanc sur chaque couleur moyenne se lisent majoritairement mieux que les textes en noir sur ces couleurs. J’en ignore la raison, mais ce constat doit cependant être pris en compte pour améliorer le confort de lecture des sites Web que vous réaliserez.

Nuanciers fonctionnels prêts à l’emploi

À la fin de la page Web ci-dessus, plusieurs liens conduisent vers des chartes graphiques de grandes entreprises utilisant des palettes de couleurs fonctionnelles. Il est tout à fait possible de les utiliser pour des projets de communication en ligne. Les nuanciers de couleurs ne sont pas soumis aux droits liés à la propriété intellectuelle !

Si vous souhaitez les utiliser, prenez le temps d’examiner comment fonctionnent ces palettes de couleurs étagées.

Le fonctionnement de ces palettes normalisées repose souvent sur le principe de saut de couleurs. Le nuancier mis au point par Matthew Howel (section suivante) repose sur le même principe.

Les nuanciers fonctionnels de Matthew Howel

Matthew Howel a mis au point une série de palettes étagées monochromes de telle sorte que :

  • en intercalant 1 couleur, on obtient un ratio de contraste de 3 (norme AA Large) entre les 2 couleurs de part et d’autre de la couleur intercalée ;
  • en intercalant 2 couleurs, on obtient un ratio de contraste de 4,5 norme AA) entre les 2 couleurs de part et d’autre des 2 couleurs intercalées.
  • en intercalant 3 couleurs, on obtient un ratio de contraste de 7 (norme AAA) entre les 2 couleurs de part et d’autre des 3 couleurs intercalées.

24 palettes monochromes sont disponibles, plus la palette des gris. 25 teintes disponibles, en 6 valeurs chacune, font 150 jetons de couleurs (150 color tokens) à combiner. Il vous suffit de piocher parmi les 150 couleurs proposées pour construire vos nuanciers fonctionnels.

Vous remarquerez que Matthew Howel n’utilise dans ses palettes ni le noir ni le blanc. Avec les couleurs proposées, il n’est donc pas possible de créer un nuancier fonctionnel de plus de 2 couleurs réversibles respectant la norme AA.

Les nuanciers fonctionnels de Yves Goguely

Je vous propose maintenant une palette réalisée par mes soins. La page mérite un traitement stylistique plus sympathique, je vous l’accorde, mais en attendant mieux cette palette élargit le champ des nuanciers possible. Prenez en compte les indications mentionnées sur l’échelle des gris pour comprendre quels sont les ratios de contraste entre les couleurs de chaque rangée (il s’agit des ratios présentés sur le schéma montré en tout début de cours).

Outils nécessitant plus de travail de mise au point

Plusieurs outils proposent depuis de nombreuses années la création de palettes de couleurs. Certains d’entre eux autorisent la personnalisation des couleurs choisies. En sachant donc ce qu’il convient d’obtenir (tel nombre de couleur, réversibilité des couleurs ou non, telle norme d’accessibilité, telle symbolique de la couleur dominante), il est possible de partir d’un nuancier et d’en personnaliser chaque couleur pour rendre le nuancier fonctionnel. Cela dit, l’exercice peut s’avérer une belle prise de tête !

Outil de construction de nuanciers basé sur la théorie des couleurs

Adobe a fait évoluer un de ses outils phare de création de palettes de couleurs. Adapté à la création de palettes pour l’illustration, il s’avère moins pratique pour créer des nuanciers fonctionnels.

➜ Exercice

  • Essayez de construire un nuancier fonctionnel de 5 couleurs (dont le blanc et le noir), basé sur un accord analogue avec la roue chromatique d’Adobe Color.

Vous allez vite constater que même en utilisant le mode TSL (Teinte Saturation Luminosité) un résultat cohérent est laborieux à obtenir !

Outils de construction de nuanciers étagés allant d’une teinte à une autre

Quelques outils permettent de générer automatiquement un nombre déterminé de couleurs intermédiaires allant d’une couleur initiale à une autre. L’idée n’est pas mauvaise en soi mais la volonté de respecter une norme d’accessibilité nous amènera inévitablement à des ajustements.

➜ Exercice

En utilisant chacun des outils proposés ci-dessus, construisez un nuancier étagé de 3 couleurs réversibles, respectant la norme AA Large. Quel est l’outil le plus approprié pour construire un tel nuancier ?

Catégories
CC1-cours Non classé

L’orientation des objectifs de communication

Ce cours est un développement de la notion d’objectif de communication. Il est proposé ici en complément d’information sur un sujet crucial dans la menée d’un projet de com.

La boussole des objectifs de communication

En communication visuelle, prévoir et programmer les réactions du public confronté aux stimuli qui lui sont destinés relève de choix conscients de la part du concepteur du message. Des objectifs de communication clairement orientés aident à concevoir un dispositif de communication efficace. 8 orientations sont repérables, de telle sorte que se dessine le cadran d’une boussole de la communication.

Un projet de communication, quelque soit le dispositif choisi, vise à modifier d’une manière ou d’une autre la façon d’être au monde du public cible. Ayant perçu un signal visuel précis, l’attention du destinataire est sollicitée : un processus perceptif neuro-psychologique est enclenché. Le destinataire du message, placé dans un état émotionnel (affectif), intellectuel (cognitif) et conatif particulier, modifie son comportement, ses gestes, ses pensées. Ses actions (ou réactions) sont statistiquement probables. Elles sont attendues par l’émetteur du message et elles sont anticipées par le concepteur graphique.

On considère prioritairement 4 orientations des objectifs de communication (les orientations primaires). 4 orientations supplémentaires s’y ajoutent, positionnées entre les 4 premières (les orientations secondaires). Paradoxalement, ces orientations secondaires sont davantage formalisée dans le domaine de la littérature que dans celui de la communication visuelle.

4 orientations primaires

Les 4 orientations primaires des objectifs de communication s’articulent sur 4 facultés humaines d’être présent au monde. Les objectifs visés dans ces 4 orientations se différencient par le mode d’action voulue (positive ou négative, active ou passive, directe ou indirecte, etc). Chaque orientation correspond à une facette de l’humain en relation avec son environnement.

  • la perception physique
  • l’émotion individuelle
  • la réflexion intellectuelle
  • l’action concrète

Chaque orientation est formulable en terme d’objectif principal de communication : faire percevoir, faire ressentir, faire comprendre, faire agir. Dans la pratique, en communication professionnelle, les objectifs visés sont plus précis, plus nuancés.

Faire percevoir

  • Faire voir = montrer, mettre en évidence
  • Ne pas faire voir = ne pas montrer, ne pas mettre en évidence
  • Faire ne pas voir = cacher, dissimuler, masquer, mettre en retrait

Faire ne pas voir” est un objectif de communication couramment visé dans un projet de communication visuelle ! Tous les éléments d’une affiche ne sont pas nécessairement à mettre en avant. De nombreuses mentions obligatoires sont mises en page en visant cet objectif (sur de nombreux supports).

➜ Vous pouvez compléter la liste des objectifs perceptifs en collectant toutes les visées possibles pour chacun des 5 sens ou canaux de perception. Faire écouter ou entendre concerne par exemple le canal auditif.

Faire ressentir = émouvoir

  • Faire aimer = rendre séduisant, rendre attractif
  • Ne pas faire aimer = rendre peu attractif
  • Faire ne pas aimer = faire détester

Dans les enseignements habituels sur les objectifs de communication, les auteurs insistent sur l’objectif “faire aimer”. Ce n’est pourtant pas le seul objectif affectif envisageable !

➜ Choisissez d’autres verbes exprimant une émotion et complétez la liste des objectifs affectifs. Faire se sentir joyeux ou triste se dit rendre joyeux ou triste. Rendre heureux ou malheureux est un objectif affectif de communication.

Faire comprendre

  • Faire intégrer à un système de référence = expliquer
  • Ne pas faire intégrer à un système de référence = ne pas expliquer
  • Faire ne pas intégrer à un système de référence = rendre confus

Faire agir

  • Faire faire une action = prescrire, ordonner, suggérer (une activité)
  • Ne pas faire faire une action = ne pas prescrire, ne pas ordonner, ne pas suggérer
  • Faire ne pas faire une action = prescrire, ordonner, suggérer (une passivité)

➜ Comme pour les deux premiers objectifs, vous pouvez compléter les liste en élargissant le lexique se rattachant aux objectifs cognitifs puis conatifs.

4 orientations secondaires

Les 4 orientations secondaires des objectifs de communication s’articulent sur 4 autres moyens d’être présent au monde.

  • l’imagination
  • la mémorisation et la remémorisation
  • la conviction
  • l’information

Comme pour les orientations primaires, chaque orientation est formulable en terme d’objectif principal de communication : faire imaginer, faire mémoriser, faire croire, faire connaître. Les objectifs concrètement visés sont là aussi plus précis et plus nuancés… et plus nombreux !

Faire imaginer

  • Faire visualiser intérieurement une réalité fictive ou probable
  • Ne pas faire visualiser intérieurement une réalité fictive ou probable
  • Faire ne pas visualiser intérieurement une réalité fictive ou probable

Faire mémoriser et se remémorer

  • Faire retenir provisoirement une information
  • Faire retenir durablement une information
  • Faire ne pas retenir provisoirement une info = faire oublier provisoirement une info
  • Faire ne pas retenir durablement = faire oublier durablement une info

Faire croire

  • Faire admettre une opinion ou une croyance = argumenter, convaincre
  • Ne pas faire admettre une opinion ou une croyance = ne pas argumenter, ne pas convaincre
  • Faire ne pas admettre une opinion ou une croyance = contre-argumenter, convaincre du contraire

Faire connaître

  • Faire savoir = informer, diffuser une information, porter un fait à la connaissance du public
  • Ne pas faire savoir = ne pas informer, ne pas diffuser une information, ne pas porter un fait à la connaissance du public
  • Faire ne pas faire savoir = censurer, empêcher la diffusion d’une information, interdire qu’un fait soit porté à la connaissance du public
  • Faire savoir des non-faits = désinformer, diffuser une information altérée (tronquée, modifiée, fictive, trompeuse, tendancieuse, etc)
  • etc

Une remarque sur la captation de l’attention

La mémorisation peut être envisagée comme une composante de l’information (placée dans le schéma de synthèse sur le même axe que la mémorisation). Le faire-savoir inclue sans doute le “faire-mémoriser” et le “faire se remémorer”.

Dès lors, la captation de l’attention prendrait la place de la mémorisation, avec pour objectif associé de faire considérer l’information comme intéressante voire attractive.

Cet objectif est mentionné par le publiciste Eliot St. Emo Lewis au tout début du XXe siècle. Son analyse de l’action publicitaire se résume en 4 lettres : AIDA (A pour Attention, I pour Intérêt, D pour Désir et A pour Action). D’autres lettres ont été rajoutées depuis, dont un S pour Satisfaction (il s’agit toujours d’émotion !).

On devrait célébrer le centenaire de la formule AIDA, tellement cet acronyme a été utilisé, enseigné et mis en pratique pendant les 100 dernières années 😀

Documentation générale :

Catégories
CC1-cours Com-Créa

Fondamentaux de la communication

Ce cours présente les fondamentaux de la communication, tels que je les structure dans le cadre de mon enseignement. Il s’adresse prioritairement aux étudiants en communication visuelle, aux futurs designers graphiques, designers UX-UI ou web-designers.

Il s’agit d’un cours proposé en début de formation pour clarifier plusieurs notions. Ces notions sont ensuite abordées en détail dans le cadre d’autres disciplines (marketing, gestion de projet de communication, community management, SMO, etc.).

Les différents types de communication

La communication répondant à un besoin universel, elle est implantée dans tous les secteurs de l’activité humaine. Inventorier tous les domaines où s’exerce une communication professionnelle est une tâche difficile à finaliser. J’ai cependant essayé de lister quelques domaines clés et de les présenter sous une forme hiérarchisée avec Markmap.

Communication sectorielle

Un des critères de différenciation des différents types de communication est le secteur où s’exerce cette communication. Je vous propose une liste de plusieurs types de communication classés par secteur d’application.

J’ai choisi le terme générique de “communication sectorielle” pour désigner l’ensemble des communications mises en place dans tel ou tel secteur. Le terme “communication sectorielle” est toutefois communément utilisé pour désigner les sous-ensembles d’un type de communication spécifique à un plus vaste domaine.

  • communication internationale ;
  • communication nationale ;
  • communication politique ;
  • communication économique ;
  • communication culturelle ;
  • communication religieuse ;
  • communication environnementale ;
  • communication scientifique institutionnelle ;
  • communication académique ;
  • communication d’entreprise ;
  • etc.

➜ Cette liste est développée dans une carte interactive dont vous pouvez vous procurer le code source en Markdown pour éventuellement la compléter. Utilisez Stackedit pour la personnalisation et Markmap pour la visualisation sous forme de carte heuristique.

Quels sont les domaines dans lesquels vous souhaiteriez exercer votre métier de communiquant, après avoir validé vos titres professionnels ?

Types de communication selon d’autres critères

Le secteur d’activité n’est pas le seul critère de classement des différents types de communication. Il est possible de lister d’autres types de communication en choisissant le critère de la stratégie adoptée ou celui de la cible visée, etc. J’ai également tenté un classement hiérarchisé avec Markmap (cela peut être amélioré).

Les critères choisis sont les suivants :

  • En fonction du contexte de communication ;
  • En fonction de l’identité des acteurs impliqués ;
  • En fonction du nombre des acteurs concernés ;
  • En fonction de la cible visée par une organisation commerciale ;
  • En fonction des stratégies de communication adoptées ;
  • En fonction de la thématique des contenus communiqués ;
  • En fonction du mode de diffusion des messages ;
  • En fonction des canaux sensoriels sollicités ;
  • En fonction des canaux médiatiques de publication.

➜ Vous pouvez visualiser la carte interactive des types de la communication en cliquant sur l’image ci-dessous. J’ai mis à votre disposition le code source en Markdown.

Principaux composants d’un projet de communication

Pour fonctionner correctement, tous les types de communications inventoriés plus haut ont besoin de définir un plan de communication. Ce plan de communication prend en compte les éléments suivants :

  • le contexte de communication (le “marché”) ;
  • la stratégie de communication ;
  • les objectifs de communication ;
  • le public cible ;
  • le budget (moyens financiers) ;
  • les moyens techniques et humains à mettre en œuvre ;
  • les dispositifs de communication (ou médias) à utiliser ;
  • les messages à transmettre.

Pour illustrer ce point, je vous propose de consulter les pages Web suivantes (en lien avec le secteur culturel) :
• Qu’est-ce que la communication culturelle ;
• Projets culturels : pourquoi et comment mettre en place une véritable stratégie de communication ;
• 10 étapes pour une communication culturelle efficace.

Canaux sensoriels et communication

La communication s’effectue par des canaux sensoriels. Nous prendrons ici en compte les canaux visuel, auditif et tactile. En effet, ces canaux sont principalement utilisés dans le contexte professionnel qui nous concerne (voir plus haut).

Les canaux gustatifs et olfactifs sont laissés de côté… Toutefois, l’odeur d’un imprimé fraîchement sorti de presse est un élément pouvant être pris en compte dans un projet de communication.

En m’appuyant sur les canaux sensoriels, je distingue :

  • la communication visuelle ;
  • la communication auditive ;
  • la communication tactile.

Ces types de communication s’associent pour former :

  • la communication audio-visuelle ;
  • la communication tactilo-visuelle ;
  • la communication audio-tactile.

L’angle sensoriel peut focaliser notre attention sur la dimension perceptive de la communication. Celle-ci se définit alors par les modalités de perception des messages transmis visuellement, auditivement ou tactilement.

Sous l’angle de l’émission du message, d’autres termes peuvent être employés :

  • communication écrite, graphique, gestuelle, non verbale, kinesthésique et dactylologique ;
  • communication orale, verbale et paraverbale ;
  • communication par le toucher.

Voici une représentation sous forme de carte heuristique des liens entre les différents type de communication sensorielle :

Carte mentale de la communication sensorielle

Je vous propose de consulter cette carte sous forme interactive ou de copier son code Markdown pour la personnaliser avec Markmap

Produits, dispositifs et projets de communication

La communication visuelle, auditive ou tactile se concrétise, du côté des designers, par la réalisation de produits de communication conçus pour une perception du message transmis par les canaux sensoriels mentionnés. Ces produits (nommés aussi supports de communication) sont publiés afin que les messages transmis produisent sur un public ciblé, dans un contexte de communication précis, un effet attendu (objectif de la communication). Les produits de communication sont réalisés avec l’aide éventuelle d’outils numériques ou non-numériques.

La prise en compte des canaux sensoriels de communication, des messages à transmettre, des objectifs de communication visés, du contexte de la communication, des techniques utilisées et du public ciblé définit un dispositif de communication.

Les dispositifs de communication sont souvent désigné comme médias voire comme canaux de communication, notamment dans le secteur du marketing. Il y est question de communication média et hors média.

Communication digitale ou numérique

Il est souvent question aujourd’hui de communication digitale ou numérique. La réalisation des produits de communication passe le plus souvent par une phase de numérisation des informations à transmettre. La consultation-consommation des produits se fait par le biais d’appareils fonctionnant grâce aux technologies informatiques.

Le terme “digital” et “numérique” s’applique donc potentiellement à tout produit ou dispositif de communication faisant appel aux technologies informatiques. Dans les faits, la communication digitale ou numérique désigne la communication Web ou hébergée (communication Internet), dans toute sa diversité.

L’usage d’outils numériques n’est ni une fatalité ni une obligation, c’est un choix stratégique pris dans le cadre d’un projet de communication centré sur les besoins et les habitudes des acteurs du projet, en particuliers des utilisateurs finaux des produits de communication.

Catégories de produits ou supports de communication

Dans le cadre des pratiques professionnelles visées, je différencie quatre catégories de produits de communication :

  • les produits de communication imprimés (sur toutes sortes de supports imprimables) ;
  • les produits de communications projetés (sur des écrans opaques ou lumineux) ;
  • les produits de communications hébergés (sur des serveurs en ligne et consultables sur des appareils dédiés) ;
  • les produits de communications exposés (sur divers supports d’accrochage ou de fixation).

Ces catégories ne sont pas exclusives et des produit de communication plurimédia sont fréquemment réalisés puis publiés par le biais de plusieurs dispositifs de communication ou médias (imprimés et hébergés, hébergés et projetés, etc.).

Composants des produits ou supports de communication

Chaque produit de communication, quel que soit le média par lequel il est publié, peut s’analyser en examinant deux composants fondamentaux :

  • les contenants (livres, brochures, diaporamas, sites Web, cadres sur cimaises, pages, diapositives, fenêtres de navigateur, posters, …) ;
  • les contenus (textes, images, sons, contenus mixtes, …).

Ces contenants et contenus s’analysent à leur tour en prêtant une attention particulière à deux aspects importants de leur présentation :

  • la structure (structure des contenants et structure des contenus) ;
  • le style (style des contenants et style des contenus).
Catégories
CC1-cours Com-Créa

Construire un nuancier accessible

Ce cours concerne la création d’un nuancier dont les couleurs sont étagées de telle sorte qu’elles respectent la norme d’accessibilité la moins contraignante (AA Large). Des ressources sont mises à disposition pour créer des nuanciers respectant la norme AA.

La construction d’un nuancier étagé normalisé permet de disposer de couleurs garantissant la visibilité optimale des textes, quelque soient les couleurs utilisées l’une sur l’autre.

Construire des nuanciers répondant à la norme AA Large

Dans un premier temps, nous souhaitons utiliser, pour la stylisation des textes d’un document, des couleurs contrastées répondant au moins à la norme d’accessibilité AA Large. Il s’agit de la norme d’accessibilité la moins contraignante. Elle correspond à un ratio de contraste supérieure à 3 (WCAG 2.0).

Il est donc nécessaire de s’assurer que le ratio de contraste entre deux couleurs du nuancier soit supérieur ou égal à 3. Cette contrainte peut se formuler ainsi : les couleurs du nuancier doivent avoir une différence de luminosité, en mode HSLuv, au moins égal à 40%.

Cet écart de luminosité de 40% vous est indiqué pour vous dispenser des contrôles de ratio de contraste. Une marge de sécurité vous est ainsi accordée et la lisibilité n’en est que meilleure ;-).

Nuanciers intégrant le blanc OU le noir

Plusieurs type de nuanciers peuvent être construits à partir des contraintes fixées préalablement. Les nuanciers seront caractérisés par la luminosité des couleurs qui les composent.

  • (100 à 80%) + 40% + 0% = couleur claire + couleur moyenne-foncée + noir
  • 100% + (60 à 40%) + 0% = blanc + couleur moyenne + noir
  • 100% + 60% + (20 à 0%) = blanc + couleur moyenne-claire + couleur foncée

Parmi ces trois nuanciers, seul celui du milieu intrègre à la fois le blanc ET le noir.

➜ Vous pouvez utiliser une palette de couleurs moyennes normalisées pour composer des nuanciers de 3 couleurs régulièrement étagées, intégrant le noir ET le blanc. Ils répondent à une norme d’accessibilité plus contraignante (norme AA – ratio de contraste supérieur ou égal à 4,5).

Liste de couleurs moyennes normalisées

Les nuancier créés avec la palette ci-dessus entrent dans la catégorie :

  • 00% + (60 à 40%) + 0% = blanc + couleur moyenne + noir
    (avec valeur médiante proche de 50%)

➜ Un moyen simple de créer ce type de nuancier consiste à utiliser le site hsluv.org pour sélectionner une couleur de valeur médiante (l’outil s’ouvre par défaut sur la palette des couleurs dont la luminosité est de 50%).

Nuancier n’intégrant ni le blanc ni le noir

Un seul type de nuancier peut être construit en tenant compte des contraintes fixée, sans intégrer ni le blanc ni le noir.

  • (95 à 90%) + 50% + (10 à 5%) = couleur très claire + couleur moyenne + couleur très foncée

On peut essayer d’intégrer des couleurs très claires allant jusqu’à 85% de luminosité et des couleurs très foncées allant jusqu’à 15% de luminosité. Il faut s’assurer alors que le ratio de contraste avec la couleur médiante est supérieur à 3 (normee AA Large). L’écart de luminosité est alors de 35% et avec certaine teintes, cela n’est pas suffisant pour entrer dans la norme.

Exercices pratiques

  • La sélection des couleurs s’effectue sur le site hsluv.org.
  • Le contrôle du ratio de contraste s’effectue sur le site colorable.jxnblk.com.
  • La présentation des nuanciers se fait sur une page print ou web, en mode RVB. Plusieurs modèles sont utilisables sur Canva dont celui-ci. (faire une recherche de modèles Canva avec l’expression clé ”color palette”).
Suggestion de présentation

Premier exercice

➜ Construire un nuancier de 3 couleurs étagées répondant à la norme AA Large et intégrant le noir et le blanc, de telle sorte que ce nuancier puisse être utilisé dans le secteur des cosmétiques haut de gamme. Proposer une variante répondant à la norme AA.

Deuxième exercice

➜ Construire un nuancier de 3 couleurs répondant à la norme AA Large et intégrant ni le noir ni le blanc, de telle sorte que ce nuancier puisse être utilisé dans le secteur des jouets pour enfants. Comment faire pour proposer une variante répondant à la norme AA ?

Remarques

Utiliser des couleurs supplémentaires

Les nuanciers envisagées plus haut ne peuvent pas intégrer plus de 3 couleurs étagées. L’intégration de couleurs supplémentaires nécessite soit de les choisir en tant que couleur de substitution (de même valeur que l’une des 3 couleurs initiales) soit de formuler des interdits (ou des obligations). Les couleurs ne présentant pas un ratio de contraste suffisant ne peuvent être utilisées l’une sur l’autre. Un tableau récapitulatif peut alors être édité en utilisant un outil comme Contrast Grid.

Utiliser des palettes étagées prédéfinies

Pour gagner un peu de temps, il est envisageable de construire des nuanciers accessibles en utilisant des palettes normalisées disponibles en ligne. J’en propose quelques-unes à cette adresse : https://graphizm.fr/couleurs/palettes-accessibles/. Il est facile de créer à l’aide de ces palettes des nuanciers entrant dans les catégories :

  • (100 à 80%) + 40% + 0% = couleur claire + couleur moyenne-foncée + noir
  • 100% + (50%) + 0% = blanc + couleur moyenne + noir
  • 100% + 60% + (20 à 0%) = blanc + couleur moyenne-claire + couleur foncée

Le pourcentage de luminosité des couleurs proposées, mesuré en mode HSLuv, est proche des valeurs indiquées ci-dessus.

Palette interactive de couleurs normalisées

Des chartes chromatiques institutionnelles

Plusieurs institutions ou entreprises ont mis au point des palettes normalisées. Parties intégrantes de leur charte graphique, ces palettes sont publiées en ligne. Voici les palettes de la société IBM et celle du gouvernement des États-Unis.

Charte chromatique d’IBM (notation CMJN)

Utiliser des outils dédiés

Il existe également des outils en ligne pour créer des nuanciers accessibles. Leur prise en main nécessite toutefois une motivation certaine ;-). En voici quelques uns :

Catégories
CC1-cours CC1-exos Com-Créa

Utiliser les couleurs en design graphique

Ce cours est une liste de références en ligne sur la couleur, complétée par des exercices simples et quelques commentaires. Vous y trouverez des liens vers des outils incontournables, en particulier pour le choix des couleurs en webdesign.

La couleur au quotidien

Un designer graphique est sans cesse confronté à la couleur. Son impact sur l’utilisation des produits qu’il réalise est ÉNORME !

Dans cette vidéo, Pierre Appell, enseignant, peintre et musicien, présente sans parole le rôle de la couleur et son importance dans le monde du design graphique et du marketing.

Le lexique de la couleur

➜ Activité en préambule
Listez les termes que vous utilisez pour décrire la couleur et ses variations. Ajoutez à ces termes ceux que vous allez découvrir en consultant les sites mentionnés ci-dessous.

Attention : dans le dernier article mentionné ci-dessus, les définitions de la saturation et de la luminosité ne font pas consensus !

Il est nécessaire de clarifier le sens des termes que nous utilisons. Qu’est ce qu’une couleur assourdie, une couleur ternie, une couleur amortie, une couleur rompue, une couleur rabattue, une teinte désaturée, une couleur dominante, une couleur tonique, un camaïeu de couleurs, etc. ?

Teinte, saturation et luminosité

La couleur se définit le plus simplement par 3 paramètres faciles à différencier et à percevoir :

  • la teinte ou tonalité (bleu turquoise, rouge orangé, jaune citron, vert bouteille, etc.)
  • la valeur ou luminosité (couleur très sombre, couleur foncée, couleur claire, couleur pastel, blanc coloré, etc)
  • la saturation ou intensité (couleur vive, couleur pure, couleur ternie ou amortie, couleur assourdie, gris coloré, etc.)

Dans cette vidéo Pierre Appell présente les variations de teinte, de valeur et de saturation dans la peinture digitale.

Dans notre pratique du design graphique nous élargirons le concept de palette tel qu’il l’envisage ici, nous rapprochant davantage de l’ensemble des couleurs présentes sur la palette d’un peintre, au sens propre du terme “palette” (le support sur lequel le peintre dispose toutes les couleurs qu’il utilise pour peindre un sujet).

Un schéma de synthèse sur les variations de la couleur

Un concept voisin de la saturation : le chroma ou la chromaticité

➜ Exercice
Sur l’illustration ci-dessus, extraite du sélecteur d’andrewwerth.com , dans quelle direction s’échelonne la luminosité ?

L’échelle de variation de la chromaticité varie entre une couleur donnée (plus ou moins lumineuse et saturée) et son équivalent sur une échelle de gris. Autrement dit, toutes les couleurs présentes sur le même niveau (échelon horizontal) d’une échelle de chromaticité ont toutes la même valeur (le même degré de luminosité).

Le système de Munsell (système HVC, Hue – Value – Chroma)

Les planches visibles dans le sélecteur de couleurs d’andrewwerth.com  sont construites sur la base du système de Munsell.

➜ Vous rencontrerez souvent le schéma ci-dessus sous une forme dans laquelle l’auteur assimile chromaticité et saturation (exemple ci-dessous). Cette assimilation importe peu pour notre compréhension de l’articulation entre teinte, valeur et luminosité.

L’image ci-dessus est issue d’un article publié unesciencesouslarobe.com

Les schémas précédent illustrent très bien le dispositif à partir duquel se construit un arbre de Munsell. Cet arbre nous permet de visualiser concrètement les faits suivants :

  • Toutes les couleurs pures n’ont pas la même valeur ou luminosité.
  • Plusieurs couleurs, de même teinte ou non, peuvent avoir la même valeur.

L’image ci-dessus est issue d’un article du site programmingdesignsystem.com

La perception de la couleur et les normes d’accessibilité

Discrimination chromatique

➜ Exercice
Faites avant tout le test de discrimination chromatique proposé par le site de X-Rite. Si vous constatez une difficulté à distinguer certaines nuances, refaites le test une seconde fois. Si les difficultés persistent n’hésitez pas à consulter un spécialiste pour identifier plus précisément votre trouble de la vision.

Il est indispensable de situer votre perception des couleurs par rapport à la majorité des utilisateurs des produits colorés que vous allez concevoir en tant que designer graphique. Plusieurs graphistes et illustrateurs sont daltoniens (exemple de Loïc qui en tire même quelques avantages !).

➜ Plus de détails en ligne

Simulation des troubles de la vision des couleurs

Voici des sites sur lesquels une personne ayant une vision normale des couleurs peut se rendre compte de la manière dont les personnes ayant des difficultés à percevoir toutes les couleurs voient les choses.

Perception contextuelle des couleurs

Même si nous distinguons très bien les couleurs, plusieurs facteurs perturbent notre perception des couleurs dans l’environnement où se trouvent les objets colorés observés. En prendre conscience vous conduira à plus de rigueur dans les tests précédant la réalisation de vos projets de communication.

Contrastes de couleurs

Les couleurs voisines s’influencent mutuellement. C’est ce qui est expliqué dans la vidéo ci-dessous.

Métamérisme

Deux couleurs perçues identiques dans un contexte lumineux donné sont perçues différentes sous un autre éclairage. Cet effet se nomme le métamérisme

Illusions d’optique

Notre cerveau nous joue des tours. Plusieurs illusions d’optique nous permettent de nous en rendre compte.

N’hésitez pas à télécharger les images proposées par les sites ci-dessus pour mesurer les couleurs indiquées comme identiques et vues comme différentes !

La notation informatique de la couleur

Les modes colorimétriques et les synthèses de couleurs

Le mode RVB s’appuie sur la synthèse additive (on ajoute des rayonnements les uns aux autres pour obtenir du blanc, soit le maximum de lumière). Le mode CMJN s’appuie sur la synthèse soustractive (on retire de la lumière en opacifiant le support pour obtenir du noir, soit le minimum de lumière).

Image provenant du site mitaki-design.com

L’affichage numérique des couleurs à l’écran s’appuie sur une synthèse additive par juxtaposition de pixels dont les 3 composants (luminophores) émettent chacun un rayonnement plus ou moins intense de rouge, de vert et de bleu.

Image du site math.univ-lyon1.fr

L’impression en quadrichromie s’appuie sur un mélange de synthèse soustractive (pigments mixés sur le papier) et de synthèse additive (rayonnements réfléchis mélangés au niveau perceptif) obtenu par superposition et juxtaposition de points de trames.

Les différentes techniques de reproduction de la couleur ne couvrent pas toutes le même champ de couleurs. Les techniques d’impression utilisant des encres pigmentées couvrent les champs de couleurs les plus restreints.

Image du site icb-imprimerie.com

Les conversions d’un mode colorimétrique dans un autre doivent donc se faire avec beaucoup de prudence et de précautions. Il en est de même pour la validation à l’écran de documents destinés à l’impression (la restriction du champ des couleurs imprimable doit être simulée à l’écran par le choix du mode colorimétrique approprié).

RGB, RGBa et notation hexadécimale

La notation hexadécimale est une notation “simplifiée” de la notation RGB. La notation RGBa prend en compte la transparence (canal alpha).

Le système de notation RVB (ou RGB) et le système de notation hexadécimal répondent au même besoin : indiquer au système informatique une valeur entre 0 et 255 pour chaque canal de couleur primaire, en synthèse additive.

➜ Exercices
Pour ceux qui souhaitent s’entrainer à manipuler les couleurs en mode RVB (ou RGB), il existe un jeu intéressant sur CodePen. Il s’agit de deviner, parmi plusieurs couleurs, celle qui correspond aux paramètres affichés. Un autre jeu fonctionne sur le même principe avec les couleurs codées en hexadécimal : Guess a Color.

Les webdesigners utilisent principalement le système HEXADÉCIMAL (notation spécifique du codage RVB) pour paramétrer leurs feuilles de style. Les graphistes travaillant avec les imprimeurs privilégient la notation CMJN, associée au mode colorimétrique des documents qu’ils destinent à l’impression. Toutefois, plusieurs de leurs travaux étant publiés en ligne, ils utilisent aussi le codage RGB.

Se souvenir du code hexadécimal de quelques couleurs (gag !)

Le site http://bada55.io propose une liste de couleurs hexadécimales dont le nom dérive de leur codification informatique. Pour cela, l’auteur du site utilise le code suivant pour transposer les chiffres en lettres :

1 = I ou L • 2 = R • 3 = E • 4 = A • 5 = S • 6 = G • 7 = T • 8 =“ATE” • 9 = P
… à vrai dire, chacun peut adapter le code ou le détourner !

Attention : cette notation n’a rien d’officiel, c’est un gag collaboratif, mis en ligne il y a plusieurs années (et toujours en http non sécurisé…). Le plus amusant est que dans certains cas, le nom codé de la couleur et la couleur elle-même collent plutôt bien (#e2071c – erotic, #907A70 – potato, #9a5720 – gastro, #acac1a – acacia, #ba6e15 – bagels) ! Vous en repèrerez plusieurs autres 😉

Ce codage humoristique ne doit pas être confondu avec les noms anglais normalisés attribués à quelques couleurs Web et pouvant être utilisés dans le paramétrage CSS des couleurs d’un site !

Avouez tout de même que, désormais, vous pourrez facilement coder en hexadécimal le vert acacia : #acac1a !

La notation HSL et ses limites

Pour faciliter le codage des couleurs RVB, les développeurs ont mis au point un système faisant appel aux 3 paramètres de la couleur : la teinte (Hue), la saturation (Saturation) et la luminosité (Luminosity).

Normalisé et reconnu par tous les navigateurs, ce système de notation intuitif a été très apprécié en son temps.

Lorsque les normes d’accessibilité ont vu le jour et qu’il a fallu étager les couleurs en tenant compte de leur ratio de contraste, HSL a vite montré ses limites !

Image extraite de l’article “Utiliser HSL pour vos couleurs”, sur lacascade.io

➜ Exercice

  • En utilisant le calculateur HSL de w3schools.com, comparez la luminosité perçue d’un bleu et d’un jaune paramétrés en HSL avec la même valeur de luminosité et de saturation. Que constatez-vous ? Comment expliquez-vous le succès rencontré par cette notation informatique des couleurs ?

Bien qu’incohérent sur les plans perceptif et normatif, HSL a toujours des défenseurs convaincus :

Les sélecteurs-convertisseurs de couleurs

L’existence de plusieurs systèmes de notation informatique des couleurs pour les écrans nécessite l’usage de convertisseurs. En voici une liste (les formats de conversion disponibles sont indiqués sous chaque adresse).

➜ Exercices

  • Essayez de paramétrer un vert olive ou un bleu turquoise avec un sélecteur CMJN, RVB ou héxadécimal et un sélecteur HSL, HSV ou LCH (utilisez par exemple les sélecteurs proposés par w3schools. Avec quel outil et quel système de couleur parvenez-vous le plus facilement à paramétrer la couleur que vous avez en tête ?
  • Vérifiez la fiabilité des valeurs proposées par les convertisseurs en croisant les conversions. Utilisez par exemple le sélecteur Munsell-rgb-hex et vérifiez la luminosité des couleurs d’une même échelle de chromaticité dans le sélecteur hexa-hsluv.
  • Notez, pour une même couleur, les différentes positions des curseurs dans les systèmes de paramétrage présentés dans l’interface de l’outil Lch and Lab colour and gradient picker. Pour une même couleur, notez par exemple les différentes valeurs de Hue dans les différents modes. Examinez également les valeurs de luminosité et de saturation.

Le choix d’un système de notation des couleurs pour l’écran est souvent une question de pratique, individuelle ou sectorielle. Ce choix varie aussi en fonction des outils utilisés et des résultats attendus. Vous avez peut-être remarqué que les nuanciers générés par Lch and Lab colour and gradient picker ne sont pas constitués des mêmes couleurs suivant le mode de codage des couleurs !

Nous allons voir maintenant un système très performant pour lequel il faudra utiliser le codage hexadécimal des couleurs pour en exploiter les fonctionnalités.

La notation HSLuv et les notations dites perceptives

https://www.hsluv.org/ est l’adresse du site d’un nouveau système de notation de la couleur. Il n’est pas encore normalisé et il nécessite l’intégration d’un script JS pour que sa notation soit prise en compte par les navigateurs. Toutefois, ce système est beaucoup plus cohérent que le système HSL.

HSLuv is a human-friendly alternative to HSL”. En français : “HSLuv est une alternative humaine à HSL” ! Autrement dit, HSLuv prend en compte la perception humaine de la couleur, de telle sorte que 2 couleurs codées avec le même pourcentage de luminosité sont vraiment perçue comme ayant la même luminosité !

Comparatifs des systèmes HSLuv et HSL

Dans le tableau ci-dessous, toutes les couleurs et tous les gris sont codés avec une luminosité fixé à 60%.

➜ Plus de détails en ligne

Un système adapté à notre perception — comme HSLuv — nous donne des informations fiables sur la teinte, la saturation et la luminosité d’une couleur

Utilisation de la couleur en communication visuelle

Utilisation en webdesign

Outils utiles

Conseils pratiques

Palettes de couleurs pour le Web présentées en situation

Utilisation en design imprimé

Utilisation en design projeté

Propositions perfectibles

➜ Exercice

  • Vérifiez le contraste de luminosité entre les couleurs proposées par slidescarnival.com. Qu’en concluez-vous ?

Prendre en compte la répartition quantitative des couleurs ne suffit pas ! La présentation visuelle nécessite de prendre en compte la norme AAA Large (voire AAA) pour garantir une bonne visibilité des textes dans les conditions de projection sur écrans blancs opaques.

Utilisation en design plurimédia

Utilisation en peinture et illustration

Les sites généralistes de référence sur la couleur

Catégories
CC1-cours Com-Créa

Les contrastes typographiques

Cet article est un complément d’information sur l’utilisation du contraste en design graphique.

Pour créer des tensions visuelles dans une composition et pour favoriser la lecture du message à transmettre, le designer graphique utilise plusieurs types de contraste. Concernant la structuration, la stylisation et la composition des textes, plusieurs contrastes peuvent être mis en œuvre. Ils s’appliquent généralement à la différenciation entre :

  • les titres (lecture de repérage – textes courts) et les paragraphes (lecture suivie – textes longs).
  • les textes normaux et les textes mis en évidence (textes importants ou emphatiques) ou mis en retrait (mentions obligatoires, conditions de ventes, etc.)
Tableau extrait de “Aide au choix de la typographie”, de Gérard BLANCHARD, publié aux ateliers Perrousseaux.

Sommaire

Inventaire de contrastes typographiques

Les contrastes d’écriture

Les contrastes d’écriture ont été utilisés très tôt dans l’histoire de l’écriture, pour distinguer le début des chapitres (lettrine ou incipit) et le texte lui même. Cette distinction par un changement d’écriture s’est étendue à l’inscription des titres.

Les contrastes d’écriture sont une forme particulière des contrastes de forme et de structure.

  • romain (humanistique) / italique (chancelière)
  • romain (humanistique) / anglaise (cooperplate)
  • onciale (celtique) / romain (humanistique)
  • onciale (celtique) / italique (chancelière)
  • autres contrastes d’écriture

Les contrastes de famille typographique

Les contrastes de famille typographique sont une forme particulière des contrastes de forme ou de structure et une généralisation des contrastes d’écriture.

  • serif (sérieuses) / sans serif (neutres)
  • display (expressives) / sans serif (neutres)
  • handwriting (scriptes et cursives manuscrites – amicales) / sans serif (neutres)
  • handwriting (scriptes et cursives manuscrites – amicales) / serif (sérieuses)
  • lettres toscanes (tuscan letters) / lettres
  • autres contrastes de familles de polices

Les contrastes de forme ou de structure

Les contrastes de forme ou de structure précisent les différences identifiables entre plusieurs types d’écritures ou de lettrages.

Notez que le terme “lettre contrastée” désigne un type de lettres
présentant une différence de graisse entre ses parties (https://fonts.google.com/knowledge/glossary/contrast).
On parle de pleins et de déliés pour les lettres calligraphiques.

  • contrasté (différence entre pleins et déliés) / uniforme (traits de lettre de même épaisseur)
  • haut de casse (capitales ou majuscules) / bas de casse (minuscules)
  • avec empattements rectangulaires / sans empattement
  • avec empattements filiformes / sans empattement
  • avec empattements triangulaires / sans empattement
  • avec empattements fourchus / sans empattement
  • scripte (détaché) / cursive (attaché)
  • droit (vertical) / incliné (penché)
  • élargi (étendu) / étroitisé (condensé)
  • grand ou très grand / petit ou très petit
  • gras / maigre
  • rectiligne / curviligne
  • rectangulaire / circulaire
  • géométrique / organique
  • avec bordure ou contour / sans bordure ou contour
  • avec motif ou texture / sans motif ou texture
  • avec relief / sans relief
  • autres contrastes de forme ou de structure

Les contrastes de couleur

Les contrastes de couleur concernent la couleur des textes et la couleur du fond sur lequel le texte est présenté.

Notez que l’expression “couleur typographique” ou “gris typographique”
désigne l’intensité du gris produit par le mélange optique du texte
sur la couleur du papier.

  • couleur / noir et blanc
  • couleur foncée / couleur claire
  • couleur chaude / couleur froide
  • couleur vive (saturée) / couleur terne (désaturée)
  • autres contrastes de couleur

Les contrastes de composition typographique

Les contrastes de composition typographique concernent des moyens déployés pour différencier deux textes par leur positionnement dans la page. Il n’est plus question de formes ou de dessin des lettres, mais plutôt de mise en page des lettres, des mots, les lignes, des colonnes et des textes.

  • ligne de texte horizontale / ligne de texte verticale
  • ligne de texte horizontale / ligne de texte inclinée
  • lettres disposées horizontalement / lettres disposées verticalement
  • lettres normales ou espacées / lettres serrées
  • lettres normales ou serrées / lignes espacées
  • autres contrastes de composition typographique

Contrastes et combinaisons typographiques

Les combinaisons typographiques proposent d’associer 2 polices de caractères de manière harmonieuse. À vrai dire, l’esthétique n’est pas le seul critère d’association. la combinaison des polices de caractères doit aussi répondre à un besoin fonctionnel.

Pour associer 2 polices de caractères, il convient de définir quel est le type de lecture des textes utilisant l’une et l’autre des fontes sélectionnées. Une lecture suivie de texte courant de petite taille n’exige pas les mêmes caractères typographique qu’une lecture de repérage de titres courts présentés dans un corps important.

Si vous recherchez une police de caractères pour les textes de titrage et une police de caractères pour les textes de labeur, éliminez d’emblée les propositions associant deux polices expressives ou amicales décoratives. En effet aucune d’entre elles ne pourra être utilisée pour la lecture suivie.

En savoir plus

Voir des illustrations sur le sujet

Articles traitant du contraste et des combinaisons typographiques

Articles en anglais sur le même sujet

Catégories
CC1-cours Com-Créa

Typographie et lisibilité

Dans ce cours vous allez examiner avec attention les polices de caractères utilisées pour l’impression et l’affichage sur écran. Il s’agit de déterminer quelles sont celles qui se lisent le mieux et pour quelles raisons.

Lisibilité des polices sans serif (linéales)

Polices sans serif en général

Dans un premier temps, penchons-nous sur les polices de caractères sans empattement (sans serif, en anglais) nommées communément “polices bâtons”, utilisées dans tous les médias.

Les polices sans serif appartiennent au grand registre des polices neutres. Elles sont utilisées dans le secteur de la signalétique mais aussi pour accompagner les polices plus expressives ou plus amicales. Ces dernières sont réservées exclusivement au titrage et les polices sans serif servent alors pour les textes de paragraphe (texte courant).

Il est tout à fait possible, en jouant sur le nombre de styles (… ou fontes) disponibles, d’utiliser seulement une police de caractères sans serif pour styliser un document.

Police sans serif lisible disponible sur toutes les plateformes

Une dizaine de polices de caractères sont disponibles par défaut sur tous les systèmes d’exploitation. Parmi ces polices, Trebuchet MS se montre particulièrement lisible. Son défaut est d’être disponible dans seulement 4 fontes (normal, italique, gras, italique gras). Son avantage est d’être utilisable comme telle dans un site Web sans nécessiter de téléchargement. Éco-conception et lisibilité se conjuguent, même si le potentiel de design est limité 😉

Polices sans serif disponibles sur Google Fonts

La publication sur le Web s’effectue souvent en faisant appel à des polices distribuées gratuitement. Google Fonts proposant un service de téléchargement performant, les polices de caractères sans serif disponibles sur cette plateforme habillent de très nombreux sites Web.

Je vous propose d’examiner attentivement une sélection de polices sans serif disponibles sur Google Fonts.

➜ Notez quels sont les critères retenus pour effectuer cette sélection. Vérifiez par vous-même la pertinence du choix effectué.

Vérifiez également la pertinence des alternatives proposées pour certaines polices de caractères !

Le test qui tue… les sans serif !

Choisissez une police sans serif sur une plateforme de distribution de caractères (Google Fonts, Squirrel Fonts, Dafont, etc.).

Saisissez cette phrase dans le champ permettant de personnaliser le texte affiché en exemple : “Illisible !” s’écrie Ian en lisant l’Iliade

Le prénom Ian est fréquent dans les pays anglo-saxons. Il s’écrie aussi Iain. L’Iliade et l’Odyssée est un texte du poète grec Homère.

Si vous ne parvenez pas à lire correctement cette phrase test avec la police choisie, pourquoi envisageriez-vous d’utiliser cette police de caractères pour vos publications ? Achèteriez-vous un appareil qui ne fonctionnerait pas dans certaines circonstances ?

Essayez avec Roboto 😉

Vous voilà outillés pour vérifier les dires des auteurs des articles suivants (qui ne sont pas tous pertinents !) :

Lisibilité des polices avec serifs

Les polices avec empattements font partie du grand registre des polices sérieuses. Elles sont classées dans plusieurs sous-catégories parmi lesquelles les humanes, les garaldes, les réales, les didones, les mécanes, etc. (classification Vox ATYPI).

Moins neutres globalement, certaines polices avec serifs se montrent toutefois assez discrètes (Merriweather, Bitter, …) . Leur lisibilité à l’écran et sur le papier réside principalement dans la qualité de leur dessin. L’habitude que nous avons de lire des textes habillés par telle ou telle d’entre elles joue en faveur des plus fréquentes.

La police Georgia semble faire l’unanimité pour sa lisibilité. Elle n’a pas besoin d’être téléchargée dans une page Web, en effet, elle est disponible par défaut sur toutes les systèmes d’exploitation.

Voici un dernier site mentionnant des polices avec empattements particulièrement lisibles :

Catégories
CC1-cours Com-Créa

Ressources pour la comvi

Pour vous permettre d’accéder rapidement aux ressources mises en ligne concernant la communication visuelle, j’ai rassemblé les principaux liens dans un bouquet digital.

Vous pouvez créer vos propres bouquets de liens en utilisant l’outil Digibunch, proposé gratuitement par ladigitale.dev.

Catégories
CC1-cours Com-Créa

Créer des nuanciers fonctionnels avec Coolors

Un nuancier fonctionnel est un nuancier dont les couleurs ont des valeurs de gris étagées de manière à respecter les normes de contraste. Une lisibilité satisfaisante nécessite un contraste de valeur entre texte et fond dont le ratio est supérieur à 3 (norme AA).

Un ratio minimum de 3 entre les couleurs d’un nuancier fonctionnel permet de garantir une bonne lisibilité quelque soient les couleurs du nuancier utilisées en premier plan et en arrière plan. Un tel nuancier permet d’optimiser l’usage des couleurs sur les déclinaisons des produits de communication imprimés et hébergés. En effet chaque couleur est utilisable sur toute les autres.

De plus, quelque soit les problèmes de discrimination chromatique auxquels sont confrontés les lecteurs, un ratio minimum de 3 entre 2 couleurs voisines permet à tous de mieux distinguer forme et fond.

De plus, construire un nuancier en veillant à préserver un ratio minimum entre les couleurs génère le plus souvent des palettes chromatiques harmonieuses.

Remarques préliminaires

Le vocabulaire de la couleur est très spécifique. Les mêmes mots ne recouvrent pas toujours les mêmes concepts suivant qu’ils sont en lien avec la photographie, la peinture, le design graphique, la science de la colorimétrie, etc. De plus, les traductions de l’anglais (en particulier les traductions automatiques) ne donnent pas toujours des résultats très satisfaisants en français… bref, nous abordons là un sujet particulièrement délicat à formaliser.

Si vous souhaitez approfondir la question, je vous invite alors à consulter les sites suivants :

Dans ce cours, nous utiliserons alternativement les termes “nuancier” et “palette de couleurs” ou “palettes chromatiques”. Ces 3 termes désignent tous une suite de couleurs choisies pour s’associer dans un contexte précis.

L’application en ligne Coolors

L’application Coolors est d’un usage assez intuitif. Dotée de fonctionnalités de plus en plus nombreuses au fil des versions, elle permet notamment de construire (avec un minimum de méthode) des nuanciers à partir de diverses sources.

La création d’une nouvelle palette de 5 couleurs (nombre des couleurs affichées par défaut) s’effectue en cliquant sur la barre d’espace. Vous pouvez choisir le type d’accord coloré que vous souhaitez générer.

Quand des couleurs vous plaisent et que vous souhaitez les conserver, verrouillez-les en cliquant sur le cadenas affiché au survol de la couleur par le curseur (en bas de la liste des icônes). Appuyez de nouveau sur la barre d’espace pour générer d’autres couleurs. Modifiez la méthode de génération des couleurs si vous le jugez nécessaire (la méthode d’origine es “Auto”).

Concernant les différents types d’accords colorés, je vous renvoie vers les sites et vidéos traitants de la théorie des couleurs.

Évaluation du niveau de gris d’une couleur dans Coolors

La théorie des couleurs ne suffit pas

Dans la pratique la théorie des couleurs ne suffit pas pour créer des nuanciers fonctionnels. Passez votre écran en noir et blanc sur les palettes générées avec les outils qui se réclament de cette théorie, vous constaterez que plusieurs couleurs ont des degrés de luminosité (valeurs) très proches. Ces couleurs sont inutilisables l’une sur l’autre.

Capture d’écran d’un accord en carré sur colorsuplyyy.com
Observez les valeurs identiques des couleurs d’une même palette

L’étagement des valeurs est primordial

Pour évaluer le degré de luminosité (la valeur) des couleurs sur Coolors, j’ai opté pour la conversion en niveaux de gris par le biais du filtre “Achromatopsia”. Je lis alors le pourcentage de noir affiché en CMJN pour évaluer le niveau de gris correspondant.

Cette approche se révèle peu fiable concernant la valeur de gris proposée par Coolors. Elle permet cependant de créer des nuanciers fonctionnels de 3 couleurs, utilisables en design graphique.

Dans Coolors, le nom des couleurs est affiché par défaut en mode hexadécimal. Cela ne nous renseigne pas sur le degré de luminosité correspondant en pourcentage de noir (la valeur de la couleur ramenée en niveaux de gris).

En utilisant le filtre Achromatopsia, j’obtiens une conversion en niveaux de gris des couleurs de la palette.

J’applique le filtre pour accéder au nuancier en gris. Il est alors possible de convertir les noms hexadécimaux en pourcentages CMJN. Cela s’effectue en cliquant sur le nom de la couleur (affichée en hexadécimal) puis en choisissant “CMJN” dans la liste des affichages proposés. Dès lors, un clic sur tous les noms hexadécimaux des gris affichera leur équivalent CMJN et donc le pourcentage de noir correspondant.

Un moyen plus rapide de parvenir à lire le pourcentage de noir CMJN des différents gris de la palette convertie consiste à paramétrer en CMJN l’information secondaire placée sous le nom hexadécimal de la couleur.

Pour revenir à la palette des couleurs, utilisez le bouton de retour en arrière (annulation de la dernière opération).

Exemples de nuanciers fonctionnels créés avec Coolors

Les nuanciers fonctionnels présentés maintenant ont chacun leurs particularités. Vous serez attentifs aux couleurs positionnées aux extrémités de chaque nuancier (la couleur la plus foncée et la couleur la plus claire). En effet, il peut s’agir du noir et du blanc mais aussi de couleurs très foncées ou très claires.

Pour simplifier l’approche du contraste de valeur entre les couleurs d’un nuancier, je propose d’utiliser la notion d’étagement régulier entres les valeurs de gris des couleurs voisines d’un nuancier.

Nuanciers de 3 couleurs

L’étagement régulier des nuanciers de 3 couleurs peut varier de 50% à 40% suivant la valeur de la couleur la plus foncée et celle de la valeur la plus claire. Avec de tels écarts entre les valeurs des couleurs, on dispose d’une marge de manœuvre importante pour créer des nuanciers fonctionnels sans grand risque d’altérer la lisibilité des textes.

Exemples de nuanciers fonctionnels de 3 couleurs et sauvegarde des URL

Les nuanciers fonctionnels ci-dessous intègrent une couleur très foncée (90%) et une couleur très claire (10%). Le premier nuancier présente un accord de teintes analogues (très proches l’une de l’autre sur le cercle chromatique). Le second présente un accord de teintes complémentaires (opposées l’une à l’autre sur le cercle chromatique).

➜ Vous noterez que les URL des nuanciers créés avec Coolors mentionnent les valeurs hexadécimales des couleurs choisies. Sauvegarder l’URL c’est sauvegarder la palette des couleurs.

Astuces pratiques avec Coolors

Partir de nuanciers de gris étagés pour créer des nuanciers fonctionnels

Pour contrôler l’étagement des valeurs des couleurs des nuanciers fonctionnels, nous avons besoin de repérer quelques valeurs clés en pourcentage de noir. Vous trouverez ci-dessous la listes des valeurs hexadécimales correspondantes

Nuanciers de gris avec noir et blanc

3 valeurs régulièrement étagées
  • 100% ⇄ #000000
  • 50% ⇄ #808080 ou #7f7f7f
  • 0% ⇄ #ffffff

Différence de valeur entre 2 couleurs voisines : 50%

3 valeurs régulièrement étagées
  • 90% ⇄ #191919
  • 50% ⇄ #808080 ou #7f7f7f
  • 10% ⇄ #e6e6e6 ou #e5e5e5

Différence de valeur entre 2 couleurs voisines : 40%

  • 95% ⇄ #0d0d0d
  • 50% ⇄ #808080 ou #7f7f7f
  • 5% ⇄ #f2f2f2

Différence de valeur entre 2 couleurs voisines : 45%

Ces échelles de gris régulièrement étagés sont un point de départ pour construire rapidement un nuancier fonctionnel (surtout s’il doit contenir un gris neutre).

➜ Pour conserver une couleur en cours de recherche, cliquez sur cadenas présent en bas de la liste d’icônes affichées au survol de chaque couleur.

➜ Coolors permet de choisir le type d’accord de teintes à mettre en œuvre lors de la production de couleurs aléatoires (couleurs non verrouillées).

Attention : les nuanciers fonctionnels obtenus avec Coolors doivent être vérifiés en utilisant des outils plus fiables (voir ci-dessous). Des rectifications sont parfois nécessaires 😉

Les nuanciers pour le Web

La question de l’accessibilité est primordiale en design pour le Web. Il existe de nombreux outils de contrôle du contraste de la couleur du texte sur la couleur du fond (comme contrast-ratio.com ou colorable, par exemple).

Des générateurs de nuanciers conformes aux normes d’accessibilité du Web sont disponibles en ligne (comme hello-color ou clrs.cc par exemple). Ces 2 outils proposent seulement des palettes de 2 couleurs (une foncée et une claire), tellement les normes sont contraignantes !

Je vous propose une palette de couleurs moyennes permettant de créer des nuanciers fonctionnels de 3 couleurs (dont le noir et le blanc) respectant la norme d’accessibilité AA (pour toutes les tailles de texte).