Tmavý režim na webe: kedy sa oplatí a ako ho urobiť, aby sa dalo čítať
Kedy tmavý režim pomáha a kedy nie, šesť vecí, ktoré treba zvládnuť (kontrast, pozadie, logo, tiene, tlačidlá, formuláre), prepínač alebo automatika a kontrolný zoznam s 8 bodmi.
This article is currently only available in Slovak.
- Tmavý režim sa oplatí tam, kde ho ľudia využijú (večer, pri slabom svetle, v aplikáciách používaných dlho, na displejoch OLED); pri dlhých textoch ho ponúknite ako voľbu, nie ako jedinú možnosť.
- Aby sa dal čítať, treba zvládnuť kontrast (text aspoň 4,5 : 1, veľký text a prvky rozhrania aspoň 3 : 1), nečisto čierne pozadie, svetlú verziu loga, upravené obrázky, odlíšenie vrstiev bez tieňov a čitateľné formuláre.
- Dobre funguje kombinácia automatiky a prepínača v hlavičke so zapamätanou voľbou, a pred spustením prejdite kontrolný zoznam s 8 bodmi v článku.
Tmavý režim je vzhľad webu s tmavým pozadím a svetlým textom, ktorý sa ponúka popri bežnom svetlom. Oplatí sa tam, kde ho ľudia využijú: pri používaní večer, pri slabom svetle, v aplikáciách, ktoré sa používajú dlho, a na telefónoch s displejom OLED (displej, kde každý bod svieti sám, takže tmavé body nesvietia). Nie je nutný pre každý web a pri dlhých textoch ho ponúknite ako voľbu, nie ako jedinú možnosť. Ak ho robíte, musí sa dať čítať, a to znamená kontrast, správne farby a upravené logo a obrázky.
Kedy tmavý režim pomáha
- Večer a pri slabom svetle. Veľká biela plocha v tmavej miestnosti oslňuje, preto mnohí ľudia večer uprednostňujú tmavé rozhranie. Týka sa to najmä aplikácií, objednávkových systémov alebo prehľadov, ktoré sa otvárajú aj po práci.
- Displeje OLED. Pri OLED sa tmavé body svietia málo alebo vôbec, preto môže tmavé rozhranie na telefóne šetriť batériu. Rozdiel závisí od zariadenia a jasu, nepočítajte s ním ako s hlavným dôvodom.
- Fotky a vizuálny obsah. Portfólio fotografa, galéria alebo video na tmavom pozadí nechajú vyniknúť farby obrázkov.
- Dlhé používanie. Pri nástrojoch, v ktorých ľudia trávia hodiny (správa objednávok, prehľady), je voľba medzi režimami bežnou súčasťou.
Kedy tmavý režim nepomáha
- Dlhé texty. Pri článkoch a dlhých popisoch sa niektorým ľuďom svetlý text na tmavom pozadí číta horšie než tmavý text na svetlom. Ak je na webe veľa čítania, nenúťte tmavý režim, ponúknite voľbu.
- Web, ktorý ľudia otvárajú rýchlo a hlavne cez deň. Otváracie hodiny, telefón, mapa. Autoservis alebo ordinácia z tmavého režimu veľa nezískajú.
- Keď nemáte kapacitu urobiť ho poriadne. Zle spravený tmavý režim (nečitateľné logo, sivý text, biele obdĺžniky z obrázkov) je horší než žiadny. Radšej jeden dobre spravený svetlý vzhľad.
Nie je to otázka módy, ale toho, kto web používa, kedy a ako dlho. Ak neviete, pozrite sa do návštevnosti: ak veľa ľudí prichádza večer a z mobilu, má tmavý režim viac zmyslu.
Chcete to mať hotové bez starostí? Pošlite nám pár viet o zadaní a cenovú ponuku dostanete do 48 hodín, zadarmo a bez záväzkov.
Čo treba zvládnuť, aby sa dalo čítať
Tmavý režim nie je obrátený svetlý režim. Každý prvok treba posúdiť zvlášť. Šesť miest, na ktorých sa to najčastejšie láme:
- Kontrast. Platia rovnaké pravidlá ako pri svetlom režime. Podľa WCAG (medzinárodné pravidlá prístupnosti webu) 2.x na úrovni AA, čo je bežný cieľ pri weboch, má bežný text kontrast aspoň 4,5 : 1 a veľký text (cca 24 pixelov alebo 19 pixelov tučne a viac) aj prvky rozhrania, napríklad okraje políčok, aspoň 3 : 1. Kontrast farieb je pomer jasu textu a pozadia. Overte ho v oboch režimoch zvlášť, sivý text na tmavom pozadí sa rýchlo stratí. Pomôže kalkulačka kontrastu dvoch farieb.
- Nečisto čierne pozadie. Čisto čierne pozadie s čisto bielym textom je ostré a text sa môže rozlievať. Zvoľte tmavosivé alebo tmavomodré pozadie a text jemne stlmenej bielej. Kontrast musí stále spĺňať limity.
- Logo a obrázky. Logo s tmavým písmom na tmavom pozadí zmizne, potrebujete jeho svetlú verziu. Fotky produktov na bielom pozadí vytvoria na tmavej stránke biele obdĺžniky, riešením je priehľadné pozadie alebo jemný rámik. Skontrolujte aj ikony, grafy a ilustrácie s tmavým textom.
- Tiene. Na tmavom pozadí tieň nie je vidieť. Karty a okná oddelíte o niečo svetlejším odtieňom plochy alebo jemným okrajom.
- Farby tlačidiel. Veľmi sýte farby (jasná červená, limetková) pôsobia na tmavom pozadí ostro. Zjemnite ich a overte kontrast textu na tlačidle. Stavy ako nad kurzorom, vypnuté a zameranie klávesnicou musia byť stále rozlíšiteľné.
- Formuláre. Okraje políčok majú mať kontrast aspoň 3 : 1, napísaný text musí byť jasný a popisky nesmú zosivieť. Chybová hláška má byť text s ikonou, nielen červená farba. Formulár je miesto, kde sa dopyt buď odošle, alebo nie.
Prepínač, alebo automatika
Pri tmavom režime sa rozhodujete, kto vyberá: návštevník, systém alebo čas. Tri možnosti:
| Možnosť | Ako to funguje | Plus | Mínus |
|---|---|---|---|
| Len podľa systému | Prehliadač povie webu, aký režim má návštevník zapnutý v zariadení. | Nič nemusí klikať, rešpektuje sa jeho nastavenie. | Nedá sa zmeniť len pre váš web. |
| Len prepínač | Návštevník si vyberie klikom. | Má plnú kontrolu. | Mnohí ľudia prepínač prehliadnu a zostane predvolený vzhľad. |
| Kombinácia | Predvolene automaticky, v hlavičke prepínač, voľba sa zapamätá. | Pokrýva obe skupiny. | Viac práce pri návrhu a testovaní. |
Dobre funguje kombinácia. Automatika (podľa systému alebo podľa času) rozhodne za tých, ktorí nič neklikajú, prepínač dá slovo ostatným a voľba sa musí zapamätať, aby ju nemuseli meniť pri každej návšteve.
Prepínač je tlačidlo ako každé iné, preto musí byť dobre vidieť a dobre sa trafiť. Ikona slnka a mesiaca sama nestačí, pridajte k nej popis (napríklad „Tmavý režim“), aby bolo jasné, čo robí. Cieľ kliknutia má mať podľa WCAG 2.2 aspoň 24 × 24 CSS pixelov, pri dotykovom ovládaní sa odporúča okolo 44 × 44 bodov (Apple) a 48 × 48 dp (Android Material). Pozor aj na „bliknutie“: ak sa stránka najprv zobrazí svetlá a až potom prepne na tmavú, návštevník zažije záblesk. Programátor to vyrieši tak, že režim nastaví skôr, než sa stránka vykreslí.
Príklad z našej praxe: web reborncreative.sk
Náš web má svetlý aj tmavý režim s prepínačom v hlavičke. Ak si návštevník nič nezvolil, riadi sa web časom: od 7:00 do 19:00 je svetlý, inak tmavý. Ručná voľba platí 7 dní, takže sa nemusí meniť pri každej návšteve. Je to časové pravidlo, nie nastavenie systému. Druhá cesta, systémové nastavenie, je rovnako použiteľná a rešpektuje to, čo si človek už vybral vo svojom zariadení. V oboch prípadoch je prepínač na očakávanom mieste, v hlavičke.
Tri príklady z malých firiem
- E-shop s oblečením. Fotky produktov sú na bielom pozadí. V tmavom režime vytvoria biele obdĺžniky, ktoré rozbijú stránku. Riešenie: fotky s priehľadným pozadím, alebo nechať kartu produktu svetlú aj v tmavom režime. Rozhodnutie závisí od fotiek, ktoré máte.
- Reštaurácia. Galéria jedál na tmavom pozadí vyzerá dobre, ale denné menu je dlhý text. Tmavý režim preto dáva zmysel na úvode a v galérii, no menu musí byť čitateľné v oboch režimoch, najmä na mobile, vonku aj večer.
- Účtovníčka. Web s vizitkou, službami a kontaktným formulárom. Návštevníci chodia cez deň a hľadajú telefón. Tmavý režim im nič nepridá, pridá však prácu a riziko chýb. Tu je lepšie nechať jeden vzhľad a venovať čas kontrastu a formuláru.
Kontrolný zoznam: 8 bodov
- Kontrast bežného textu je v oboch režimoch aspoň 4,5 : 1, veľkého textu a prvkov rozhrania aspoň 3 : 1.
- Pozadie nie je čisto čierne a text nie je čisto biely, alebo ste to vedome posúdili.
- Logo má verziu čitateľnú na tmavom aj svetlom pozadí.
- Fotky, ikony a grafy sú čitateľné: žiadne biele obdĺžniky, žiadny tmavý text na tmavom.
- Karty, menu a okná sa oddeľujú odtieňom alebo okrajom, nie len tieňom.
- Hlavné tlačidlo vyniká a stavy nad kurzorom, vypnuté a zameranie klávesnicou sú viditeľné.
- Formuláre majú viditeľné okraje polí, čitateľné popisky a chyby nielen farbou.
- Prepínač je v hlavičke, jasne označený, voľba sa zapamätá a úvod, služby, kontakt a formulár ste prešli v oboch režimoch na mobile aj počítači.
Ako tmavý režim vyskúšať
Otvorte web v tmavom režime na telefóne večer, znížte jas na polovicu a prejdite úvod, služby, kontakt a formulár. Ak niečo prečítate len po zmraštení očí, opravte to. Potom dajte web pozrieť dvom ľuďom, ktorí ho nepoznajú, a zapíšte, kde sa zastavili. Rovnaký postup funguje aj pri svetlom režime, preto ho skúste v obidvoch.
Kedy stačí jednoduchšie riešenie a kedy odborník
Ak je web malý (vizitka, pár podstránok, málo obrázkov), tmavý režim nemusíte robiť vôbec. Svetlý vzhľad s dobrým kontrastom je lepšia investícia než polovičatý tmavý. Hotové doplnky pre WordPress, ktoré farby len automaticky obrátia, môžu fungovať pre jednoduchý blog, no logo, fotky a formuláre treba zvyčajne dolaďovať ručne.
Odborníka je dobré osloviť, keď má web e-shop, objednávkový formulár, veľa fotiek, alebo keď stavíte appku. Farby sa vtedy oplatí viesť ako tokeny (pomenované hodnoty) v dizajnovom systéme, aby sa dali prepínať na jednom mieste. Čitateľnosť v tmavom režime je jedna z vecí prístupnosti webu, teda toho, aby web mohol používať každý.
Časté otázky
Má mať každý web tmavý režim?
Nie. Dáva zmysel pri aplikáciách, prehľadoch a webe s fotkami, ktoré ľudia používajú večer. Malý web s krátkymi textami bez neho funguje dobre, dôležitejší je dobrý kontrast vo svetlom vzhľade.
Šetrí tmavý režim batériu?
Len na displejoch OLED, kde tmavé body svietia málo alebo vôbec. Rozdiel závisí od zariadenia, jasu a obsahu. Na bežných displejoch LCD (s podsvietením) sa batéria týmto nešetrí.
Je tmavý režim lepší pre oči?
Všeobecne sa to povedať nedá. Niekto ho večer vníma ako príjemnejší, niekomu sa v ňom dlhý text číta horšie. Preto ponúknite voľbu a nenúťte jeden vzhľad všetkým.
Prepínač, alebo systémové nastavenie?
Dobre funguje kombinácia oboch: predvolený režim podľa systému alebo času a v hlavičke prepínač, ktorý prebije automatiku a zapamätá sa.
Chcete tmavý režim na svojom webe?
Tmavý aj svetlý vzhľad vrátane loga, formulárov a kontroly kontrastu robíme v službe Web a aplikácie. Cena závisí od rozsahu, ponuku pošleme do 48 hodín. Napíšte nám cez kontaktný formulár.
Want the same for your brand?
Write us a few sentences about your plans and we'll get back to you with a proposed approach within a few hours on a working day.