Joel Borofsky

Nov 23, 2022

Dear UI/UX Developers - a word on light mode

I love to read articles from various news sources. In a previous life, I read all the time and paid attention to as much news as I could as it was pertinent to my career. However, I've found over the years that if I read too much online I'll get a headache. Apparently, it's not just me. Quite a few people complain that if they read too many articles online, their eyes begin to burn. Now that I'm a developer, the first thing I do when I open a page and feel like I'm staring into the sun is open my dev tools and inspect the color. More often than not, the background is set to #ffffff. Developers - please stop that.

While it's mostly known that you should never use absolute black on absolute white (and vice versa), it seems some developers take that as a sign that they can use one of them. The reality is for people with light sensitivity, it's usually best to avoid extremes. My own color choice uses Tailwind's slate-100 (#f1f5f9) as the backdrop with slate-900 (#0f172a) as the text color. This tends to lessen the eye strain and remove that burning feeling that you can get from reading too much.

Some other things to consider when picking colors:

Of course, no site is perfect and you're never going to please everyone. But there are enough complaints of burning retinas that, at this point, sites should be migrating away from extremes in their lights and darks and trying to find something that's a bit easier to look at.