Magie barev na webu – základy teorie

22. května 2001

•

Barvy jsou obvykle to první, co návštěvník stránek vnímá a co během několika prvních sekund nejsilněji utváří jeho první dojem. Barvy mají též velký vliv na přístupnost i použitelnost stránek. Jenže na to, aby barvy na stránkách přinesly vám i vašim návštěvníkům víc užitku než škody, je třeba znát zásady jejich správného používání.

Základy teorie

První kruhový diagram barev vytvořil Isaac Newton v roce 1666. Od té doby se odborníci přou, jaká forma reprezentace barevné škály je nejvhodnější. Základem jsou vždy 3 tzv. primární barvy, jejichž mícháním vznikají další odstíny. Nejčastěji se používá aditivní míchání (primární barvy červená, zelená, modrá) a míchání subtraktivní (primární barvy azurová, purpurová, žlutá). Lze však vyjít i z jiných primárních barev, jako v našem následujícím příkladu z červené, žluté a modré.

Smícháním primárních barev vzniknou sekundární barvy, zde zelená, oranžová a purpurová. Smícháním sekundárních barev dále vzniknou barvy terciární. Konečným výsledkem míchání barev je celé barevné spektrum, jak ho známe z duhy na obloze.

Každý bod (na našem obrázku přesněji svislá úsečka) na spektru představuje jeden odstín (v anglické terminologii hue). To však není vše, co tvoří konečné zabarvení.

Dalším parametrem je sytost (saturace). Ve spektru jsou pouze barvy s maximální sytostí. S klesající sytostí se barvy mění ve škálu šedí od černé po bílou. Černobílá fotografie je ideální příklad barev s nulovou sytostí.

Posledním parametrem ovlivňujícím barevnost je světlost (v angličtině označovaná často value). Lze si ji představit jako rozpětí od černé (minimální světlost) k bílé (maximální světlost). Světlost má veliký význam pro kontrast barev. Barvy jsou tím kontrastnější, čím víc se liší ve své světlosti. Kontrast je klíčovým prvkem při kombinování barev, zejména při pokládání textu na barevné pozadí.

Harmonie barev

Aby se stránka návštěvníkům líbila, musí na ní být všechny barvy navzájem vhodně sladěny. Použijete-li málo barev, nebo mezi nimi budou malé rozdíly, bude stránka působit nudně a nezajímavě. Naopak, pokud použijete příliš mnoho odlišných barev, bude výsledkem chaos, který může být návštěvníkům nepříjemný a ztíží vnímání obsahu. Ideálním kompromisem mezi těmito dvěmi krajnostmi je harmonie barev.

Kombinaci barev zvolenou pro určité webové stránky budeme dále nazývat barevné schéma. Existují tři osvědčené principy, jak harmonicky kombinovat barevné schéma:

Monochromatické schéma se kromě černé a bílé skládá z jednoho dalšího odstínu. Nemusí se nutně jednat o jedinou barvu, neboť lze použít několik variant téhož odstínu s různou sytostí, či světlostí.
Podobné, neboli analogické barvy, jsou ty, které spolu bezprostředně sousedí. Na barevném kruhu si vyberte jednu barvu a doplňte ji jejími sousedy bezprostředně vpravo a vlevo. Obvykle se jedna z barev použije jako dominantní.
Doplňkové, neboli komplementární barvy jsou 2 barvy stojící v kruhu přímo naproti sobě. Při správném použití mohou vytvořit jak rovnováhu, tak zajímavý kontrast.

Pro názornost si ukážeme několik inspirativních příkladů:

Monochromatickým barevným schématem se stupňovanou světlostí málokdy něco pokazíte. Že jím lze dosáhnout i velmi pestrý a přitom vyvážený dojem je vidět na serveru Navrcholu.cz.

Důstojně, až strnule působící monochromatický základ Megatextu je doplněn zářivým okrem pro akcenty.

Schéma serveru Topica ukazuje, že jsou-li analogické barvy použity s rozvahou, lze jimi dosáhnout značně stimulujícího účinku.

