Barevné kódy slev: nastavte prahové úrovně bez vizuálního chaosu

Barevné kódy slev bez šumu a chaosu

Barevné kódování slev je účinný nástroj, který urychluje orientaci a pomáhá srozumitelně komunikovat prahové úrovně (např. -10 %, -20 %, -30 %, extra kupón, VIP). Pokud se však paleta navrhne bez pravidel, vzniká vizuální šum, kognitivní přetížení a riziko dark patterns – barva vypadá „výhodně“, ale její význam je nejasný nebo zavádějící. Tento článek nabízí systematický postup, jak navrhnout barevné kódy slev tak, aby byly konzistentní, přístupné, auditovatelné a právně udržitelné.

Principy: čeho má barevné kódování slev dosáhnout

Srozumitelnost: zákazník okamžitě rozumí tomu, co barva znamená (výše slevy, typ akce, stav splnění prahu).
Konzistentnost: stejný význam barvy napříč stránkami (PLP, PDP, košík, e-maily, bannery).
Přístupnost: informace nesmí být sdělována pouze barvou; musí mít textový a ikonografický ekvivalent a dostatečný kontrast.
Právní čistota: žádné vizuální skrývání informací (např. falešná procenta, nečitelná referenční cena).

Taxonomie: co vlastně barevně kódujeme

Prahové úrovně slev: -5 %, -10 %, -20 %, -30 %…
Stav prahu: Nesplněno → Blízko → Splněno (např. do dopravy zdarma zbývá 6 €).
Typ slevy: promo kód, automatická sleva, množstevní sleva, VIP/věrnostní sleva.
Časový stav: probíhá, brzy končí, skončeno (archiv/stránka kampaně).

Paleta: návrh barevných tokenů a jejich významů

Základem je omezená hierarchická paleta. Doporučení: maximálně 5–7 úrovní, z nichž se primárně používají pouze 3–4. Každá barva má v designovém systému svůj token.

Token	Účel	Příklad významu	Kontrast (min.)
–discount/low	Nízká sleva	-5 % až -10 %	4.5:1 text na pozadí
–discount/med	Střední sleva	-15 % až -20 %	4.5:1
–discount/high	Vysoká sleva	-25 % až -30 %	4.5:1
–discount/extra	Extra kupón/VIP	Dodatečná sleva -10 % s kódem	4.5:1 + ikona klíče
–threshold/near	Blízko prahu	„Chybí 6 €“	4.5:1 + indikátor průběhu
–threshold/met	Prahová podmínka splněna	Doprava zdarma aktivována	3:1 (velký text/ikona)
–campaign/ending	Brzy končí	≤ 24 h	4.5:1 + ikona hodin

Přístupnost: barva ≠ jediný nositel informace

Text + barva + ikona: každé barevné označení má doprovodný text (např. „-20 %“) a ikonu (procento, zámek, hodiny).
Kontrast: minimálně 4.5:1 pro text < 18 pt; 3:1 pro velký/tučný text. U klíčových informací nepoužívejte „tón v tónu“.
Barvoslepost: nespoléhejte na rozdíl mezi červenou a zelenou. Používejte vzorování (šrafování) nebo odlišné ikony.
Ovládání fokusu a klávesnicí: stavová označení musí být dostupná prostřednictvím čteček obrazovky a mít popis ARIA (např. aria-label=“Sleva 20 procent, prahová podmínka splněna“).

Prahové hodnoty bez chaosu: logika zobrazování

Definovaná pásma: slevy mapujte do intervalů (např. 0–9 %, 10–19 %, 20–29 %, ≥30 %). Barva se neurčuje „od oka“, ale podle pravidla.
Priorita signálů: v košíku upřednostněte stav prahu pro dopravu před barevným zvýrazněním malé slevy – méně šumu, více hodnoty.
Bez kumulace barev: na jedné produktové kartě zobrazujte maximálně 2 barevné signály současně (např. sleva + práh pro dopravu). Ostatní uvádějte jako neutrální texty.
Přechody mezi stavy: stavy „nesplněno → blízko → splněno“ používají stejnou barvu s jinou intenzitou + ikonu, nikoli tři různé barvy.

Mikrotexty: neutrální texty místo hyperbol

Dobře: „Sleva -20 % do 23:59. Referenční cena za 30 dní: 49,90 €.“
Špatně: „Mega šok! Nenechte si ujít!“ (bez údajů a reference)
Dobře: „Do dopravy zdarma chybí 6 €. Přidat spotřební materiál?“
Dobře: „VIP sleva -10 % s kódem VIP10 (pouze pro přihlášené).“

Dark patterns: čemu se vyhnout

Falešné prahy: barva signalizuje „splněno“, přestože prahové hodnoty nebylo dosaženo (např. po přidání nekompatibilního produktu).
Zamlčování barvou: referenční cena nebo doba trvání akce jsou uvedeny s nízkým kontrastem (šedá na šedé).
Přetížení: současné zobrazení 3 a více barevných štítků (sleva, kupón, doprava, novinka) – zákazník text nečte, ale ignoruje.
Nátlakové barvy: blikající červená s odpočtem bez skutečného časového omezení.

Vzory UI: od PLP po košík

