Comment pouvez-vous modifier par programme la couleur de la police en fonction de l’arrière-plan ? (Mode clair/foncé)

Si vous avez visité Martech Zone récemment, vous avez peut-être remarqué que nous offrons désormais la possibilité de visualiser le site en mode clair ou sombre. Cherchez simplement le lune ou soleil icône à côté de la date dans la barre de navigation en haut à gauche du site.

C’est une fonctionnalité plutôt cool et ça marche vraiment bien. Lorsque j’ai lancé un nouvel outil de conversion pour changer HEX en RVB, je voulais afficher la couleur que l’utilisateur essayait de calculer. Non seulement j’affiche la couleur, mais j’ai également ajouté une fonctionnalité intéressante qui affiche le nom de la couleur. Mais cela a introduit un problème…

Si l’échantillon qui affiche la couleur avait un arrière-plan clair, vous ne pourriez pas lire le texte que je génère dynamiquement pour l’échantillon. Alors… j’ai dû créer une fonction qui définissait la couleur de la police en fonction de la couleur d’arrière-plan et s’il y avait ou non suffisamment de contraste pour afficher la police.

Fonction JavaScript pour le mode clair ou sombre

J’avais besoin de créer une fonction où je pouvais passer le code hexadécimal pour la couleur, puis indiquer si la police devait être blanche ou noire en fonction du contraste. Cette fonction Javascript a fait l’affaire…

function contrast(hex) {
  var threshold = 149;
  let r = 0, g = 0, b = 0;

  // 3 digits
  if (hex.length == 4) {
    r = "0x" + hex[1] + hex[1];
    g = "0x" + hex[2] + hex[2];
    b = "0x" + hex[3] + hex[3];
  // 6 digits
  } else if (hex.length == 7) {
    r = "0x" + hex[1] + hex[2];
    g = "0x" + hex[3] + hex[4];
    b = "0x" + hex[5] + hex[6];
  }
  return ((r*0.299 + g*0.587 + b*0.114) > threshold) ? '#000000' : '#ffffff';
}

Le seuil de cette fonction est utilisé pour déterminer si une couleur particulière est claire ou foncée. La fonction convertit le code de couleur hexadécimal donné en rouge, vert et bleu (RVB), puis utilise une formule pour calculer la luminosité perçue de la couleur. Si la luminosité est supérieure au seuil, la fonction revient #000000, qui est le code hexadécimal du noir. Si la luminosité est inférieure au seuil, la fonction revient #ffffffqui est le code hexadécimal du blanc.

Le but de ce seuil est de s’assurer que la couleur du texte choisie pour la couleur de fond donnée a suffisamment de contraste pour être facilement lisible. Une règle générale est que le texte clair (par exemple blanc ou jaune) doit être utilisé sur un fond sombre, et le texte sombre (par exemple noir ou bleu) doit être utilisé sur un fond clair. En utilisant un seuil pour déterminer si une couleur est claire ou foncée, la fonction peut choisir automatiquement la couleur de texte appropriée pour une couleur d’arrière-plan donnée.

En utilisant la fonction ci-dessus, je peux appliquer par programme le CSS font-color en fonction de la couleur d’arrière-plan. Testez le convertisseur et vous verrez à quel point il fonctionne !