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 :
- http://pourpre.com/fr/nuanciers/
- http://pourpre.com/fr/glossaire
- http://www.blog-couleur.com/?-Notions-de-colorimetrie-
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.
- https://www.pourpasunrond.fr/theorie-couleurs/
- https://99designs.fr/blog/conseils-design/la-theorie-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.
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).