Takže na barevných významech vůbec nezáleží?

Záleží, ale slaběji a jinak, než se píše. Barva nese význam v kontextu oboru a kultury — stejný odstín působí jinak na webu kliniky a na webu kapely. Co nefunguje, jsou univerzální rovnice. Užitečnější je ptát se, co barva znamená ve vašem oboru a čím vás odliší od konkurence.

Kolik barev má mít značka?

Prakticky vystačíte se třemi až pěti hodnotami: podklad, text, akcent a jedna dvě doplňkové na stavy jako chyba a potvrzení. Víc znamená pomalejší rozhodování a nedůsledné použití. Tenhle web má jedenáct pojmenovaných hodnot včetně variant pro světlý a tmavý podklad, a je to horní hranice, ne cíl.

Co když má firma v logu barvu, která se na webu nedá použít na text?

To je běžná situace a neřeší se změnou loga. Značková barva zůstane jako plocha, linka, ikona nebo podtržení a text nese neutrální barva s dostatečným kontrastem. Pro text se dá navíc připravit tmavší varianta téhož odstínu, která projde — značka zůstane rozpoznatelná a stránka čitelná.

Jak poznám, jestli má můj web dost kontrastu?

Změřte to, neodhadujte. Prohlížeč to umí ve vývojářských nástrojích u každého textu a hranice je 4,5 : 1 pro běžný text. Pozor na dvě místa, kde kontrola nejčastěji selže: text položený na fotce a text na průhledné ploše — tam rozhoduje, co je pod ním, ne jaká barva je v kódu.

Psychologie barev: co z ní platí a co se měří

Rovnice typu „modrá znamená důvěru“ jsou pohodlné a skoro nic nevysvětlují — stačí se podívat, kolik konkurentů prodává totéž v opačné barvě. Co o barvě rozhoduje měřitelně, jsou tři jiné věci: kontrast, odlišitelnost a důslednost. Tenhle článek je o nich, i o tom, jak jsem vybíral paletu tohoto webu.

Proč „modrá = důvěra“ neobstojí

Ta tvrzení jsou svůdná, protože zní jako věda a dávají snadnou odpověď. Problém je, že se rozpadnou při prvním pohledu na trh.

Červená má být naléhavost a agrese — a používá ji Coca-Cola, Netflix i česká pošta, pokaždé k něčemu jinému. Zelená má být klid a příroda — a je ve znaku banky i energetického nápoje. Modrá má být důvěra, takže ji mají banky; jenže ji mají všechny, což znamená, že vás neodliší od ničeho.

Barva význam nese, jen ho nenese sama. Nese ho v kontextu odvětví, kultury a toho, co se kolem ní děje. Proto se z barevných tabulek nedá navrhovat.

Co měřitelné je

Kontrast
Jediná vlastnost barvy, která má číslo a hranici. Pro běžný text je minimum 4,5 : 1. Je to zároveň nejčastější místo, kde se značkové barvy lámou — o tom níž.
Odlišitelnost
Položte si logo vedle pěti konkurentů. Když je ve stejném odstínu jako tři z nich, barva pro vás nepracuje, ať znamená cokoliv. Tohle je praktičtější test než jakákoliv tabulka významů.
Důslednost
Barva začne něco znamenat tím, že ji vidí opakovaně na stejném místě. Značka, která má v každém materiálu jiný odstín, si asociaci nevybuduje ani za deset let.
Počet
Čím míň barev, tím rychlejší rozhodování. Tenhle web má jedenáct pojmenovaných hodnot a nic mimo ně — je to omezení, které šetří čas na každém dalším rozhodnutí.

Past, do které spadne každá teplá barva

Tohle je ta nejpraktičtější část článku. Syté teplé barvy — žlutá, oranžová, světle zelená — mají vysoký jas, takže na tmavém podkladu zazáří a na světlém zmizí.

Příklad z reálné zakázky. Značka Vagrant má žlutou #FCCE14 na velmi tmavé zelené:

Stejná žlutá, dva podklady
Kombinace	Kontrast
Žlutá na tmavé zelené	11,7 : 1
Hranice pro běžný text	4,5 : 1
Tatáž žlutá na bílé	1,5 : 1

Rozdíl je téměř osminásobný a barva je pořád stejná. Z toho plyne pravidlo, které používám na všech projektech: teplá sytá barva je grafická, ne textová. Smí být plocha, linka, podtržení, ikona. Nesmí nést text na světlém podkladu.

Na tomhle webu to má i jméno — oranžová v paletě existuje výhradně jako grafická barva, protože na kostěném papíře měří 2,4 : 1 a pod textem by neprošla nikdy.

Jak jsem vybíral barvu tohohle webu

Akcent je fialová #5B3FD9, respektive #A78BFA na tmavém. Nevybral jsem ji z palety trendů ani z toho, co fialová „znamená“.

Každý portrét na tomhle webu je nasvícený z jedné strany magentou a z druhé modrou. Tam, kde se ta dvě světla na mé tváři potkají, je přesně tenhle odstín. Je to změřený průměr fotek, kolem kterých je web postavený — takže ladí s obsahem automaticky a nemusím to hlídat.

Tohle doporučuju i klientům: barvu neberte z nálady, ale z něčeho, co už existuje. Z produktu, z materiálu, z fotek provozovny, z prostředí. Výsledek drží pohromadě sám od sebe a máte pro něj odpověď na otázku „proč zrovna tahle“.

Web Vagrant se žlutou značkovou barvou na tmavém podkladu — Vagrant. Značková žlutá tu unese i text, ale jen proto, že je pod ní velmi tmavá zelená. Projekt v portfoliu.

Když mi klient řekne, že chce modrou, protože vzbuzuje důvěru, ptám se, jakou modrou mají tři jeho největší konkurenti. Většinou je to konec debaty o psychologii barev a začátek užitečnější debaty o tom, čím se odlišit.
Marian Bendák

Poměr 60-30-10 a proč ho používat

Stará poučka: 60 % plochy nese základní barva, 30 % doplňková, 10 % akcent. Není to zákon a nikdo ji nezměřil — je to pomůcka, která funguje z jediného důvodu.

Akcent funguje jen tehdy, když je ho málo. Barva, kterou chcete upozornit na jednu věc, přestane upozorňovat na cokoliv ve chvíli, kdy je jí na stránce pětina. Když má všechno stejnou důležitost, nemá ji nic — a to je ten skutečný obsah toho pravidla.

Na co nezapomenout

Barva nesmí být jediný nositel informace. Chybové pole má mít text, ne jen červený rámeček — pro barvoslepé jinak nenese nic.
Odstín se musí přeladit pro tmavý režim, ne jen ztlumit průhledností. Rozebírám to u tmavého režimu.
Kontrast měřte na vykreslené stránce, ne v kódu. Text na obrázku nebo na barevném pruhu je jiný případ než text na ploše.

Co s tím dál

Jestli řešíte paletu pro značku nebo web, nejrychleji se to posune nad konkrétním materiálem — fotkami, produktem, tím, co už máte. Proberme to na konzultaci zdarma.

Hotové práce jsou v portfoliu. Jak se paleta promítá do celého webu, je vidět v článku o vzniku tohohle webu.