Proč dark mode není jen „obrácené barvy"
Představa, že stačí prohodit bílou za černou a hotovo, patří mezi nejčastější omyly webdesignu. Průzkum Digital Silk z dubna 2026 ukazuje, že 82,7 % uživatelů preferuje tmavé rozhraní na svých zařízeních. Zároveň ale WebAIM Million report odhalil, že 94,8 % domovských stránek obsahuje WCAG chyby, přičemž nízký kontrast textu figuruje na 79,1 % z nich. Dark mode tento problém neřeší automaticky. Bez promyšlených pravidel ho naopak prohlubuje.
Tmavý režim funguje jako designová disciplína se specifickými požadavky na kontrast, barvy, typografii i hloubku prvků. Tady jsou pravidla, která rozhodují o tom, jestli váš dark mode pomůže, nebo uškodí.
#121212 místo čisté černé
Material Design stanovuje tmavě šedou #121212 jako výchozí pozadí pro dark mode. Důvod je fyziologický: čistě černý podklad (#000000) v kombinaci s bílým textem vytváří extrémní kontrast, který unavuje oči a zhoršuje čitelnost lidem s astigmatismem nebo dyslexií. Katerina Tereshko z Uxcelu tento princip řadí na první místo z dvanácti pravidel dark mode designu.
Tmavě šedá navíc umožňuje pracovat s tónovými vrstvami. Když je základ #121212, můžete nadřazené prvky (karty, modály, dropdown menu) zobrazit o stupeň světleji, třeba #1E1E1E nebo #2C2C2C. Vzniká tak vizuální hierarchie bez jediného stínu.
Kontrast podle WCAG: čísla, ne odhad
WCAG 2.1 vyžaduje kontrastní poměr minimálně 4,5:1 pro běžný text a 3:1 pro velký text (nad 18 px tučně nebo 24 px v regular řezu). V dark mode to má konkrétní dopad: sytě barevný text na tmavém pozadí často tuto hranici nesplní.
Řešení je desaturace. Snížíte sytost akcentových barev o 20–40 %, čímž zlepšíte čitelnost, aniž byste ztratili barevnou identitu. Pro chybové hlášky Material Design doporučuje nanést 40% bílý overlay přes standardní červenou (#B00020), čímž vznikne tlumená #CF6679. Tato barva splňuje AA úroveň kontrastu i na tmavém pozadí.
Testování není volitelné. Každou barevnou kombinaci projeďte nástrojem jako Stark, Colour Contrast Analyser nebo přímo ve Figma pluginu. Odhad od oka v dark mode nefunguje spolehlivě, protože lidské oko vnímá jas nelineárně.
Elevation místo stínů
Stíny na tmavém pozadí nefungují. V light mode stín simuluje hloubku tím, že ztmavuje plochu pod prvkem. Na tmavém podkladu ale nemáte kam ztmavit, takže stín buď zmizí, nebo vytvoří špinavý efekt.
Digital Silk a Uxcel shodně doporučují nahradit stíny systémem tónových vrstev (elevation). Princip je prostý: čím výš prvek v hierarchii, tím světlejší jeho pozadí. Základní plocha má #121212, karta nad ní #1E1E1E, tooltip nebo modal #2C2C2C. National Geographic tento přístup používá na svém webu, kde tmavé rozhraní s jemnými tónovými přechody udržuje čitelnost fotografických popisků i na pozadí s bohatým obrazovým obsahem.
Konzistence je podmínkou. Pokud jednu kartu zvýrazníte světlejším tónem, musí totéž platit pro všechny karty na stejné úrovni. Jinak se hierarchie rozpadne a uživatel ztratí orientaci.
Barvy v dark mode: méně sytosti, víc kontroly
Saturované barvy, které v light mode vypadají přirozeně, v dark mode pálí do očí. Sytě modrá, červená nebo zelená na tmavém pozadí vytvářejí chromatic vibration, nepříjemný optický třas na hranici dvou barev.
Uxcel doporučuje desaturovat paletu a sytě barevné prvky rezervovat výhradně pro logo nebo branded CTA tlačítka. Ostatní akcentové barvy ztlumte. Konkrétně: pokud vaše primární modrá má v HSL sytost 90 %, zkuste ji snížit na 50–65 % pro dark mode variantu. Výsledek bude klidnější a oko ho snáze zpracuje.
Důležité je zachovat barevnou identitu značky. Dark mode nesmí vypadat jako úplně jiný web. Pokud máte propracovaný design systém, definujte pro každý token dvě hodnoty: jednu pro light a druhou pro dark schéma.
OLED a baterie: kdy dark mode šetří energii
Výzkum Purdue University měřil spotřebu energie na OLED displejích při plném jasu a zjistil úsporu 39–47 % oproti light mode. Na OLED obrazovkách tmavé pixely skutečně nesvítí, takže černé a tmavě šedé plochy spotřebovávají minimum energie. Samsung, LG i Apple tuto technologii používají ve svých smartphonech.
Jenže ne každý displej je OLED. LCD obrazovky (stále běžné v noteboocích a levnějších monitorech) podsvěcují celou plochu nepřetržitě. Dark mode na LCD nic neušetří. Při rozhodování, kolik úsilí do dark mode investovat, zvažte, jaká zařízení vaši návštěvníci převážně používají. Google Analytics tento údaj zobrazuje v sekci Technologie.
Cinema efekt: Netflix, Spotify, Letterboxd
Netflix, Spotify a Disney+ používají tmavé rozhraní záměrně. Tmavé plátno zvýrazňuje barvy a pohyb, čímž vytváří tzv. cinema efekt. Obálky filmů, alb a seriálů na tmavém pozadí vyniknou víc než na bílém.
Letterboxd je ukázkovým příkladem. Filmová sociální síť používá hluboké pozadí s tlumenou paletou, která umožňuje pohodlný browsing i v noci. Designéři Letterboxd přitom nesáhli po čisté černé, ale po tmavých odstínech modro-šedé, čímž celé rozhraní získalo filmový charakter bez ztráty čitelnosti.
Podle Adobe preferuje 59 % uživatelů esteticky propracované weby. Dobře provedený dark mode může být právě tím prvkem, který z průměrného webu udělá zapamatovatelný zážitek. Ne proto, že je tmavý, ale proto, že jeho tmavost má účel.
Toggle a personalizace: respektujte volbu uživatele
Dark mode nikdy nevnucujte jako jedinou možnost. Uxcel ho řadí do kategorie personalizace a doporučuje nabízet přepínač (toggle), který respektuje systémové nastavení uživatele přes CSS media query `prefers-color-scheme`. Přepínač by měl mít jasný `aria-label` popisující aktuální stav, aby fungoval i pro uživatele screen readerů.
Správná implementace vypadá tak, že web nejprve detekuje systémové preference, nastaví odpovídající režim, a teprve při manuálním přepnutí uloží volbu do localStorage. Při dalším načtení stránky má uložená preference přednost před systémovou.
Pro lidi s kataraktem (méně rozptýleného světla) může být dark mode příjemnější, ale University of Minnesota upozorňuje, že dark mode není univerzální řešení přístupnosti. Nabídněte volbu a nechte uživatele rozhodnout.
Časté chyby, které vidím u klientů
Za roky práce s vizuálními identitami jsem narazil na opakující se problémy v dark mode implementacích.
Obrázky s bílým pozadím. Logo ve formátu JPG na tmavém pozadí vypadá jako bílý obdélník uprostřed stránky. Používejte transparentní formáty (SVG, PNG, WebP) a připravte varianty pro obě barevná schémata.
Šedý text na šedém pozadí. Designér zvolí „příjemně tlumený" text, který nesplní WCAG 4,5:1. Vždy měřte kontrast nástrojem, ne očima.
Identické ikony. Ikona, která funguje na bílém pozadí, může na tmavém zmizet. SVG ikony přebarvujte přes CSS `currentColor`, aby automaticky reagovaly na změnu schématu.
Zapomenutý toggle. Web automaticky aktivuje dark mode podle systému, ale nenabídne přepínač. Uživatel, který chce light mode při večerním čtení, nemá jak přepnout.
Stíny v dark mode. Box-shadow z light mode se přenese do dark mode beze změny. Na tmavém pozadí stín nikdo nevidí, nebo vytváří nečistý artefakt. Nahraďte ho elevation systémem.
Každý z těchto problémů má jednoduché řešení. Stačí dark mode testovat jako samostatný designový výstup, ne jako automatický derivát light verze.
