Tmavý režim: co říká výzkum a kdy ho nepoužívat

Co o tom skutečně víme

Nejcitovanější shrnutí výzkumu na tohle téma má Nielsen Norman Group. Jeho závěry se dost liší od toho, co se o tmavém režimu píše:

Takže: „tmavý režim je šetrnější k očím“ je tvrzení, pro které v tom přehledu podklad není. Na únavu očí vyšel rozdíl neprůkazně.

Jedna věc mluví pro tmavý režim a je potřeba ji uvést férově i s jejím omezením: studie z roku 2018 našla, že po hodině čtení ve světlém režimu se ztenčila cévnatka, což je změna spojovaná s krátkozrakostí, zatímco v tmavém režimu naopak zesílila. Měla ale sedm účastníků. To je zajímavý signál, ne důkaz.

Proč je tenhle web přesto tmavý

Doporučení z toho přehledu zní: nedělat tmavý režim výchozí pro širokou veřejnost a nabídnout ho jako volbu. Tenhle web to nedodržuje a nebudu předstírat, že ano.

Důvod je v tom, co je na něm obsahem. Portfolio ukazuje obrázky — fotky, grafiky, snímky webů. Na tmavém podkladu je nic neruší a oko jde rovnou na ně; na světlém soupeří s plochou kolem sebe. Není to argument o zdraví očí, je to argument o tom, co má být vidět.

Druhý důvod je upřímnější: moje fotky jsou nasvícené magentou a modrou a na kostěném papíře vypadají jako omyl. Web je postavený kolem nich.

Když už tmavý, tak pořádně

1. Ne čistě bílá na čistě černé

   Dá 21 : 1, což zní jako ideál a není. Příliš tvrdý rozdíl se na displeji rozpíjí a text působí, jako by zářil. Tenhle web má podklad #121110 a text #EDE9E1, dohromady 15,6 : 1. Pořád výrazně nad hranicí a čte se to klidněji.

2. Tenké řezy písma nefungují

   Světlý text na tmavém podkladu opticky ztloustne. Řez, který je na bílé elegantní, je na černé rozmazaný. V tmavém režimu se obvykle sahá o stupeň níž, ne výš.

3. Barvy se musí přeladit, ne převrátit

   Značková barva, která drží na bílé, bývá na černé buď nečitelná, nebo křičí. Proto má tenhle web dvě verze akcentu — jednu pro světlé plochy, druhou pro tmavé. Není to stejná barva se sníženou průhledností; jsou to dvě různé hodnoty.

4. Průhlednost je past

   Bílá na 55 % vypadá v kódu nevinně. Na černé je pořád v pořádku, na barevném pruhu klesne pod hranici. Jediný způsob, jak to vědět, je změřit to na vykreslených pixelech — mně to na tomhle webu našlo chybu, kterou jsem denně viděl.

5. Obrázky potřebují okraj

   Fotka s tmavým pozadím splyne s plochou stránky. Pomůže jemná linka nebo zaoblený rám, aby bylo poznat, kde obrázek končí.

Jak vypadá kontrast na tomhle webu

Hodnoty nejsou odhad. Počítá je skript, který běží před každým buildem a při podkročení hranice build shodí.

Tmavý web si vybírám, když je obsahem obrázek. Když je obsahem text, který někdo bude číst dvacet minut, dělám ho světlý — i když tmavý vypadá na ukázce líp. To je rozdíl mezi návrhem pro klienta a návrhem pro vlastní portfolio.

Marian Bendák

Technicky to není velká práce

Prohlížeč umí říct, co má návštěvník nastavené v systému, a stránka se podle toho přepne sama. Dvě věci se na to zapomínají:

• Nastavit barvu pro prohlížečovou lištu, jinak zůstane světlý pruh nad tmavou stránkou.
• Myslet na tisk. Tmavá stránka vytištěná tak, jak je, spolkne půl kazety. Tiskový styl se píše zvlášť a trvá to deset minut.

Když web nabízí přepínač, má si volbu pamatovat a výchozí stav má vycházet z nastavení systému — ne z toho, co se líbí designérovi.

Co s tím dál

Rozhodnutí mezi tmavým a světlým není otázka vkusu, ale toho, co je na stránce obsahem. Proberme to na konzultaci zdarma. Jak vypadají hotové weby, je v portfoliu; proč na tomhle webu padlo rozhodnutí pro tmavou, rozebírám v článku o jeho vzniku.