PLP (výpis produktů): jeden barevný štítek se slevou (namapovanou do pásma), sekundární malý neutrální štítek pro „nové“ nebo „TOP“.
PDP (detail produktu): barevný štítek se slevou + neutrální panel „Do dopravy zdarma chybí 6 €“ s indikátorem průběhu (token –threshold/near).
Košík: primární panel prahu pro dopravu (barva podle stavu), sleva vyjádřená textem + procentem, bez dalšího barevného zvýraznění.
Pokladna: střídmá paleta – barevně se označuje pouze potvrzení splnění prahu a chybové stavy platby.

Právní rámec (orientačně pro EU): Omnibus a transparentnost

Referenční cena za 30 dní: při uvádění tvrzení „-X %“ čitelně zveřejněte nejnižší cenu produktu za posledních 30 dní.
Jasné podmínky: barva nesmí zaměňovat slevu za kupón; jde-li o kupón, musí být uveden a použitelný bez skrytých kroků.
Přístupnost jako součást férovosti: klíčové informace (procento, termín, referenční cena) uveďte ve velikosti ≥ 16 px a s dostatečným kontrastem.

Měření: KPI nad rámec CR

Metrika	Definice	Interpretace
Discount Clarity Score	% relací, ve kterých byl zobrazen tooltip/legenda	Vyšší u nových uživatelů, poté klesá
Threshold Completion Rate	% košíků, které splnily práh (doprava/kupón)	Růst bez skokového zvýšení nákladů na dopravu
Complaint Rate (Promo)	Stížnosti na nejasné slevy	Pokles po standardizaci palety
WCAG Pass Rate	% barevných prvků, které splňují požadavky na kontrast	Cíl ≥ 98 % mimo incidenty

A/B testování: méně barev, větší efekt

Hypotéza: „Omezená paleta a jasně definovaná pásma sníží vizuální šum a zvýší Threshold Completion Rate o 10 %.“
Varianty: A) stávající stav s mnoha barvami; B) čtyřpásmová paleta + jednotný prahový panel; C) B + vysvětlující legenda/tooltip.
Kritéria pro zastavení: nárůst Complaint Rate nebo pokles WCAG Pass Rate pod 95 % → návrat k předchozí verzi.

Implementace: designový systém a kód

Designové tokeny: barvy, kontrasty, stavy (near/met/ending) v jediném zdroji pravdy (Figma/JSON).
Komponenty: <DiscountBadge level=“med“ />, <ThresholdBar state=“near“ amountLeft=“6€“ />, <CouponPill type=“vip“ />.
Pravidla lintování: zákaz používání inline barev v aplikaci; povoleny jsou pouze tokeny (validace kontrastu při sestavení).
I18n: lokalizujte procenta, měny a data; barvy pojmenovávejte neutrálně (nikoli „červená sleva“, ale „–discount/high“).

Omnikanál: soulad mezi online prostředím, e-mailem a tiskem

E-maily: používejte stejné barvy a texty, počítejte však s odlišným vykreslením; vždy doplňte textový význam.
Tisk letáků: použijte přibližné hodnoty tokenů v CMYK; ověřte čitelnost na bílém i barevném podkladu.
Prodejna: cenovky a informační štítky u regálů se stejnou paletou a legendou; na jedné cenovce nepoužívejte příliš mnoho signálů.

Správa: kdo rozhoduje o barvách

Obsahová rada: zástupci produktového týmu, designu a právního oddělení schvalují nové významy barev a textů.
Protokol změn: každá změna mapování pásem (např. rozšíření „med“ z 10–20 % na 10–25 %) je zdokumentována s datem a důvodem.
Řešení incidentů: pokud v kampani dojde k záměně významu barvy, okamžitě se přechází na neutrální textová označení.

Příklady: „dobré versus špatné“ kompozice

Situace	Špatně	Dobře
Karta PLP	Tři barevné štítky (sleva, novinka, doprava)	Jeden barevný štítek se slevou (pásmo), ostatní neutrální text/ikona
Košík	Červené „Ušetřete ještě víc!“ bez údajů	Panel „Do dopravy zdarma chybí 6 €“ s indikátorem průběhu
Kampaň „končí“	Blikající červená s nečitelným časem	Token –campaign/ending + ikona hodin + datum/čas

Kontrolní seznam: barevné kódy slev bez chaosu

✅ V produkčním prostředí maximálně 4 pásma slev, ostatní jsou vyhrazená pro zvláštní případy.
✅ Každá barva má text a ikonu; informace se nesděluje pouze barvou.
✅ Kontrast splňuje minimálně 4.5:1 (text) a 3:1 (velké prvky).
✅ Prahy a mapování vycházejí z pravidel, nikoli z pocitu designéra.
✅ Na jedné obrazovce se současně zobrazují maximálně 2 barevné signály.
✅ Referenční cena a délka trvání akce jsou jasně uvedeny.
✅ Změny palety se zaznamenávají a A/B testy sledují také stížnosti, nejen CR.

Méně je více, barva je závazek

Barevné kódy slev jsou účinné, pokud se používají disciplinovaně. Omezená paleta, pevná pravidla mapování, přístupnost a právní transparentnost vytvářejí prostředí bez chaosu, ve kterém barva urychluje porozumění a neklame. Barva je závazek – pokud něco vybarvíte, musíte umět vysvětlit proč, za jakých podmínek a s jakým přínosem pro zákazníka. Z vizuální rekvizity se tak stane spolehlivý navigační systém slev.