Bonjour bonjour. Récemment, j’ai eu à dev un truc avec un système de tags. C’est assez classique. Pour que ça rende joli, je voulais que chaque tag soit affiché sous forme de petite pastille, et que ces pastilles soient colorées. Et pout ne pas restreindre l’utilisateur à un set de couleurs prédéfini, j’ai voulu lui laisser totale latitude avec un color-picker. Bon, c’est très bien tout ça, mais… et alors ?

Eh bien le problème qui se pose quand on laisse les gens choisir la couleur de fond d’un truc, c’est que du coup, dans quelle couleur on écrit par-dessus ? J’avais déjà été confronté à un truc du genre lorsque j’ai conçu un site sur lequel je laissais libre cours à l’administrateur pour choisir l’image de home de son site. Et là, c’était limite pire, parce qu’une image, c’est rarement uni. La technique avait été d’écrire en blanc, et d’appliquer un filtre noir transparent sur l’image de fond, comme ceci :

background-image: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)), url(…)

Ça marche nickel, mais ici, si j’applique un filtre noir, la couleur affichée à l’écran n’est plus celle qu’a choisi l’utilisateur. Damned. Il faut donc trouver une couleur de texte adaptée à la couleur de fond, pas le choix. Ma première piste a été de prendre la couleur opposée selon les composantes RGB. Je prends chaque valeur, rouge, verte et bleue, et je calcule son opposé (255 - x). Je vous rassure, j’étais pas convaincu de base, l’idée d’avoir du texte rose sur fond vert m’enjaillant moyennement. Et effectivement, c’était complètement con. Sans mentionner le fait que si l’utilisateur choisit la couleur “gris du milieu”, à savoir un RGB(127, 127, 127), ou #7F7F7F pour les intimes, eh bien la couleur de texte serait RGB(128, 128, 128) ou #808080 pour les mêmes intimes. Autant vous dire, indistinguable à l’oeil nu. Donc pour résumer, avec cette technique, soit c’est cheum, soit on voit pas, soit on prend que la couleur noire ou la couleur blanche et là l’opposé marche bien.

Ben c’est justement de ce constat qu’est venue la solution. Il fallait que j’écrive en blanc ou en noir, pas en autre chose. C’est plus naturel pour l’oeil humain. Mais pour savoir si je devais écrire en blanc ou en noir, il fallait que je sache si la couleur sélectionnée par l’utilisateur était foncée ou claire, grosso modo. Par curiosité, je m’étais renseigné récemment s’il était possible de savoir si deux couleurs étaient plus ou moins proches. Et la réponse était “oui, mais y’a pas une solution unique, et en tout cas, si tu veux quelque chose de fiable, abandonne le RGB, grand fou”. Wikipedia: Color difference. Donc je me disais que là, bah ça serait pareil. Et ça l’est peut-être d’ailleurs, mais j’ai trouvé, en me baladant sur Stack Overflow, une petite formule toute con, qui m’a bien aidée. Et cette formule est celle de la luminance d’une couleur, basée sur ses propriétés RGB. La luminance, j’ai pas creusé, et pas tout pigé, mais c’est grosso modo une mesure linéaire de la lumière, pondérée à la vision humaine. Si vous voulez vraiment comprendre le concept, cet article détaille tout, en parlant de cônes et de machins, bref de perception des couleurs.

Ce qui m’intéressait ici, c’était cette fameuse formule magique, qui est donc la suivante :

(0.299 * R + 0.587 * G + 0.114 * B)/255

Si le résultat de ce calcul est supérieur à 0.5, alors la couleur est considérée comme claire, et on peut écrire en noir dessus. À l’inverse, elle est foncée, et on peut écrire en blanc.

J’ai appliqué bêtement, et je dois dire que ça fonctionne à merveille, je suis très agréablement surpris. J’imagine que sur certaines valeurs frontières, le rendu est moyen, mais en tout cas, on aura forcément quelque chose de perceptible, et qui ne donne pas trop envie de s’arracher les yeux.

À bientôt (vu ma fréquence, dans environ deux ans). La bise !