I am begging website owners to always provide a light mode.

[sashin@veganism.social]

@ghalldev @drahardja Is it important to have a toggle, or does making it respect the system theme almost always work?

[drahardja@sfba.social]

@sashin @ghalldev Either would be fine, since I keep my system in Light mode.

[zyd@yap.zyd.lol]

@drahardja Despite its name, dark reader has an invert option so you can easily and quickly force a light mode on sites that lack one.

[sashin@veganism.social]

@drahardja @ghalldev does this automatically open in light mode? https://sashin.dev

[drahardja@sfba.social]

@sashin @ghalldev Yes.

[arjache@toot.cat]

@drahardja Here’s what I wrote when I added automatic light mode support to my blog:

“This is something that improves accessibility, but there's also a practical reason: I myself use light mode. Like many folks with astigmatism, I find dark mode more difficult to read. […] I want a blog I can actually read even when my eyes get tired. And if it bothers me, there are almost certainly other people it bothers as well.”

Blog housekeeping

I've added a light theme to the blog's CSS which should be automatically selected if your system is set to use light mode. The original dark theme will be selected if your system is set to use dark mode. ...

badger trebuchet diagram no. 17 (arjache.com)

[drahardja@sfba.social]

@arjache Yay!

[zygmyd@toot.cat]

@drahardja

Oh huh, maybe that's why I prefer light mode. I did not know that about astigmatism, thank you.

[eniko@mastodon.gamedev.place]

@drahardja i have to use reader mode and if that's not available i'll try to set "page style > no style" in firefox and if that doesn't do it i just can't read it

[jernej__s@infosec.exchange]

@drahardja I always use dark mode, but override it with my own settings on probably 90% of sites that offer their own, because nearly all of them use white text on dark (or black) background, which is way too high contrast for me.

[vanuphantom@zug.network]

@drahardja
Heya Dave, I design a lot of websites and apps for my work. We usually design them for dark mode first, which means we often have design oversights in the light versions.

Are there any things we should keep in mind to make sure that the light versions are accessible to people like you?

[woe2you@beige.party]

@drahardja My website is so old I haven't got around to adding a dark mode yet, you're fine.

[nicholas@aklp.club]

New browser plugin idea unlocked.

[villapirorum@indieweb.social]

@drahardja

IMHO, every modern website should support both modes.

In my case, it's the light mode that my aging eyes can no longer tolerate (too bright: my eyes tire quickly).
And while many rightly criticize dark mode for too much contrast between white text and a black background, for me, it's the lack of contrast that too often prevents me from reading without resorting to manual zoom.

[villapirorum@indieweb.social]

@drahardja

Fortunately, today's CSS and `light-dark()` make supporting user preferences much easier than before.

However, while WCAG2 and APCA allow us to verify that the contrast is sufficient, what are the recommendations regarding excessive contrast?

[maleve@zeroes.ca]

@drahardja til I am not the only one this happens to

[drahardja@sfba.social]

@VanuPhantom I’m sure light-on-dark design has been discussed extensively since the days of print. I’m not a usability expert, but I can tell you what affects me personally.

I’m most sensitive to anything that look like bars: repeating strips of high contrast light against dark, like prison cell bars in old cartoons; these patterns cause severe afterimages, often lasting minutes.

My pet theory is that *light areas* in general cause afterimages for me overall. However, in light mode, the entire window is light, so it makes less difference because I basically get a diffuse, white-rectangle afterimage which doesn’t really interfere with details that I’m trying to focus on (it may reduce contrast somewhat in my brain but it’s fine). But in dark mode, the only bright things that cause afterimages are the fine detail (text), so as I move around these afterimages interfere severely against the new details I’m trying to read. A similar thing happens with bars when I’m in light mode.

[cherylgk@mastodon.social]

@drahardja Thanks so much for that post. I have the same problem.

[drahardja@sfba.social]

@VanuPhantom Body text fonts matter too. A font with tall counters and good variation between characters are easier to read for me. For serifs, I don’t like fonts that have very thin parts (e.g. Bodoni) for text because they tend to make the thicker parts look like bars. I prefer fonts like Schoolbook that have more modest thick/thin contrast, or Adelle that has basically uniform line widths.

[dannyman@sfba.social]

@drahardja 2c: the web browser should manage this.