Dark mode v ecommerce: má smysl pro e-shop?
Tmavý režim je dnes technicky snadný, ale pro e-shop to není jen přebarvení pozadí. Ukážeme, co obnáší, jaká rizika nese pro produktové fotky a kontrast a podle čeho se rozhodnout.
Tmavý režim má dnes skoro každý telefon, operační systém i velká aplikace. Majitelé e-shopů se nás proto ptají, jestli ho mají mít také. Odpověď není automaticky ano. Technicky je dark mode na webu jednoduchý, ale e-shop stojí na fotkách produktů, barvách značky a čitelných cenách. Když se tmavá varianta udělá napůl, zákazník uvidí šedé obdélníky kolem fotek, nečitelné logo a tlačítka, která zapadnou.
V článku projdeme, jak tmavý režim funguje technicky, co říkají standardy přístupnosti, jak řešit produktové fotky a kdy se e-shopu vyplatí.
Jak dark mode na webu funguje
Uživatel si tmavý vzhled nastaví v operačním systému nebo v prohlížeči. Web se to dozví přes CSS dotaz prefers-color-scheme, který vrací hodnotu light nebo dark. Podle dokumentace MDN je tato funkce v prohlížečích široce dostupná od ledna 2020, takže podpora dnes není překážkou.
K tomu patří dvě další věci:
- Vlastnost `color-scheme` a stejnojmenný meta tag říkají prohlížeči, že stránka umí světlý i tmavý vzhled. Prohlížeč pak přebarví vlastní prvky: posuvníky, formulářová pole a výchozí pozadí. Meta tag v hlavičce stránky pomáhá zabránit bílému probliknutí při načítání.
- Funkce `light-dark()` umožní zapsat obě barvy přímo do jedné deklarace. Podle MDN funguje v aktuálních prohlížečích od května 2024. U starších zařízení je dobré mít záložní řešení přes klasický media query.
Samotný přepínač je tedy pár řádků CSS. Skutečná práce je jinde: v tom, aby každá barva na webu měla promyšlený tmavý protějšek.
Barvy jako tokeny, ne ruční přebarvování
Nejčastější chyba je dělat tmavý režim přepisováním jednotlivých stylů. Na e-shopu s desítkami šablon, bannerů a doplňků vznikne za pár měsíců chaos. Každá nová komponenta se musí ladit dvakrát a něco se vždy zapomene.
Funkční přístup stojí na design tokenech. Místo „tlačítko je #1A73E8“ má web pojmenované role barev: pozadí stránky, pozadí karty, hlavní text, tlumený text, primární akce, chyba, úspěch. Světlý a tmavý režim pak jen přiřazují rolím jiné hodnoty. Nová komponenta používá role, takže funguje v obou režimech rovnou.
Pokud e-shop design systém nemá, je dark mode dobrý důvod ho založit. Bez něj se tmavá varianta udržuje draho.
Pár pravidel pro samotné barvy:
- Nepoužívejte čistě černé pozadí. Material Design od Googlu doporučuje jako základ tmavou šeď #121212. Na ní je lépe vidět stín a vrstvení karet a ostrý kontrast bílého textu na černé méně unavuje.
- Syté barvy značky zesvětlete a odbarvěte. Stejný dokument upozorňuje, že syté barvy na tmavém pozadí „vibrují“ a často nesplní požadavky na kontrast. Tmavý režim proto potřebuje vlastní odstín primární barvy.
- Hloubku ukazujte světlejším povrchem. Karta nad pozadím je o stupeň světlejší, ne tmavší se stínem.
Kontrast podle WCAG platí v obou režimech
Standard přístupnosti WCAG nerozlišuje světlý a tmavý režim. Požadavky platí pro každý vzhled, který web nabízí. Na úrovni AA, kterou doporučujeme jako minimum, to znamená:
| Prvek | Minimální kontrast (WCAG 2.2, AA) |
|---|---|
| Běžný text | 4,5 : 1 |
| Velký text (od 24 px, nebo od 18,66 px tučně) | 3 : 1 |
| Ovládací prvky, ikony, okraje polí, stav fokusu | 3 : 1 vůči okolí |
V tmavém režimu se nejčastěji rozbíjí tlumený šedý text (dostupnost, poznámky u ceny, text v patičce), okraje formulářových polí a přeškrtnuté původní ceny. Kontrast měřte nástrojem, ne okem. Víc o pravidlech přístupnosti (WCAG) najdete v článku Accessibility (WCAG) pro e-shopy.
Pozor také na čitelnost dlouhých textů. Nielsen Norman Group ve svém přehledu výzkumů uvádí, že u lidí s normálním zrakem vychází světlý režim při čtení a hledání drobností lépe, a to napříč věkem. Tmavý režim proto nabízejte jako volbu, ne jako jediný vzhled obsahově náročného e-shopu.
Produktové fotky na tmavém pozadí
Tady je největší rozdíl mezi e-shopem a běžnou aplikací. Většina katalogů má produkty nafocené na bílém pozadí. Důvod je praktický: například Amazon vyžaduje u hlavního obrázku čistě bílé pozadí (RGB 255, 255, 255) a na bílou jsou zvyklí i fotografové a dodavatelé.
Na tmavé stránce se z takové fotky stane bílý obdélník. Máte tři možnosti:
- Nechat fotky v bílých kartách. Produktová dlaždice má světlý podklad i v tmavém režimu. Je to nejlevnější a nejbezpečnější varianta, zákazník vidí barvy produktu věrně.
- Použít fotky s průhledným pozadím. Produkt „leží“ přímo na tmavém povrchu. Vypadá to dobře, ale potřebujete vyříznuté fotky pro celý katalog a tmavé produkty (černá elektronika, oblečení) pak na tmavém pozadí splývají.
- Připravit neutrální šedé pozadí. Kompromis, který sjednotí katalog, ale znamená úpravu všech fotek a jejich dvojí verzi.
U většiny e-shopů doporučujeme první variantu. Barva produktu je informace, na které stojí nákup, a nesmí se měnit podle režimu. Pokud fotky upravujete ve velkém, hlídejte i velikost souborů, viz optimalizace obrázků pro SEO a rychlost.
Stejně pečlivě projděte logo, ikony platebních metod, loga dopravců a grafiku v bannerech. NN/g mezi častými chybami tmavého režimu jmenuje právě loga a obrázky, které na tmavém pozadí zmizí nebo ztratí čitelnost. Logo potřebuje světlou variantu, bannery s textem vloženým do obrázku buď dvě verze, nebo text v HTML.
Kdy dark mode ano a kdy ne
Průzkum NN/g mezi uživateli mobilů ukázal zhruba třetinové rozdělení: třetina používá hlavně tmavý režim, třetina světlý a zbytek přepíná podle situace. Poptávka tedy existuje, ale není univerzální.
| Situace | Doporučení |
|---|---|
| Elektronika, gaming, software, večerní nákupy z mobilu | Dark mode dává smysl, zákazníci ho čekají |
| E-shop s webovou aplikací nebo zákaznickou zónou, kde lidé tráví hodně času | Spíš ano, hlavně v zákaznické zóně |
| Móda, kosmetika, nábytek, potraviny | Opatrně, věrné barvy produktů mají přednost |
| E-shop bez design systému, s mnoha doplňky a ručně psanými bannery | Zatím ne, nejdřív uklidit barvy a komponenty |
| Šablona platformy, kterou nemůžete plně upravit | Jen pokud ji šablona podporuje sama |
Samostatná otázka je, jestli se řídit jen nastavením systému, nebo přidat i ruční přepínač. Doporučujeme obojí: výchozí hodnota podle prefers-color-scheme a přepínač, který si volbu zapamatuje. Někdo má systém trvale tmavý, ale nakupovat chce ve světlém.
Jak na to prakticky
Pokud se rozhodnete tmavý režim zavést, postupujte v tomto pořadí:
- Sepište všechny barvy, které web používá, a převeďte je na pojmenované tokeny.
- Navrhněte tmavou paletu: základní povrch, vrstvy karet, odbarvené barvy značky, stavové barvy.
- Změřte kontrast všech dvojic textu a pozadí a všech ovládacích prvků podle WCAG AA.
- Rozhodněte, jak zobrazíte produktové fotky, a připravte světlé varianty loga a ikon.
- Doplňte meta tag
color-scheme, výchozí režim podle systému a ruční přepínač. - Otestujte klíčové stránky na reálných telefonech: výpis kategorie, detail produktu, košík, pokladnu a e-maily.
- Po spuštění sledujte, kolik lidí tmavý režim používá a jestli se jejich chování liší.
Tmavý režim je nejlevnější, když přijde spolu s design systémem a komponentami nebo s plánovaným redesignem. Dodatečné přebarvování hotového webu vychází dráž a hůř se udržuje. Pokud zvažujete, jestli se vám vyplatí, ozvěte se. Projdeme s vámi sortiment, šablonu i fotky a řekneme, jestli do toho jít teď, nebo až po úklidu barev.
Potřebujete s tím pomoct?