Le Hollandais Volant

Un bout de code CSS qui donne à la couleur du texte ("color") une valeur de telle sorte que ça soit toujours correctement contrasté par rapport à la couleur de fond ("background-color").

Ainsi, sans rien toucher d’autre que la couleur de fond, le texte sera blanc sur les couleurs sombres et noir sur les couleurs claires. Le tout fait usage d’un calcul bien précis sur le R, G, B pour donner soit du blanc soit du noir.

Tout ça c’est uniquement en CSS, avec le calc() et les variables. Pas de JS.

Note :
- sur chaque div, on donne trois variables, correspondant au R, G et B. La couleur de fond est alors directement « background-color :(rgb(R,G,B)) ».

La couleur du texte, lui, passe dans la moulinette du calc() et ressort sous forme de blanc ou de noir.

Comment ça marche ? Tout simplement en saturant la luminosité : après le calcul sur R, G, B avec des facteurs empiriques, on a une valeur comprise entre −0.5 et +0.5. On fait alors un ×1000% histoire de saturer l’échelle 0-1 sur laquelle on va mettre cette valeur.

Cette valeur, enfin, est placée dans le color, où la couleur est donnée en HSL(0,0,L) ou le L correspond à notre valeur. Vu qu’on a saturé la valeur, CSS, ou le navigateur, va automatiquement prendre soit 0, soit 1, selon que c’est négatif ou positif.

J’utilise un truc similaire ici : https://lehollandaisvolant.net/tout/tools/color-second/ (où la couleur de fond évolue chaque seconde).

Je le fais en JS :

// I use YIQ color scheme to determine is a color is dark or light
var yiq = ((r*299)+(g*587)+(b*114))/1000;

if (yiq >= 128) {
    // set dark-fond
} else {
    // set light-font
}