Je jedenáct večer, člověk leží v posteli s telefonem v tmavém režimu a otevře odkaz na váš web. Obrazovka mu vystřelí do obličeje bílou plochou. Zavře to dřív, než stihne přečíst nadpis, a už se nevrátí.
A teď druhý případ, o kterém se mluví míň. Zákazník s astigmatismem otevře váš web, který umí jen tmavý režim, protože tak to vypadalo dobře v návrhu. Bílý text na černé mu začne světélkovat a rozmazávat se. Přečte dva odstavce, přestane a jde jinam.
Ani jeden z těch dvou vám nenapíše, co se stalo. V přehledu návštěvnosti zůstane jen krátká návštěva a odchod. Proto tenhle článek: světlý a tmavý režim není otázka vkusu ani módy, je to funkce. Tady je, co o tom říká výzkum, kolika lidí se to týká a co to znamená technicky.
Co říká výzkum a co je mýtus
Začnu tím, co se čeká nejmíň, protože bez toho je celý zbytek jen povídání o dojmech.
U lidí s běžným nebo brýlemi korigovaným viděním vychází v měřeních lépe světlý režim. Studie publikovaná v odborném časopise Ergonomics v roce 2013 srovnávala tmavý text na světlém podkladu proti opaku a světlý režim vyhrál ve všech sledovaných úlohách, tedy v ostrosti vidění i v korekturách textu, u mladších i starších účastníků.
Vysvětlení je fyziologické a docela hezké: na světlém podkladu se zornice stáhne. Menší zornice znamená menší vliv optických vad oka a větší hloubku ostrosti, takže se písmena zaostřují snáz.
Ještě překvapivější je zjištění z roku 2017: ani v noci si tmavý režim nevedl lépe. Ve tmě vyšel výkon při čtení lépe se světlým režimem, zatímco přes den nebyl mezi režimy rozdíl.
Z toho plyne první závěr, který stojí proti tomu, co si většina lidí myslí: tmavý režim není zdravější a neléčí unavené oči. Kdo tvrdí, že tmavý režim šetří zrak, opakuje reklamní tvrzení, ne výsledek měření.
Jenže tím to nekončí, protože měření výkonu při čtení není totéž co pohodlí a rozhodně to není totéž co použitelnost pro lidi, kteří nevidí běžně.
Tmavý režim není zdravější. Je nutný pro část lidí a nepoužitelný pro jinou část. Proto je funkcí volba, ne režim sám
Komu tmavý režim opravdu pomáhá a komu naopak škodí
Tady se z designové debaty stává otázka přístupnosti a tady taky přestává být řeč o menšině.
Tmavý režim pomáhá lidem se zákalem oční čočky a s dalšími stavy, kdy se světlo v oku rozptyluje. Ve výzkumu, který shrnuje Nielsen Norman Group, měli účastníci se zakalenými optickými prostředími lepší rychlost čtení právě v tmavém režimu. Pomáhá také lidem se světloplachostí, tedy s bolestivou citlivostí na světlo.
Tmavý režim naopak vadí lidem s astigmatismem. Bílý text na černém podkladu se jim rozostřuje a světélkuje, čemuž se říká halace. A astigmatismus není okrajová věc.
Kolik dospělých má astigmatismus
Složení v procentech
- Má astigmatismus40,4 %
- Nemá59,6 %
| Popis | Hodnota |
|---|---|
| Má astigmatismus | 40,4 % |
| Nemá | 59,6 % |
Dva ze pěti dospělých. To není skupina, kterou lze v návrhu webu přeskočit s tím, že se najde jiné řešení.
Na druhé straně stojí světloplachost. Migréna postihuje kolem 14 procent lidí a je druhou nejčastější neurologickou diagnózou na světě; z lidí s migrénou má 80 až 90 procent při záchvatu právě světloplachost. Pro ně je bílá plocha na displeji v šeru fyzicky nepříjemná.
Web jen ve světlém režimu: v šeru svítí jako baterka. Odradí každého, kdo má v telefonu nastavený tmavý režim, a bolí lidi se světloplachostí. Většina návštěv z mobilu večer skončí zavřením karty.
Web jen v tmavém režimu: dva ze pěti dospělých s astigmatismem se v něm hůř čtou, na slunci venku je nečitelný úplně a při tisku vypadá jako chyba. Vypadá dobře v návrhu, prohrává v provozu.
Rozhoduje kontext, ne vkus
Klíčové zjištění z výzkumu nezní, který režim je lepší. Zní, že to závisí na situaci, ve které je člověk zrovna, a ta se mění během jednoho dne u téhož člověka.
- Postel v jedenáct večer. Nejčastější situace, kdy se čte na mobilu. Bílá plocha tam funguje jako budík.
- Venku na slunci. Přesně naopak: tmavý režim se na displeji v ostrém světle čte hůř, protože se snižuje efektivní kontrast a přibývají odrazy.
- Noční směna a dispečink. V šeru řídicí místnosti je světlý panel oslňující a lidé si ho sami ztlumí, i za cenu horší čitelnosti.
- Terminál ve výrobní hale nebo na recepci. Osvětlení tam nikdo neřeší podle vašeho webu. Aplikace musí jít použít v obojím.
- Kancelář s okny na jih. Tentýž člověk chce ráno světlý režim a večer tmavý.
Právě proto je správná odpověď volba, ne rozhodnutí za uživatele. A protože uživatel tu volbu už jednou udělal v nastavení systému, správně se web zeptá tam, ne až v patičce.
Baterie: největší mýtus a jedna zajímavá pravda
Že tmavý režim šetří baterii, je nejčastější argument. Měření z Purdue University na několika telefonech s OLED displejem ho ale výrazně upravuje.
Kolik energie displeje ušetří tmavý režim
Pásmo v procentech
| Popis | Od | Do |
|---|---|---|
| Jas 30 až 50 procent, tedy jak lidé telefon běžně mají | 3 % | 9 % |
| Jas 100 procent | 39 % | 47 % |
Při jasu, na kterém má telefon většina lidí, ušetří tmavý režim jednotky procent. Znatelná úspora přichází až u plného jasu, který nikdo nemá nastavený trvale.
Zajímavější je vedlejší zjištění z téhož měření: snížení jasu ze sta procent na padesát sníží spotřebu displeje zhruba desetinásobně, bez ohledu na to, jaký režim je zapnutý. Jas rozhoduje o baterii mnohem víc než barva pozadí.
Praktický důsledek pro váš web: baterii jako důvod pro tmavý režim klidně vynechte. Důvody jsou jiné a lepší.
Co znamená, že web umí tmavý režim
Tady se odděluje web, který má tmavý režim, od webu, který má tmavou barvu pozadí. Je to jedenáct věcí a většina z nich není vidět, dokud nechybí.
| Co se musí udělat | Když chybí |
|---|---|
| Přečíst volbu ze systému přes prefers-color-scheme | Web ignoruje nastavení, které si člověk udělal jednou pro všechny aplikace |
| Zapamatovat si vlastní volbu návštěvníka | Přepnutí vydrží do příští stránky a pak se ztratí |
| Nastavit motiv dřív, než se stránka vykreslí | Bliknutí bílou při každém načtení, přesně to, co lidi vyhání |
| Ohlásit motiv prohlížeči přes color-scheme | Formulářová pole, posuvníky a datumové výběry zůstanou světlé v tmavém webu |
| Barvy jen přes tokeny, nikde natvrdo | Jedna komponenta zůstane bílá a rozbije celou stránku |
| Loga a obrázky s průhledným pozadím | Černé logo na černém pozadí, bílý obdélník uprostřed tmavé stránky |
| Snímky obrazovky a fotky ztlumit nebo prolnout | Fotka svítí jako reflektor a přebije text |
| Grafy a ikony z tokenů, ne z pevných barev | Graf v tmavém režimu zmizí, protože byl kreslený na bílou |
| Zkontrolovat kontrast v obou motivech | Tmavý režim vypadá elegantně a nesplňuje přístupnost |
| Tisk a PDF nechat vždy světlé | Návštěvník vytiskne černou stránku a spotřebuje toner |
| Myslet na e-maily z webu | Poštovní klient si obrátí barvy sám a šablona se rozpadne |
Poslední řádek není okrajový. Podle měření Litmusu bylo v roce 2022 v průměru 35 procent otevření e-mailů v tmavém režimu, protože poštovní klienti barvy obracejí samy a často špatně. Potvrzení objednávky, které dorazí jako černý text na černém pozadí, je stejná ztráta jako rozbitý web.
Dobrá zpráva je, že technicky to není nic exotického. Dotaz prefers-color-scheme, kterým se čte volba ze systému, je široce dostupný od ledna 2020. Není to novinka ani experiment, je to standard, který má šest let.
Kde se to nejčastěji rozbije
Tohle nejsou teoretické chyby. Je to seznam toho, co u tmavých režimů opravdu vídám a co jsem si částečně odbyl sám.
- Bliknutí světlou při načtení. Motiv se nastaví až po spuštění JavaScriptu, takže na okamžik svítí bílá. Řeší to malý skript, který běží ještě před vykreslením stránky.
- Motiv se ztratí při přechodu na jinou stránku. Tuhle jsem měl na tomhle webu a stála mě půl dne: motiv zapisuje do značky html skript mimo React, a jakmile React na téže značce změní cokoliv jiného, například jazyk, zápis zmizí a web spadne do světlé.
- Čistě černá a čistě bílá. Maximální kontrast je přesně to, co u astigmatismu způsobuje halaci. Tmavý režim má být velmi tmavá barva a velmi světlý text, ne krajní hodnoty.
- Jedna komponenta s natvrdo zapsanou barvou. Objeví se za měsíc, obvykle v košíku nebo ve formuláři, tedy tam, kde to bolí nejvíc.
- Obrázky s bílým pozadím. Nejčastěji loga partnerů a snímky obrazovky.
- Kontrast obětovaný kráse. Šedý text na tmavě šedé vypadá v návrhu klidně a v provozu je nečitelný.
Kontrast se počítá, neodhaduje
Žádná norma po vás tmavý režim nechce. Co po vás chce, je kontrast textu vůči pozadí, a ten platí v každém režimu, který vydáte. Přístupnost podle WCAG požaduje u běžného textu poměr aspoň 4,5 ku jedné.
Tady jsou naměřené hodnoty tmavého režimu tohohle webu. Nejsou z odhadu, jsou spočítané z barev, které web opravdu používá.
Kontrast v tmavém režimu tohoto webu
| Popis | Hodnota |
|---|---|
| Hlavní text na pozadí | 16,8 |
| Značková barva na pozadí | 8,7 |
| Text na tlačítku | 8,5 |
| Tlumený text na pozadí | 8,3 |
| Nejtlumenější text na pozadí | 5,8 |
| Požadavek WCAG AA na běžný text | 4,5 |
Smysl toho grafu není chlubení. Je v tom, že tohle číslo umí spočítat kdokoliv a u kteréhokoliv webu, takže se nedá obejít slovy. Když někdo tvrdí, že jeho tmavý režim je přístupný, dá se to ověřit za dvě minuty.
Fotky a grafika: místo, kde tmavý režim pozná laik
O barvách textu se mluví často, o obrázcích skoro vůbec. Přitom právě tam tmavý režim nejčastěji vypadá jako nedodělek.
Fotka nafocená v ateliéru na bílém pozadí svítí uprostřed tmavé stránky jako reflektor. Logo partnera v černé variantě zmizí. Snímek obrazovky ze světlé aplikace přebije všechno kolem sebe. A graf nakreslený pevnými barvami se ztratí, protože byl navržený na bílou.
Řešení není fotky vyměnit za tmavší. Řešení je zacházet s nimi jako s částí motivu:
- Prolnutí s pozadím. Na tomhle webu se fotky ve světlém režimu prolínají násobením a v tmavém rozjasněním, k tomu se mění jejich sytost a průhlednost. Jedna fotka tak sedí do obou motivů a nikde nesvítí do očí.
- Loga v průhledném formátu a ve dvou variantách tam, kde jedna nestačí.
- Snímky obrazovky ztlumit nebo je v tmavém režimu podložit rámečkem, aby nepůsobily jako díra ve stránce.
- Grafy kreslit z tokenů. Grafy v článcích na tomhle webu nemají jedinou pevnou barvu, takže se v obou motivech překreslí samy. Ověřit si to můžete přepnutím motivu přímo tady na grafech výše.
Co chtít po dodavateli, když si web objednáváte
Nemusíte umět CSS, abyste si tuhle část ohlídali. Stačí zadat šest vět do poptávky a pak si je po dodání ověřit.
| Co požadovat v zadání | Jak si to ověřit |
|---|---|
| Web respektuje nastavení motivu v systému | Přepnout režim v telefonu a otevřít web |
| Přepínač motivu na webu a zapamatování volby | Přepnout, projít na jinou stránku a vrátit se |
| Žádné bliknutí při načtení | Načíst stránku znovu a sledovat první okamžik |
| Kontrast nad 4,5 v obou motivech, doložený výpočtem | Vyžádat si tabulku hodnot, ne slovní ujištění |
| Obrázky, loga, grafy a formuláře řešené v obou motivech | Projít formulář a stránku s logy v tmavém režimu |
| Tisk a e-maily zůstávají čitelné | Vytisknout stránku do PDF a otevřít potvrzovací e-mail v tmavém klientovi |
Kdo tyhle body v nabídce odmítne nebo je označí za příplatek, dává tím najevo, že web nestaví na tokenech. To je informace i o všem ostatním, co s ním budete řešit.
Jak to řeším já
Aby to nebylo jen teoretické, tady je konkrétní postup, který používám, a jsou v něm i dvě věci, které jsem se naučil chybou.
- Barvy jen jako tokeny. Každá barva je pojmenovaná na jednom místě a existuje v obou motivech. Komponenta nikdy nezná konkrétní barvu, zná jen její jméno. Druhý motiv je pak druhá sada hodnot, ne druhá sada souborů.
- Motiv se nastaví před vykreslením. Krátký skript v hlavičce přečte uloženou volbu, případně nastavení systému, a zapíše motiv dřív, než se stránka vykreslí. Bez toho blikne bílá.
- Volba přežije i přechod na jinou stránku. Tohle je ta chyba, kterou jsem si odbyl sám: motiv zapisuje do značky html skript mimo React a při změně jazyka ho React přepsal. Řeší to obnovení volby při každé změně adresy.
- Kontrast se počítá, ne odhaduje. Nová barva musí projít proti pozadí v obou motivech, jinak se nepoužije. Čísla z toho výpočtu jsou v grafu výše.
- Fotky, grafy a formulářové prvky se řeší zvlášť, protože právě tam se tmavý režim nejčastěji rozpadne.
Jak si to na svém webu ověříte za pět minut
Nepotřebujete k tomu vývojáře ani nástroje. Stačí telefon a chvíle klidu.
- 1Zapněte si v telefonu tmavý režim a otevřete svůj web. Když zůstane bílý, web volbu ze systému vůbec nečte.
- 2Načtěte stránku znovu a sledujte první okamžik. Když blikne bílá a pak zčerná, motiv se nastavuje pozdě.
- 3Přejděte na jinou stránku a zpátky, přepněte jazyk, pokud ho máte. Motiv musí vydržet.
- 4Projděte formulář: pole, výběr data, posuvník. Světlé prvky v tmavé stránce prozradí chybějící color-scheme.
- 5Najděte na webu logo partnera, snímek obrazovky a graf. Tohle jsou tři místa, kde tmavý režim padá nejčastěji.
- 6Dejte stránku vytisknout do PDF. Má vyjít světlá, ne černá.
Když z toho vyjde, že web tmavý režim nemá vůbec, není to katastrofa. Je to rozhodnutí, které se dá udělat vědomě. Katastrofa je tmavý režim udělaný napůl, protože ten odradí i lidi, kteří by se světlou verzí neměli problém.
Kolik to stojí
Odpověď je nepříjemně rozdělená na dvě části a záleží jen na tom, jak je web postavený uvnitř.
Když je web postavený na barevných tokenech, tedy když je každá barva pojmenovaná na jednom místě a komponenty ji jen používají, je druhý motiv práce na hodiny. Přidá se druhá sada hodnot a projde se kontrast.
Když má web barvy zapsané natvrdo v jednotlivých komponentách, a tak vypadá většina šablonových webů, je to přepis stylů celého webu a hledání v desítkách souborů. Proto se u hotových webů tmavý režim tak často nedodělá: nezačalo se u něj.
U webů, které stavím, je to součást návrhu od začátku. Ne proto, že by to byla nadstandardní služba, ale proto, že tokeny se stejně dělají a druhý motiv je pak jen druhá sada čísel. Ověřit si to můžete hned: přepínač je v hlavičce téhle stránky a motiv vydrží i po přechodu na jinou stránku a po přepnutí jazyka.
Časté otázky
Musí mít web tmavý režim?
Žádný předpis to nenařizuje. Praktický důvod je jiný: velká část lidí má tmavý režim zapnutý v systému a světlý web jim v šeru svítí do očí. Zároveň platí opak, protože dvěma z pěti dospělých s astigmatismem se bílý text na černé čte hůř. Správná odpověď proto není jeden režim, ale volba a respektování nastavení systému.
Je tmavý režim zdravější pro oči?
Není, a je to nejrozšířenější mýtus na tohle téma. V měřeních vychází u lidí s běžným viděním lépe světlý režim, a to i v noci. Tmavý režim pomáhá lidem se zákalem oční čočky a se světloplachostí a snižuje oslnění v šeru; to jsou dobré důvody, ale nejsou to důvody zdravotní pro všechny.
Šetří tmavý režim baterii?
Na OLED displeji ano, ale při jasu, na jakém lidé telefon běžně mají, jde o 3 až 9 procent spotřeby displeje. Znatelných 39 až 47 procent se ušetří až při stoprocentním jasu. Snížení jasu na polovinu přitom sníží spotřebu displeje zhruba desetinásobně bez ohledu na režim.
Co je prefers-color-scheme?
Dotaz v CSS, kterým web přečte, jestli má člověk v systému nastavený světlý nebo tmavý režim. Je široce dostupný od ledna 2020 a je to standardní způsob, jak se web zeptá na volbu, kterou uživatel už jednou udělal.
Proč můj web při načtení blikne bílou?
Protože se motiv nastavuje až po spuštění JavaScriptu. Řeší to krátký skript, který běží ještě před vykreslením a nastaví motiv podle uložené volby nebo podle systému. Bez toho vidí každý návštěvník v tmavém režimu záblesk světlé při každém načtení.
Má být tmavý režim černý?
Neměl by být čistě černý s čistě bílým textem. Maximální kontrast způsobuje u astigmatismu halaci, tedy světélkování a rozostření písmen. Používá se velmi tmavá barva pozadí a světlý, ale ne bílý text, a kontrast se kontroluje výpočtem.
Jak poznám, že je tmavý režim udělaný pořádně?
Šesti zkouškami: nečeká na JavaScript a nebliká, drží se při přechodu mezi stránkami i při přepnutí jazyka, formulářové prvky jsou tmavé taky, loga a snímky obrazovky nemají bílé pozadí, grafy jsou vidět a tisk vyjde světlý. A kontrast textu je nad 4,5 ku jedné, což se dá spočítat.
Kolik stojí doplnit tmavý režim na hotový web?
Když je web postavený na barevných tokenech, jsou to hodiny práce. Když má barvy zapsané natvrdo v jednotlivých komponentách, je to přepis stylů celého webu a bývá to dražší než jiné úpravy, které vypadají složitěji. U webů, které stavím, je druhý motiv součástí návrhu od začátku.
Shrnutí
- Světlý ani tmavý režim nevyhrává. Vyhrává volba, protože každý z nich je pro část lidí nepoužitelný.
- U běžného vidění vychází v měřeních lépe světlý režim, a to i v noci. Tvrzení, že tmavý režim je zdravější, měření nepodporují.
- Tmavý režim pomáhá lidem se zákalem čočky a se světloplachostí, a vadí lidem s astigmatismem, kterých je mezi dospělými 40 procent.
- Baterii tmavý režim šetří jen málo, pokud nemáte displej na plný jas. Jas rozhoduje mnohem víc.
- Umět tmavý režim znamená jedenáct věcí, ne jednu barvu pozadí. Nejčastěji chybí nastavení motivu před vykreslením, tmavé formulářové prvky a kontrola kontrastu.
- Kontrast se v obou motivech počítá, ne odhaduje. Na tomhle webu je nejnižší hodnota 5,8 v tmavém a 5,6 ve světlém, tedy nad požadavkem 4,5.
Chcete web, který obojí umí pořádně
Přepínač v hlavičce téhle stránky je funkční, motiv vydrží i po přechodu na jinou stránku a po přepnutí jazyka a kontrast v obou motivech je spočítaný, ne odhadnutý. Přesně tak stavím i weby klientům.
Napište mi, co řešíte, a projdeme to. Když z toho vyjde, že vám tmavý režim nepřinese nic a jsou důležitější věci, řeknu to.
Nezávazná poptávka, co všechno je součástí práce nebo ceník po položkách.
Zdroje
- Nielsen Norman Group: Dark Mode vs. Light Mode, Which Is Better?
- Hashemi a kol.: Global and regional estimates of prevalence of refractive errors, metaanalýza
- American Migraine Foundation: Photophobia and Migraine
- Purdue University: měření úspory tmavého režimu na OLED displejích
- Litmus: podíl otevření e-mailů v tmavém režimu
- MDN: prefers-color-scheme