Catégories
CC1-cours Com-Créa

Utiliser les couleurs en design graphique

    Ce support (qui n’est pas vraiment un cours) est une liste de références en ligne sur la couleur, complétée par des exercices simples.

    La couleur au quotidien

    La place de la couleur

    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.

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

    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 une échelle de chromaticité ont la même valeur (ou degré de luminosité).

    La symbolique des couleurs

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

    Couleurs et cultures

    Couleurs et émotions

    Les usages des couleurs

    Couleurs et marketing

    Couleurs et identités visuelles

    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.

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

    Discrimination chromatique

    ➜ Exercice
    Faites 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.

    Simulation des troubles de la vision des couleurs

    Perception contextuelle des couleurs

    Normes d’accessibilité

    Les normes d’accessibilité mettent l’accent 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 elle 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

    La notation informatique de la couleur

    Les mélanges ou synthèses de couleurs

    RGB (ou RVB) cv CMJN

    Image provenant du site mitaki-design.com

    RGB, RGBa et notation hexadécimale

    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.

    ➜ Exercice
    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.

    Les systèmes adaptés à nos discours sur la couleur

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

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

    Exercice

    Les systèmes adaptés au discours utilisent des paramètres qui nous permettent de caractériser les couleurs que nous souhaitons utiliser de manière plus intuitive. Cependant, les valeurs chiffrées qu’ils nous transmettent ne sont pas fiables d’un point de vue perceptif et normatif !

    Les systèmes adaptés à notre perception de la couleur (et à nos discours)

    Comparatifs des systèmes HSLuv et HSL

    Les systèmes adaptés à notre perception nous donnent des informations fiables sur la teinte, la saturation et la luminosité d’une couleur. Cette fiabilité est renforcé par la cohérence entre les informations que me transmettent ces systèmes et celles que nous indiquent les systèmes de contrôle de l’accessibilité des données colorées

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

    Les modes colorimétriques dans la suite Adobe

    Les sélecteurs-convertisseurs de couleurs

    ➜ 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 (utiliez par exempleles 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.

    Nous constatons qu’une couleurs utilisée à l’écran se paramétre de plusieurs manières mais, en fin de compte, la couleur paramétrée correspond à une seule valeur en notation héxadécimale.

    La théorie des couleurs

    La théorie des couleurs et de leur harmonie

    Image extraite du site wix.com

    Les outils basés sur la théorie des couleurs

    Limites de la théorie des couleurs

    Les outils basés sur la théorie des couleurs présentent les couleurs dans un rapport qualitatif harmonieux basé sur la seule teinte. Ces outils ne tiennent pas compte du rapport quantitatif des couleurs. Ils ne guident pas les utilisateurs sur le paramétrage de la saturation, de la chromaticité et de la luminosité pour obtenir un accord harmonieux.

    La construction des nuanciers

    Outils de construction de palettes accessibles

    Outils de contrôle du contraste des couleurs

    Interface de Colorable

    ➜ Exercices

    • Construisez un nuancier étagé de 3 couleurs, 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, un nuancier étagé accessible respectant la norme AA.

    Outils de construction de nuanciers

    ➜ Exercices

    • Construisez un nuancier de 5 couleurs, basé sur un accord complémentaire, en utilisant le mode TSL (avec la roue chromatique d’Adobe Color). Vérifiez l’accessibilité du nuancier en utilisant d’une part les options de l’outil et en utilisant d’autre part un outil de vérification du contraste.
    • Construisez un nuancier de 3 couleurs (avec Data Color Picker) et vérifiez son accessibilité.
    • Construisez un nuancier étagé de 5 couleurs à partir d’une photo (avec Image Picker) et vérifiez son accessibilité.
    • Il est impossible de construire un nuancier accessible de plus de 3 couleurs ! Comment utiliser les nuanciers de plus de 3 couleurs en tenant compte des impératifs de l’accessibilité ?

    La roue chromatique d’Adobe Color impose des nuanciers de 5 couleurs. L’outil garantit une accessibilité qui se révèle non conforme aux normes du WCAG !

    Outils de construction de dégradés étagés

    ➜ Exercice

    • Construisez un nuancier étagé de 3 couleurs, respectant la norme AA Large, en utilisant l’outil Lch and Lab colour and gradient picker et l’outil ColorKit. Quel est l’outil le plus approprié pour construire des nuanciers étagés normalisés (accessibles) ?

    Utilisation de la couleur en communication visuelle

    Utilisation en design hébergé

    Outils utiles

    Conseils pratiques

    Exemples

    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

    Par Yves Goguely

    Formateur au GRETA Auvergne