Jaké barvy zvolit

Při návrhu stránek musíte najít alespoň čtyři barvy, které budou dohromady fungovat:

• pozadí stránky
• text
• nenavštívené odkazy
• navštívené odkazy

Pozadí a text

Základem bývají první dvě barvy, od nichž se odvíjí vše další. Základní podmínkou je, aby byly dostatečně kontrastní. Tedy buď velmi tmavý text na světlém pozadí, nebo velmi světlý text na tmavém pozadí. Zvolíte-li nedostatečný kontrast, budou stránky velmi špatně čitelné a pro čtenáře únavné.

Barvy pro pozadí a text by neměly být příliš intenzívní. Sytá barva na sebe strhává pozornost a komplikuje soustředění na obsah textu. Syté barvy si můžete dovolit pro krátké texty (např. nadpisy).

Jěště horší samozřejmě je, když zvolíte dvě syté barvy – jak pro text, tak pro pozadí. Vyhýbejte se také kombinaci modré s červenou. Lidské oko má tendenci zaostřovat každou z nich jinak a jakmile se ocitne červený text na modrém pozadí či naopak, je výsledek pro čtenáře velmi nepříjemný.

Ideální je tedy kombinace pastelové (čili nepříliš syté) barvy s barvou velmi tmavou. Která z nich bude náležet textu a která pozadí už je na vašem uvážení.

Odkazy

Barva odkazů by se měla dostatečně lišit od běžného textu a zároveň by měla zachovat dostatečný kontrast vůči pozadí. Často se pro ně volí výrazná barva, aby odkazy byly nápadné a „vyčnívaly“ z textu.

Zajímavou otázkou je také vztah barvy navštívených a nenavštívených odkazů. Není vhodné zvolit pro ně dvě diametrálně odlišné barvy, protože pak není jasné, která barva má jaký význam. Vhodnější je volit barvu navštívených odkazů „někde mezi“ barvou odkazů a barvou textu. Navštívené odkazy jsou pak méně výrazné než nenavštívené a význam barev je zjevný na první pohled.

Čili pokud například zvolíte černý text na bílém pozadí a jasně červené nenavštívené odkazy, je ideální barvou pro navštívené odkazy tmavě červená – například

body {
    color:              #000;
    background-color:   #fff;
}
a:link          { color: #f00; }
a:visited       { color: #600; }

Podpůrné nástroje

Na webu najdete celou řadu stránek s nástroji usnadňujícími výběr barev a jejich kombinací.

Určitě se podívejte na Adobe Color, kde uživatelé zveřejňují a hodnotí své barevné sady. Můžete vyhledávat, můžete upravovat a můžete zveřejnit své kombinace. Skvělý pomocník při barvení webu.

Užitečný je také Paletton od Petra Staníčka, čili pixyho. Vedle schémat odvozených z jedné výchozí barvy umí i schémata kontrastní. Dokáže také simulovat barevné zrakové vady, takže si můžete udělat představu, jak vaše stránky uvidí člověk s porušeným barvocitem.

Z podobného soudku je i Color wizard. Zadáte výchozí barvu (tentokrát ne vizuálně, ale ve tvaru RRGGBB) a systém vám spočítá barvy od ní odvozené (podobné, kontrastní a podobně). V odkazech hlavního menu pak najdete vysvětlující texty, náhodný generátor barev či nabídku osvědčených barevných schémat.