Komplementární schéma Sovy v síti působí vzdušně a nevtíravě, neboť zejména tmavé barvy jsou použity velmi střídmě.

Portálek naopak svými velkými plochami komplementárních barev působí velmi pestře, až vyzývavě.

Zajímavé schéma používá server Aspin, který kombinuje červenou, žlutou a zelenou. Částečně se tedy jedná o analogické a částečně o komplementární barvy.

Na konec jsme si nechali server Interval.cz, který používá převážně monochromatické, do modré barvy laděné schéma, a které je pro zvýraznění určitých rámečků s jinými barvami – červenou, hnědou, světle žlutou. Výsledek je velmi decentní.

Při kombinování barev nezapomeňte na to, že barvy se navzájem ovlivňují. Stejná barva může na různých pozadích vypadat zcela jinak, jak ukazuje tento obrázek.

Purpurový pruh má pouze jednu barvu a přesto vypadá vlevo mnohem světlejší než vpravo.

Barvy v kontextu designu stránek

Estetický účinek je často sice významným, zdaleka ne však jediným cílem použití barev na webu. Kromě něj by totiž barvy měly plnit i další funkce:

navození určité nálady
posílení identity stránek či firmy
podpora použitelnosti zvýrazněním struktury stránky (stránek) a navigačních prvků
upozornění na důležité informace

Komplexní pojetí barevnosti stránek je náročný, tvůrčí úkol, na který obvykle jednoduché recepty nestačí, řekněme si přesto několik nejdůležitějších zásad.

Navrhujte barevné schéma s ohledem na téma stránek. Barvy by měly být nějak s tématem spojeny, ať už symbolicky (zelená – peníze, příroda; červená – láska; modrá a žlutá – cestování), nebo přímo (firemní barvy).
Použijte barvy k přilákání pozornosti na nejdůležitější místo. Text v jasné barvě dobře kontrastující s pozadím si každý přečte jako první. Nesmíte však tímto prostředkem plýtvat, nebo ztratí na účinnosti.
Zdůrazněte barvami strukturu stránek. Časté je odlišné barevné ladění záhlaví, navigačního pruhu a vlastního obsahu stránky. Má-li váš web více autonomních sekcí, můžete každou z nich pojednat mírně odlišně, avšak tak, aby v uživateli zůstal pocit jednotnosti.
S čím menším počtem barev vystačíte, tím lépe. Je-li na stránce použito víc než přibližně 6 barev, stává se nepřehlednou.
Používejte barvy tam, kde jsou opravdu potřeba pro oddělení částí stránek s různým významem, ke zdůraznění, atd. Pokud bude na vaší stránce rovnoměrně použito mnoho barev, nikdo na ní nenajde to podstatné.
Barvy mohou zrychlit vyhledávání důležitých míst v textu – viz např. barevné zdůrazňování klíčových slov (color highliting) ve výsledcích vyhledávání. Odlišení jednou barvou zrychlí vyhledávání nejvíce. Čím víc se použije barev, tím víc se rychlost hledání snižuje. V textu s více než šesti barvami již nikdo nic nenajde.
Barvy jsou sami o sobě obvykle spojovány s nějakým významem – červená = stop, nebezpečí, chyba; modrá = barva pro chlapce, studená barva techniky; růžová – barva pro dívky; zelená = relaxace, volno. Pozor ale na různé asociace v různých zemích/kulturách (bílá v Evropě radost, svatební barva; na dálném východě smutek, vážnost).
Lidé vnímají údaje ve stejné barvě společně. Využijte toho a zdůrazněte barvami funkční vztahy. Např. navigační odkazy by měly být vždy stejnou barvou.
Lidé mají různý vkus a rádi si vybírají. Nabídněte na výběr víc barevných schémat (viz např. Atlas).

V druhé části článku se zaměříme na barvy z pohledu přístupnosti a použitelnosti stránek a některé z výše uvedených principů si budeme demonstrovat na konkrétních ukázkách. Kromě toho přineseme informace, jak navrhovat stránky sodtupné barvoslepým uživatelům a shrneme si nejčastější chyby, kterých se tvůrci stránek při práci s barvami dopouštějí.

Zdroje