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

Výchozím bodem 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 š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ů. Někdo je neodlišuje a barví všechny odkazy stejně. Já jsem toho názoru, že informace, že stránku už dříve viděl, je pro uživatele užitečná. Proto se většinou snažím navštívené odkazy odlišit od nenavštívených.

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 č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: #a00; }
a:visited       { color: #700; }

Můžete je i zcela „odbarvit“ a pro navštívené odkazy používat stejnou barvu jako pro základní text. Nezapomeňte je podtrhnout, aby byly od textu rozpoznatelné. Připadá mi nicméně vhodnější, aby se jejich barva od běžného textu alespoň trochu lišila.

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 ColorSpace, kterému zadáte výchozí barvu a on vám vygeneruje různé varianty palet z ní odvozených.

Coolors generuje palety náhodně, nicméně jejich barvy k sobě zpravidla dobře pasují. Může se hodit jako výchozí inspirace, pokud nemáte o barvách předem jasno. Kromě toho nabízí galerii předem připravených palet a celou řadu nástrojů v sekci Tools.