Couleur et design

Sept unités autour d’un solide des couleurs

Pour l’instant, la matière compte un seul cours, Théorie des couleurs, en sept unités. La première explique comment nous voyons les couleurs. Les deux suivantes traitent du RVB et des codes hexadécimaux, puis de la teinte, de la saturation et de la luminosité. La quatrième construit des harmonies de couleurs, la cinquième compare le mélange de lumières et le mélange d’encres, et les deux dernières portent sur le contraste et sur l’usage de la couleur dans un vrai projet graphique. La plupart des unités partagent un même modèle que tu peux faire tourner à la souris : un cube RVB de 512 petits blocs, ou les mêmes couleurs réarrangées en cylindre TSL. Clique sur un point et le panneau du dessous affiche son code hexadécimal, ses valeurs TSL, ses couleurs en harmonie et son rapport de contraste avec le fond que tu choisis.

Cônes, prismes et cube RVB

Une pomme rouge ne contient pas de rouge. Elle absorbe les longueurs d’onde courtes et moyennes de la lumière du soleil et renvoie les longues. La rétine compte environ 6 millions de cônes de trois types, et la couleur apparaît quand le cerveau les compare. C’est pourquoi une lumière jaune pure et un mélange de lumière rouge et verte peuvent sembler identiques. Newton a décomposé la lumière du soleil avec des prismes dans les années 1660 et a dessiné l’un des premiers cercles chromatiques dans Opticks, en 1704. Sur le web, chaque canal va de 0 à 255 : rgb(0 0 0) est donc le noir et rgb(255 255 255) le blanc. Un code hexadécimal se compose de trois paires de chiffres en base 16 : dans #2273c3, la paire c3 vaut 12 × 16 + 3 = 195.

Des angles sur le cercle des teintes

Le modèle TSL place la teinte sous forme d’angle : 0deg pour le rouge, 120deg pour le vert et 240deg pour le bleu. À 0 % de saturation, la teinte ne joue plus aucun rôle, et une luminosité de 50 % donne la version la plus vive d’une teinte. Ce modèle a une limite, et elle est dite franchement : le jaune et le bleu à la même luminosité de 50 % ont des luminances de 0.9278 et 0.0722. Une fois les couleurs placées sur le cercle, une harmonie est un ensemble d’angles. Deux teintes complémentaires sont à 180 degrés l’une de l’autre, une triade réunit trois teintes espacées de 120 degrés, et un schéma complémentaire adjacent utilise 150 et 210 degrés. Attention à une différence : le cercle de la lumière place le bleu face au jaune, alors que le cercle du peintre le place face à l’orange. Les encres fonctionnent à l’inverse de la lumière : le cyan retire le rouge, le magenta retire le vert, le jaune retire le bleu, et les imprimeurs ajoutent du noir car les vraies encres donnent un brun boueux.

Le rapport qui décide de la lisibilité

La lisibilité d’un texte se mesure, elle ne se juge pas à l’œil. La luminance relative des WCAG pondère les canaux linéarisés par 0.2126 pour le rouge, 0.7152 pour le vert et 0.0722 pour le bleu, et le rapport de contraste vaut (L1 + 0.05) / (L2 + 0.05), de 1:1 à 21:1. Le niveau AA demande 4.5:1 pour le texte courant et 3:1 pour le texte en grands caractères et les éléments d’interface ; le niveau AAA demande 7:1. Le gris #767676 sur blanc atteint 4.54:1 et réussit, tandis que le rouge #ff0000 atteint 4.00:1 et échoue pour le texte courant. La dernière unité ajoute le critère 1.4.1 des WCAG : la couleur ne doit jamais être le seul moyen de transmettre une information, car le daltonisme rouge-vert touche environ 8 % des hommes. Prévois d’abord les paliers de luminosité, puis les teintes ; dans le modèle, l’orange de la marque et son bleu complémentaire n’atteignent que 1.06:1.