Content Marketing

Ako môžete programovo zmeniť farbu písma na základe pozadia? (Svetlý/Tmavý režim)

Ak ste navštívili Martech Zone v poslednej dobe ste si mohli všimnúť, že teraz ponúkame možnosť prezerania stránky v svetlom alebo tmavom režime. Stačí vyhľadať mesiac alebo slnko ikonu vedľa dátumu v ľavom hornom navigačnom paneli na stránke.

Je to celkom fajn funkcia a funguje naozaj dobre. Keď som spustil nový nástroj na konverziu na zmeniť HEX na RGB, chcel som skutočne zobraziť farbu, ktorú sa používateľ pokúšal vypočítať. Nezobrazujem len farbu, ale pridal som aj peknú funkciu, ktorá zobrazovala názov farby. To však vyvolalo problém…

Ak by vzorka zobrazujúca farbu mala svetlé pozadie, nemohli by ste prečítať text, ktorý dynamicky generujem pre vzorku. Takže... Musel som vytvoriť funkciu, ktorá nastavila farbu písma na základe farby pozadia a toho, či bol alebo nebol dostatočný kontrast na zobrazenie písma.

Funkcia JavaScript pre svetlý alebo tmavý režim

Potreboval som vytvoriť funkciu, kde by som mohol odovzdať hexadecimálny kód pre farbu a potom vrátiť, či má byť písmo biele alebo čierne na základe kontrastu. Táto funkcia JavaScript urobila trik…

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

Prah v tejto funkcii sa používa na určenie, či je konkrétna farba svetlá alebo tmavá. Funkcia konvertuje daný hexadecimálny kód farby na červenú, zelenú a modrú (RGB) komponenty, potom použije vzorec na výpočet vnímaného jasu farby. Ak je jas nad prahovou hodnotou, funkcia sa vráti #000000, čo je hexadecimálny kód čiernej farby. Ak je jas pod prahovou hodnotou, funkcia sa vráti #ffffff, čo je hexadecimálny kód pre bielu farbu.

Účelom tohto prahu je zabezpečiť, aby farba textu zvolená pre danú farbu pozadia mala dostatočný kontrast, aby bola ľahko čitateľná. Bežným pravidlom je, že svetlý text (napr. biely alebo žltý) by mal byť použitý na tmavom pozadí a tmavý text (napr. čierny alebo modrý) by mal byť použitý na svetlom pozadí. Pomocou prahu na určenie, či je farba svetlá alebo tmavá, môže funkcia automaticky vybrať vhodnú farbu textu pre danú farbu pozadia.

Pomocou vyššie uvedenej funkcie môžem programovo použiť CSS farby písma na základe farby pozadia. Otestujte prevodník a uvidíte, ako dobre to funguje!

Douglas Karr

Douglas Karr je CMO OpenINSIGHTS a zakladateľ spoločnosti Martech Zone. Douglas pomohol desiatkam úspešných startupov MarTech, asistoval pri due diligence v hodnote viac ako 5 miliárd dolárov v akvizíciách a investíciách Martech a naďalej pomáha spoločnostiam pri implementácii a automatizácii ich predajných a marketingových stratégií. Douglas je medzinárodne uznávaný odborník na digitálnu transformáciu a MarTech a rečník. Douglas je tiež publikovaným autorom príručky Dummie a knihy obchodného vedenia.

súvisiace články

Tlačidlo späť nahor
Zavrieť

Zistený blok reklám

Martech Zone vám tento obsah môže poskytnúť bezplatne, pretože naše stránky speňažujeme prostredníctvom príjmov z reklám, pridružených odkazov a sponzorstiev. Ocenili by sme, keby ste pri prezeraní našej stránky odstránili blokovanie reklám.