Content Marketing

Wie können Sie die Schriftfarbe basierend auf dem Hintergrund programmgesteuert ändern? (Hell/Dunkel-Modus)

Wenn Sie besucht haben Martech Zone In letzter Zeit haben Sie vielleicht bemerkt, dass wir jetzt die Möglichkeit bieten, die Website entweder im hellen oder im dunklen Modus anzuzeigen. Suchen Sie einfach nach dem Mond oder Sonne Symbol neben dem Datum in der Navigationsleiste oben links auf der Website.

Es ist ein ziemlich cooles Feature und es funktioniert wirklich gut. Als ich ein neues Konvertierungstool auf den Markt brachte Ändern Sie HEX in RGB, wollte ich tatsächlich die Farbe anzeigen, die der Benutzer zu berechnen versuchte. Ich zeige nicht nur die Farbe an, sondern habe auch eine nette Funktion hinzugefügt, die den Namen der Farbe anzeigt. Aber das führte zu einem Problem …

Wenn das Farbfeld, das die Farbe anzeigt, einen hellen Hintergrund hätte, könnten Sie den Text, den ich dynamisch für das Farbfeld generiere, nicht lesen. Also … musste ich eine Funktion erstellen, die die Schriftfarbe basierend auf der Hintergrundfarbe festlegt und ob genügend Kontrast vorhanden ist, um die Schrift anzuzeigen.

JavaScript-Funktion für hellen oder dunklen Modus

Ich musste eine Funktion erstellen, bei der ich den Hex-Code für die Farbe übergeben und dann basierend auf dem Kontrast zurückgeben konnte, ob die Schriftart weiß oder schwarz sein sollte. Diese JavaScript-Funktion hat es geschafft ...

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';
}

Der Schwellenwert in dieser Funktion wird verwendet, um zu bestimmen, ob eine bestimmte Farbe hell oder dunkel ist. Die Funktion wandelt den angegebenen hexadezimalen Farbcode in Rot, Grün und Blau um (RGB)-Komponenten und verwendet dann eine Formel, um die wahrgenommene Helligkeit der Farbe zu berechnen. Wenn die Helligkeit über dem Schwellenwert liegt, kehrt die Funktion zurück #000000, was der Hex-Code für Schwarz ist. Wenn die Helligkeit unter dem Schwellenwert liegt, kehrt die Funktion zurück #ffffff, was der Hex-Code für Weiß ist.

Der Zweck dieses Schwellenwerts besteht darin, sicherzustellen, dass die für die gegebene Hintergrundfarbe gewählte Textfarbe genügend Kontrast hat, um leicht lesbar zu sein. Als Faustregel gilt, dass helle Schrift (z. B. weiß oder gelb) auf dunklem Hintergrund und dunkle Schrift (z. B. schwarz oder blau) auf hellem Hintergrund verwendet werden sollte. Indem ein Schwellenwert verwendet wird, um zu bestimmen, ob eine Farbe hell oder dunkel ist, kann die Funktion automatisch die geeignete Textfarbe für eine gegebene Hintergrundfarbe auswählen.

Mit der obigen Funktion kann ich das Schriftfarben-CSS basierend auf der Hintergrundfarbe programmgesteuert anwenden. Testen Sie den Konverter und Sie werden sehen, wie gut er funktioniert!

Douglas Karr

Douglas Karr ist CMO von Öffnen Sie EINBLICKE und Gründer der Martech Zone. Douglas hat Dutzenden erfolgreicher MarTech-Startups geholfen, war bei der Due Diligence von MarTech-Akquisitionen und -Investitionen im Wert von über 5 Milliarden US-Dollar behilflich und unterstützt weiterhin Unternehmen bei der Umsetzung und Automatisierung ihrer Vertriebs- und Marketingstrategien. Douglas ist ein international anerkannter Experte und Redner für digitale Transformation und MarTech. Douglas ist außerdem Autor eines Dummie-Ratgebers und eines Buchs über Unternehmensführung.

Ähnliche Artikel

Nach oben-Taste
Menu

Adblock erkannt

Martech Zone ist in der Lage, Ihnen diese Inhalte kostenlos zur Verfügung zu stellen, da wir unsere Website durch Werbeeinnahmen, Affiliate-Links und Sponsoring monetarisieren. Wir würden uns freuen, wenn Sie Ihren Werbeblocker entfernen würden, während Sie unsere Website besuchen.