Jak vybrat barvy pro web

Barevnost je první věc, kterou návštěvník vyhodnotí, a poslední, kterou umí pojmenovat. Rozhoduje se v desetinách vteřiny a špatná volba stáhne dolů i dobře napsaný web.

Začněte podkladem a textem, ne barvou značky

Skoro každý začíná od loga a hledá k němu paletu. Je to obrácený postup. Nejdřív rozhodněte, jestli bude web světlý nebo tmavý, jakou barvu bude mít běžný text a jak vypadá odstín pro popisky. Tahle trojice pokrývá devadesát procent plochy stránky. Barva značky pak přijde jako akcent na zbylých pár procent.

Text na podkladu je jediná dvojice, kterou návštěvník sleduje po celou dobu čtení. Když si tady vyberete šedou, která vypadá elegantně v návrhu, ale na mobilu venku zmizí, nepomůže vám sebelepší paleta. Pracuju s velmi tmavou šedou místo čisté černé a s bílou, která má lehký nádech do teplé, ne s absolutní bílou.

Teprve když stojí podklad a text, hledám akcentní barvu. Jednu. Ta se používá pro tlačítka, aktivní stavy a zvýraznění a nikde jinde. Když ji nasadíte i na dekoraci, ztratí funkci a stránka přestane návštěvníka navigovat. Dvě akcentní barvy si dovolím jenom u webů s jasně oddělenými sekcemi, například u e-shopu s výprodejem.

Poměr 60 30 10 a proč se láme na jednostránkovém webu

Klasické pravidlo říká šedesát procent podkladu, třicet doplňkové barvy a deset akcentu. Funguje výborně na klasickém webu s podstránkami, protože poměr platí na každé obrazovce zvlášť. U dlouhé jednostránky se ale počítá celkem, a to je past. Když sečtete celou stránku, může vyjít správný poměr, přestože jedna sekce je barevná bomba.

Řešení je jednoduché. Poměr sledujte pro každou obrazovku, kterou návštěvník vidí naráz, tedy zhruba pro každých osm set bodů výšky. Zároveň střídejte světlé a tmavé sekce, aby dlouhá stránka měla rytmus a čtenář poznal, kde jedna část končí. Bez střídání splyne celý web do jednoho pruhu a scrollování působí nekonečně.

• 60 procent plochy tvoří podklad, obvykle bílá nebo velmi světlá šedá
• 30 procent doplňková barva v blocích, patičce a fotkách
• 10 procent akcent výhradně pro akce a zvýraznění
• Na jednostránce počítejte poměr zvlášť pro každou obrazovku
• Střídejte světlé a tmavé sekce, aby stránka měla rytmus
• Akcentní barvu nikdy nepoužívejte na dekoraci, ztratí význam

Kontrast v číslech: co projde a co spadne

Přístupnost není akademické téma, je to čitelnost na levném telefonu v poledním slunci. Doporučení WCAG žádá poměr alespoň čtyři a půl ku jedné pro běžný text a tři ku jedné pro velké nadpisy a prvky rozhraní. Kontrast si spočítáte za deset vteřin v jakékoli online kalkulačce, stačí vložit dvě hodnoty barev.

Nejčastější prohřešek jsou popisky a patičky. Světle šedý text na bílé vypadá v návrhu vzdušně a v provozu ho polovina lidí nepřečte. To se týká i informací, na kterých záleží, jako jsou otevírací doba, adresa nebo cena. Když má být něco méně důležité, zmenšete to nebo posuňte níž, ale nezesvětlujte pod hranici.

Barva podle oboru: co v Česku funguje a co ne

Obor nediktuje barvu, ale nastavuje očekávání. Zákazník si za roky vytvořil představu, jak vypadá důvěryhodná ordinace a jak vypadá stavební firma. Když se od té představy odchýlíte o kus, působíte svěže. Když o hodně, působíte podezřele. Nejbezpečnější postup je držet očekávaný podklad a odlišit se akcentem, typografií a fotkami.

Konkrétní příklad z praxe. U kosmetického studia jsme šli do tlumených pudrových tónů, ale text zůstal tmavě šedý, protože ceník musí být čitelný. U stavební firmy jsme naopak použili grafitovou jako hlavní plochu a jednu signální barvu na tlačítka. Obojí vypadá úplně jinak, ale postup byl stejný, čitelnost první, atmosféra druhá.

