loading...
Cover image for Dark Mode and webapps

Dark Mode and webapps

priteshusadadiya profile image Pritesh Usadadiya ・1 min read

We are seeing more and more products that offer a "dark mode" feature that turns look of your webpapp Dark and text light

The question i am wondering is that, Does it work better than normal color contrast ?

I see lot of people saying that it's better for the eyes. is it ? is there any scientific study behind this ?

As a developer how do you approach this ? I mean, What things you consider before making this feature available to make sure that it works well with other elements of your app ? (i.e. In a app where users can customize apps entire theme or portion of it. like, dev.to's profile theme)

As form the Accessibility point of view, how does it affect end users perception of an app, specially for visually impaired users for whom this can be instantly uncomfortable and hard to read.

Posted on by:

priteshusadadiya profile

Pritesh Usadadiya

@priteshusadadiya

Performance Engineer 🔥 | agile tester | 💡 Improving Products | 🔦 searching for 🐞 bugs | Love Coding in spare time 💻

Discussion

markdown guide
 

From an accessibility standpoint, from what I understand, it's not so much an issue of whether the background and text is dark or light as it is the contrast between the two. At a certain point, if the value of the text and background is too similar, it can make the text nearly impossible to read.

I've also heard that dark mode is a lot easier on the batteries of hand held devices.

 

it's not so much an issue of whether the background and text is dark or light as it is the contrast between the two

Agreed

I've also heard that dark mode is a lot easier on the batteries of hand held devices.

Well, that's new :)

 

Due to just about every new phone having AMOLED; dark backgrounds (more so completely blacked out) are actually huge battery savers

Thanks for the detail Hunter :)

 

I highly prefer dark themes over bright ones to the point that the first thing I do upon using any new site, app, etc. is to toggle it on. Personally, I find dark themes to be easier on my eyes especially when I'm staring at code all day long where else the typical bright white color gives me a headache. I also tend to browse the internet in low-light right before bed so the dark themes help me to relax. Adding on to that, I'll often avoid visiting certain sites altogether because they're too bright or I can't easily turn on the dark theme causing me to leave in frustration. Luckily for me, it seems as though dark themes or 'night modes' are becoming more common place on the web such as on YouTube or Reddit. From a user's perspective, I really appreciate being given this option even if my choices are limited to just light vs dark. As someone getting in to web development, I also appreciate it cause I think dark themes just look a whole lot cooler in addition to them being easier on my eyes.

 

good point Alexander. I too have brightness set to 60% at all times.(it's easier on the eyes 👀)

 

It depends on the medium, the surroundings, and the font-weight/size.

When the contrast between your surroundings and your screen is to high, it gets uncomfortable.

White on black is better readable on projectors, especially crappy ones. With black-on-white, the white area bleeds too much into the letters. With w-o-b the letters can "shine".

Also recent studies show, that white-on-black is healthier for the eye.

Personally, I prefer white-on-black for terminals and coding, black-on-white for reading and writing, except at night or dark rooms.

 

Interesting analogy Antonio. i guess personal preference matters a lot in this regard.
I was just reading something on Graphic Design

This was a take on by Graphic Design on Stack Exchange

Most studies have shown that dark characters on a light background are superior to light characters on a dark background (when the refresh rate is fairly high). For example, Bauer and Cavonius (1980) found that participants were 26% more accurate in reading text when they read it with dark characters on a light background.

Reference: Bauer, D., & Cavonius, C., R. (1980). Improving the legibility of visual display units through contrast reversal. In E. Grandjean, E. Vigliani (Eds.), Ergonomic Aspects of Visual Display Terminals (pp. 137-142). London: Taylor & Francis

Ok, 26% improvement – but why?

People with astigmatism (aproximately 50% of the population) find it harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the "deformed" lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye.