Psychologie barev pro landing page s vysokou konverzí

Barva je první věc, kterou návštěvník zpracuje – ještě než přečte jediné slovo. Komunikuje odvětví, důvěryhodnost a tón během milisekund. Přímo také ovlivňuje, zda je text čitelný, což ovlivňuje, zda lidé na stránce zůstanou.

Tento příspěvek vysvětluje, jak funguje systém palet PAGEnza a proč omezení, která ukládáme při výběru barev, ve skutečnosti přinášejí lepší výsledky než dávání AI neomezené svobody.

Problém s žádostí AI, aby "vybrala pěkné barvy"

Pokud požádáte LLM, aby vybral barvy pro web, dostanete hex kódy. Někdy spolu vypadají dobře. Někdy ne. Model nemá spolehlivý způsob, jak vyhodnotit, zda barvy skutečně fungují – zda je text čitelný, zda je paleta vhodná pro dané odvětví, zda je kombinace vizuálně soudržná, nikoli jen náhodně sladěná.

Tento problém jsme jasně viděli v raných testech. Neomezené generování barev produkovalo palety, které se pohybovaly od vynikajících po zcela nepoužitelné. Nebyla žádná konzistence.

Řešením bylo vzít výběr barev zcela z rukou LLM a vytvořit algoritmický systém, který zaručuje specifické vlastnosti.

4barevný systém

Každá stránka PAGEnza používá přesně čtyři pojmenované barvy:

ink – primární barva textu. Vždy tmavá (vysoký kontrast jasu oproti pozadí). Používá se pro nadpisy, text těla a prvky UI, které je třeba číst.

bg1 – primární pozadí. Obvykle nejlehčí barva v paletě. Používá se pro hlavní pozadí stránky a světlé sekce.

bg2 – sekundární pozadí. Vytváří vizuální rozmanitost mezi sekcemi. Musí mít jinou barevnou teplotu než bg1 – pokud je bg1 teplý krémový, bg2 je chladná šedá nebo bílá s modrým nádechem.

accent – značková barva. Používá se pro tlačítka, odkazy, zvýraznění a dekorativní prvky. Obvykle nejvíce nasycená barva v paletě.

Toto omezení – čtyři pojmenované role, nikoli libovolné hex kódy – je to, co dělá systém palet funkčním. AI nikdy nerozhoduje, která barva kam přijde; pouze vybírá, kterou paletu použít z předem auditované sady.

Jak jsou palety organizovány

Udržujeme 20+ skupin palet, z nichž každá je postavena kolem archetypu:

• Výrazné: vysoký kontrast, nasycené akcenty – technologie, SaaS, fintech
• Jemné: tlumené, desaturované – wellness, koučink, kreativní služby
• Luxusní: téměř černé pozadí s kovovými nebo drahokamovými akcenty – prémiové služby, luxusní maloobchod
• Zemitý: teplé neutrály s terakotovými nebo šalvějovými akcenty – jídlo, udržitelnost, řemesla
• Tmavé: palety primárně pro tmavý režim – vývojáři, agentury, hry
• Neutrální: bezpečné, profesionální – právní, finanční, zdravotnictví

V rámci každé skupiny existuje více palet s různými barevnými teplotami, úrovněmi sytosti a akcentními odstíny. Systém vybírá skupinu na základě odvětví a archetypu, poté vybere konkrétní paletu v rámci skupiny.

WCAG kontrast: omezení, které zlepšuje design

WCAG AA vyžaduje, aby běžný text měl kontrastní poměr nejméně 4,5:1 vůči svému pozadí. Velký text potřebuje 3:1. Interaktivní prvky potřebují 3:1 vůči sousedním barvám.

Každá paleta v našem systému je před zařazením ověřena proti těmto poměrům. Konkrétně:

• ink musí dosáhnout kontrastu ≥4,5:1 vůči bg1, bg2 a jakémukoli povrchu, kde se text zobrazuje
• accent musí dosáhnout kontrastu ≥3,0:1 vůči bg1 a bg2 (pro použití jako pozadí tlačítek)
• Ověření používá skutečné matematické výpočty jasu – L = 0.2126R + 0.7152G + 0.0722B po korekci gama – nikoli aproximace

Výsledkem je, že každá vygenerovaná stránka je ve výchozím stavu čitelná. Ale existuje sekundární výhoda: designy s vysokým kontrastem lépe konvertují. Tlačítko, které je jasně viditelné, získá více kliknutí než to, které splývá s pozadím. Požadavek na přístupnost se ukazuje být požadavkem na konverzi.

Kontrast barevných teplot mezi sekcemi

Jeden detail, který je snadné přehlédnout: bg1 a bg2 musí mít kontrastní barevné teploty. Pokud jsou obě pozadí teplá, střídající se sekce působí monotónně – stránka vypadá jako jeden souvislý blok spíše než jako oddělené oblasti obsahu.

Pravidlo v našem systému: pokud má bg1 teplý odstín (směr oranžové/žluté, nebo teplý neutrální jako krémový), bg2 musí být chladný (směr modré/šedé). Pokud je bg1 chladná bílá, bg2 může být teplá off-white.

To je důvod, proč naše sekce působí odlišně i bez těžkých oddělovačů nebo stínů – samotná změna teploty pozadí vytváří jasný vizuální předěl.

Logika barev specifická pro odvětví

Některé volby barev jsou silně kódovány podle odvětví. Návštěvníci mají očekávání vybudovaná z let expozice webům v dané kategorii.

Zdravotnictví a wellness: modré a zelené barvy signalizují důvěru a klid. Nasycené červené a oranžové barvy v tomto kontextu působí znepokojivě.

Právo a finance: tmavé námořnické, uhlově šedé, konzervativní šedé. Jasné akcenty jsou přijatelné, ale musí být omezené. Hravé palety podkopávají důvěryhodnost.

Jídlo a pohostinství: teplé tóny – terakotová, jantarová, krémová – aktivují asociace s chutí. Chladné klinické palety působí nesprávně.

Technologie a SaaS: modré barvy zůstávají dominantní, ale je zde větší rozsah. Elektrické modré, indigové a dokonce i fialové působí jako technologicky pokročilé. Čistě černé pozadí funguje pro vývojářské nástroje.

Luxus a prémiové služby: klíčem je zdrženlivost. Omezený rozsah barev, téměř černé nebo tmavě modré jako primární barvy, zlaté nebo platinové akcenty. Vysoký kontrast, nikdy nasycený.

Výběr archetypu v Design Mandate mapuje odvětví + typ podnikání na příslušnou skupinu palet, takže wellness kouč neskončí se stejnou paletou jako právnická firma, i když jsou obě popsány jako "profesionální".

Co mohou klienti změnit

Po vygenerování mohou klienti upravovat svou stránku v Gutenberg. Volič barev v editoru zobrazuje pouze čtyři značkové barvy – nic jiného. To znamená:

• Mohou měnit pozadí sekcí mezi bg1, bg2 a povrchy
• Mohou měnit barvy tlačítek a odkazů mezi accent a ink
• Nemohou zavést libovolnou pátou barvu, která by narušila paletu

Omezení je záměrné. Nejčastějším způsobem, jak klienti zkazí profesionálně navrženou stránku, je výběr barev z celého barevného kruhu. Omezení palety na čtyři pojmenované barvy to znemožňuje, aniž by se zasahovalo do kódu.