• Zdravotnictví a stomatologie: chladná modrá a zelená, červenou nedávat na velké plochy
• Řemesla a stavebnictví: tmavá šedá s jednou signální barvou, působí spolehlivě
• Kosmetika a wellness: tlumené pudrové tóny, ale text musí zůstat tmavý
• Potraviny a gastro: teplé odstíny a syté fotky, minimum barevných ploch okolo
• Právo a finance: tmavě modrá nebo grafitová, zlatý akcent jen v drobném detailu
• Technika a velkoobchod: neutrální podklad a jedna sytá barva pro akce, nic navíc

Tmavý režim a barvy, které v něm spadnou

Tmavý režim už nepoužívají jenom vývojáři. Podle nastavení telefonu ho má zapnutou zhruba třetina návštěvníků a operační systém ho umí vnutit i webu. Pokud s ním nepočítáte, může se stát, že se vaše světle šedé texty ocitnou na tmavém podkladu a stanou se nečitelnými. Kontrola zabere pět minut a udělejte ji vždy před spuštěním.

Zásadní věc: v tmavém režimu se nesmí barvy jenom otočit. Sytá barva, která na bílé vypadá dobře, na tmavém podkladu často vibruje a text v ní pálí oči. Pravidlo je snížit sytost a mírně zesvětlit odstín. Zároveň nikdy nepoužívejte úplně černý podklad, tmavá šedá je pro dlouhé čtení výrazně příjemnější.

Když nemáte kapacitu řešit dvě varianty, řekněte to rovnou a zamkněte web na světlou verzi. Je to legitimní rozhodnutí a dělám ho u projektů, kde je rozpočet napnutý. Horší varianta je tmavý režim napůl, kdy se přebarví pozadí, ale ne obrázky a rámečky. Výsledek pak vypadá jako rozbitá stránka.

Chyby, kvůli kterým web působí lacině

Levný dojem nedělá počet barev, ale jejich náhodnost. Když má hlavička pět odstínů a žádný z nich se neopakuje níž na stránce, mozek čte nesoulad, i když ho neumí pojmenovat. Nejrychlejší náprava je omezit paletu na podklad, text, jednu doplňkovou a jednu akcentní barvu a držet je po celém webu.

Druhý zdroj laciného dojmu jsou barevné přechody použité jako výplň. Na velké ploše, přes kterou má jít text, se z přechodu stane past, protože kontrast se v každé části liší. Když už přechod chcete, nechte ho jemný, v rámci jednoho odstínu, a text na něj nedávejte. Stejné pravidlo platí pro text přes fotku.

• Barevné přechody přes celou plochu, na kterých není nikde čitelný text
• Pět barev v hlavičce, žádná z nich není hlavní
• Odkazy stejnou barvou jako běžný text, nikdo je nenajde
• Text přes fotku bez ztmavovací vrstvy, na mobilu nečitelný
• Čistě černý podklad s čistě bílým textem, po chvíli pálí oči
• Barva tlačítka použitá i na dekoraci, mozek pak nepozná, kam kliknout

Časté otázky

Kolik barev má mít web?

Čtyři stačí. Podklad, barva textu, jedna doplňková a jedna akcentní pro tlačítka a zvýraznění. K tomu potřebujete dva až tři odstíny šedé pro rámečky, popisky a oddělovače. Víc barev nezvýší atraktivitu, jen ubere přehlednost. Pokud vaše značka pracuje se třemi barvami, vyberte jednu hlavní a zbylé dvě používejte v detailech.

Jak si ověřím, že je barevnost přístupná?

Vezměte dvojici barvy textu a podkladu a vložte je do kontrastní kalkulačky. Pro běžný text potřebujete alespoň čtyři a půl ku jedné, pro velké nadpisy a prvky rozhraní tři ku jedné. Zkontrolujte i tlačítka, popisky ve formulářích, patičku a text přes fotky. Právě tam bývá nejvíc problémů.

Musím se držet barev z loga?

Ne doslova. Logo bývá navržené pro tisk a na obrazovce často nemá dost kontrastu. Vezměte z něj náladu a odstín upravte tak, aby prošel kontrastními požadavky. Klientům vysvětluju, že web není vizitka ve větším měřítku, ale prostředí, ve kterém lidé čtou a klikají, a čitelnost má přednost.