“Dark mode” in dostopnost

“Dark mode” postaja vse popularnejši in vse pogosteje ga srečamo v praksi. Trend je postal tako aktualen, da lahko srečamo spletna mesta, ki so v celoti narejena v temnejših barvah. Ne smemo pa pozabiti, da je dostopnost pomembna tudi v “dark mode” obliki.

Kaj je “dark mode”

“Dark mode” je možnost uporabe različnih tem na računalniku, v tem primeru temne oblike. V praksi to pomeni, da se svetle barve spremenijo v temne in temne v svetle. Če tega ne upoštevamo sistem naredi prilagoditve sam, kar pa v praksi ni vedno dobro. Uporabo tem si nastavijo uporabniki sami, popularnejše pa so na mobilnih napravah.

Poleg lepega oblikovanja naj bi “dark mode” oblika bila prijaznejša do oči, kot svetlejše oblike. Ampak je v resnici tudi tako? Velikokrat se zgodi, da je prevelik kontrast npr. prava črna barva (#000000) in bela barva (#ffffff) velikokrat preveč naporni za oči.

Pri pripravi “dark mode” oblikovanja uporaba obstoječih barv oz. invertiranje slednjih ni vedno prava odločitev. Namreč obračanje barv lahko naredi večje napore za oči zaradi visokih kontrastov ali naredi vsebine težko berljive ob slabi osvetlitvi. V določenih primerih pa lahko celo podre naš design ali hierhija spletne strani oz. informacij.

“Dark mode” oblika na blogu Pomagalnik

Na blogu sem uporabil za “dark mode” obliko, ki ima bolj primerne odtenke za uporabnikovo oko. Namesto črnih odtenkov sem izbral bolj temno sive in namesto bele barve bolj svetlo sive barve.

Uporabljene barve v “dark mode” obliki:

  • ozadje strani #2D2D2D
  • barva besedila #9e9e9e
    Kontrast na temnem ozadju v razmerju: 5.14:1
  • barva naslovov #ededed
    Kontrast na temnem ozadju v razmerju: 5.14:1
  • barva dodatnih oken #383b40
    Kontrast nna besedilu #ededed v razmerju: 9.6:1

Na podlagi rezultatov orodja “Contrast Checker” je uporaba takšnih barv več kot dovolj za dostopnost bloga. Tudi sam izgled je veliko boljši v primerjavi s klasično inverzijo barv. Določene SVG grafike sem barval s pomočjo CSS filtrov, nekatere slike pa sem s pomočjo “prefers-color-scheme: dark” zamenjal v drugo sliko, prilagojeno “dark mode” načinu. Osnovna ideja je bila kar se da optimalno in hitro priti do dobrih rezultatov.

Dodatno barvo na temo “dark mode” in dostopnosti

Komentiraj


*