Psychologie barev na webu
Vyberte si barvy, nastavte obor podnikání a hned uvidíte, jak vaše paleta působí, jestli je text čitelný a jestli kombinace sedí k vašemu oboru. Výslednou paletu můžete rovnou poslat grafikovi nebo klientovi.
1. Nastavte své barvy
2. Náhled webu v reálném čase
Postavíme vám web,
který přivede zákazníky
Spojujeme design, funkční technologie a strategii, která přináší výsledky. Web, na který budete hrdí — a který vám přivede poptávky.
3. Analýza a doporučení
Co barvy vysílají
Čitelnost WCAG 2.1 AA
Shoda s oborem
Na co si dát pozor
Paleta k předání grafikovi nebo kodérovi
Hotové palety podle oboru
Ověřené barevné kombinace, které fungují. Vyberte si obor a vyzkoušejte paletu jedním kliknutím.
Co která barva na webu vysílá
Rychlý přehled významů barev, jejich využití a doporučení pro weby.
| Barva | Význam a emoce | Kde funguje nejlépe | Na co si dát pozor |
|---|---|---|---|
| Červená | Energie, naléhavost, chuť k jídlu. Táhne oko jako první. | Gastro, sport, doprava, výprodeje a všude, kde se má jednat hned. | Ve velké ploše působí agresivně. U financí a zdravotnictví si ji lidé spojí s chybou, ztrátou nebo krví. |
| Oranžová | Přátelskost, hravost, dostupnost. Působí levněji a otevřeněji než červená. | Služby pro rodiny, volný čas, kutilství, řemeslo, dětské obory. | Prémiová značka v oranžové ztratí nádech luxusu — na drahé zboží je moc kamarádská. |
| Žlutá | Optimismus, pozornost, nízká cena. Nejrychleji upoutá periferní vidění. | Akční nabídky, potraviny, dětské obory, výstražné prvky. | Na bílém pozadí se prakticky nedá číst a ve velkém unavuje oči. Patří do detailů, ne na plochu. |
| Zelená | Klid, zdraví, růst, příroda. V rozhraních znamená „v pořádku, pokračuj". | Zdraví, ekologie, zahrada, wellness, finance ve smyslu růstu. | Studená zelená sklouzne k nemocničnímu dojmu. Teplejší, zemitější odstíny působí přívětivěji. |
| Tyrkysová | Svěžest, čistota, technika s lidskou tváří. | Wellness, kosmetika, cestování, zdravotnické aplikace. | Je hodně vidět v šablonách startupů — sama o sobě značku neodliší. |
| Modrá | Důvěra, spolehlivost, odbornost, klid. Nejbezpečnější volba. | Finance, pojištění, právo, IT, B2B, vzdělávání, zdravotnictví. | Právě proto, že je nejbezpečnější, je jí plný internet. A k jídlu se nehodí — chuť spíš tlumí. |
| Fialová | Kreativita, jedinečnost, prémiovost, trocha tajemna. | Kosmetika, kreativní obory, wellness, luxusnější služby. | V technických a řemeslných oborech působí neusazeně a zákazníci ji hůř berou vážně. |
| Růžová | Jemnost, péče, hravost, mladistvost. | Kosmetika, květiny, móda, dětské zboží, kavárny. | Nese silný genderový stereotyp — u smíšeného publika raději jako doplněk než jako hlavní barva. |
| Hnědá a béžová | Přírodnost, řemeslo, tradice, teplo. | Kavárny, pekárny, nábytek, farmy, truhlářství, ruční výroba. | Sama o sobě je nevýrazná a málo kontrastní. Potřebuje výrazný akcent, jinak web usne. |
| Černá | Luxus, elegance, síla, soustředění na obsah. | Móda, šperky, auta, fotografie, architektura. | Dlouhé texty na černém pozadí se čtou hůř. Místo čisté černé se vyplatí velmi tmavá šedá nebo tmavě modrá. |
| Bílá a krémová | Prostor, čistota, klid. Nechá vyniknout fotky i text. | Základ prakticky každého webu — a povinnost tam, kde se hodně čte. | Čistě bílá svítí. Krémová nebo velmi světlá šedá je pro oči příjemnější. |
| Šedá | Neutralita, technická přesnost, nadčasovost. | Doplňkové plochy, rámečky, popisky, rozhraní aplikací. | Web postavený jen na šedé působí mrtvě. Bez jedné výrazné barvy se do něj nechce. |
Pravidlo 60 : 30 : 10
Nejčastější chyba amatérských webů není špatně zvolená barva, ale příliš mnoho barev naráz. Osvědčený poměr z interiérového designu funguje i na webu: 60 % plochy dejte neutrálnímu pozadí, 30 % hlavní barvě značky a 10 % nechte doplňkové barvě, kterou použijete jen na to, kam má člověk kliknout.
Ten poslední desetiprocentní díl je nejdůležitější. Jakmile se akcentní barva objeví i jinde než na tlačítku, přestane fungovat jako ukazatel — oko si na ni zvykne a přeskočí ji.
Kontrast je jediná část, která se dá změřit
O tom, jestli je fialová „kreativní", se dá diskutovat. O čitelnosti ne. Norma WCAG 2.1 na úrovni AA žádá u běžného textu poměr jasu aspoň 4,5:1 vůči pozadí a u velkých nadpisů 3:1. Přísnější úroveň AAA chce 7:1.
Špatný kontrast odnese každý, kdo si web otevře na mobilu venku, na starším monitoru nebo ve čtyřicítce, kdy oči potřebují víc světla. Šedý text na bílé, který vypadá elegantně na notebooku v kanceláři, je na telefonu na sluníčku prakticky neviditelný.
Do stejné kategorie patří barvoslepost. V Česku má nějakou formu poruchy barvocitu zhruba každý dvanáctý muž — nejčastěji rozlišení červené a zelené. Důležitá informace proto nikdy nesmí stát jen na barvě.
Co je na psychologii barev mýtus
„Zelené tlačítko prodává nejlíp." Slavné testy, na které se to svádí, neporovnávaly zelenou s červenou obecně — porovnávaly tlačítko, které bylo v okolí vidět, s tlačítkem, které splývalo. Vyhrává kontrast vůči zbytku stránky, ne konkrétní odstín.
„Modrá vzbuzuje důvěru, takže ji má mít každý." Modrá funguje, ale právě proto ji má polovina oboru. Když všechny weby ve výsledcích hledání vypadají stejně, žádný z nich si zákazník nezapamatuje.
„Barvy působí na všechny stejně." Nepůsobí. Význam je z velké části kulturní: bílá je u nás svatební, v části Asie smuteční; červená je v Číně barvou štěstí, u nás varováním.
Jak si vybrat barvy pro vlastní web
- Začněte u zákazníka, ne u sebe. Co má člověk cítit, když web otevře? Bezpečí u právníka, chuť u restaurace, klid u masáží.
- Podívejte se na konkurenci ve výsledcích hledání. Když jsou všichni modří, máte příležitost se odlišit.
- Vezměte jednu barvu jako hlavní a zbytek postavte na neutrálech. Dvě silné barvy spolu soupeří.
- Doplňkovou vyberte z protilehlé části barevného kruhu a použijte ji jen na tlačítka.
- Zkontrolujte kontrast u textu i u tlačítek — nástroj nahoře to spočítá.
- Otestujte to na mobilu a venku. Většina návštěv chodí z telefonu.
Časté otázky
Funguje psychologie barev doopravdy?
Zčásti. Barva sama o sobě nikoho nepřinutí koupit — vliv na rozhodování mají hlavně cena, důvěra a srozumitelnost. Co ale barva umí spolehlivě, je nastavit očekávání: podle odstínu člověk během první vteřiny odhadne, jestli je web drahý nebo levný, seriózní nebo hravý, pro děti nebo pro firmy. A druhá, měřitelná část je čitelnost — špatný kontrast prokazatelně sráží prodeje, protože lidé text prostě nepřečtou.
Jakou barvu mám dát tlačítku?
Takovou, která se na stránce jinde neopakuje. Nejde o to, že by zelená prodávala víc než červená — testy ukazují, že rozhoduje odlišení od okolí. Když je web modrý, funguje oranžové nebo žluté tlačítko; když je web teplý a zemitý, vynikne tmavě zelené. Důležité je i to, aby text na tlačítku měl kontrast aspoň 4,5:1.
Kolik barev má web mít?
V praxi tři: hlavní barvu značky, jednu doplňkovou pro tlačítka a odkazy a k tomu neutrální pozadí s textem. Osvědčené rozdělení je 60 : 30 : 10 — šedesát procent plochy neutrální pozadí, třicet procent hlavní barva, deset procent akcent. Jakmile jsou barvy čtyři a víc, web začne působit roztříštěně.
Jak poznám, že je kontrast dost velký?
Podle poměru jasu mezi textem a pozadím. Norma WCAG 2.1 na úrovni AA žádá u běžného textu aspoň 4,5:1 a u velkých nadpisů 3:1. Nástroj nahoře poměr spočítá za vás. Praktická zkratka: zmenšete si stránku na mobilu, jděte s ní na sluníčko — co nepřečtete venku, nepřečte ani zákazník.
Musí barvy webu ladit s logem?
Nemusí být stejné, ale nesmí si odporovat. Nejčastější řešení je vzít z loga jednu barvu jako hlavní a zbytek webu postavit na neutrálech, aby logo mělo kde vyniknout. Když má logo barvu, která se na velké ploše špatně čte (žlutá, světle zelená), používá se jen v malém a web běží na tmavší odvozené variantě.
Nechcete to řešit sami?
Barvy jsou jedna z mnoha věcí, které rozhodují, jestli web přivede zákazníky. Postavím vám ho na míru — a předem neplatíte nic, fakturuju až po předání hotového webu.