Egoblog.cz - Petr Kobelka

Kontrast písma a pozadí na webu

Ve článku se dozvíte, jak vypočítat kontrast písma podle barvy pozadí a jaké nastavit vyvažovací kritérium, aby byl kontrast maximálně dobrý.


Webdesign | Komentáře (0) | Shlédnuto 1431 × | Vloženo: 18. března 2013

Při jednom úkolu jsem potřeboval implementovat barevné kapátko. Pracuji v JQuery, takže jsem si na internetu našel jednu knihovnu, jejích nasazení vypadalo nejjednodušeji. Jaký byl ale problém, když jsem si vybral barvu barva písma se skoro sjednotila - písmo nebylo vůbec vidět (např. tmavě modrý text na černém pozadí). Pro ukázku uživatelům je takovéto chování nepřípustné a mě se nechtělo hlrdat jiiný plagin, zvláště kkdyž tento obsahoval možnost definovat si vlasní barvy (před generováním na web) a zároveň neměl nic tak složitého, jako barevný čtverec s miliony odstíny.

Něco nefunguje

Jak se ukázalo, první problém byl v tom kontrastu písma a pozadí, vše bylo ok. Jal jsem se pitvat knihovnu, abych odhalil problém a nastavil správné generování kontrastu. Celý problém se skrýval ve funkci, která propočítávala kontrast písma a pozadí. Byl tam nějaký neznámý vzorec. Pro výpočet jsem použil vzorec doporučovaný na této adrese www.w3.org.

Druhým problémem byl přidruženhým k prvnímu bylo, že barva se definovala v hexadecimálním kódu, ale výpočty probíhaly v decimálním (pokládám to za chybu, protože si nejsem vědom, že by JavaScript uměl interně počítat v šestnáctkové soustavě). Napsat takovou funkci byla otázka několika minut. Tím byl celý problém vyřešen a výsledek vidíte níže.

Kontrast barvy písma a doporučení

Potřebný výstup je celkem intuitivní, pro světlé pozadí potřebuji černé písmo a obráceně.

Jde o dost jednoduchý vzorec:
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

Výsledný zápis výpočtu pro JavaScript:

function returtConstrastFontColor (hex)
{
  // barva pozadi - zaklad je hexadecimalni, 
  // tudiz je treba prevest na decimalni zapis
  var r = hex2dec(hex.substr(0, 2));
  var g = hex2dec(hex.substr(2, 2));
  var b = hex2dec(hex.substr(4, 2));

  //hex2dec - moje vlastni funkce - nezkoumal jsem, 
  //jestli ma JavaScript neco nativne

   var brightness = (299 * r + 587 * g + 114 * b) / 1000; //max 255

  return brightness < 148 ? 'ffffff' : '000000';
  // 148 je moje vyvazovaci kriterium pro rozhodnuti, 
  // kterou barvu pouzit - slape v pohode
}
Petr Kobelka | Egoblog.cz | Tvorba www stránek - www.petrkobelka.cz

Petr Kobelka
Autor je zkušeným web developerem a programátorem s více než 10 letými zkušenostmi. Pracuje jako programátor pro známou Olomouckou společnost zabývající se tvorbou internetových a intranetových řešení. Spolu se zaměstnáním pracuje na volné noze a zabývá se tvorbou internetových stránek. Ve volném čase rád fotí, jezdí na kole, plave a cestuje.

Komentáře

E-mail je potřeba pouze pro vygenerování Gravataru!

Oups, žádné komentáře? Buďtě první !!!

Blog píše Petr Kobelka

Petr Kobelka - egoblog.cz

Žádám všechny, kteří mají zájem vkládat komentáře, aby se řídili pravidly NETikety. Komentáře, porušující tato pravidla můžou být bez varování smazány.