WEBVTT

1
00:00:00.560 --> 00:00:13.320
What's up everyone? Welcome to Next in Dev, a podcast where I'll cover topics and news about modern web dev technology. On today's episode, I'm going to address a comment that I get quite often on my editor's theme.

2
00:00:13.620 --> 00:00:24.650
I won't be talking about any company or code or anything in particular like that, but I am going to cover a very important topic that we should be talking about as web developers, and that's accessibility.

3
00:00:25.040 --> 00:00:29.959
Specifically, I'm going to touch on the importance of dark mode and light mode.

4
00:00:30.000 --> 00:00:42.800
Dark mode has existed for a long time in web development, but it wasn't until about 2019 that browsers had widespread support for it through the CSS media query prefers color scheme.

5
00:00:43.040 --> 00:00:54.560
That means that any dark mode color scheme from before 2019, if it existed at all, was based on cookies, local storage, or a user's preferences stored in a database.

6
00:00:54.840 --> 00:01:01.120
That does mean, though, that not many sites implemented dark mode based on a user's preferences.

7
00:01:01.200 --> 00:01:10.560
And if we're honest, it was more or less treated as an afterthought, and sometimes today it's still treated as an afterthought. Dark mode has some real benefits, though. I'm not going to knock that.

8
00:01:10.600 --> 00:01:18.900
So it's great that now browsers and operating systems treat dark mode as a first-class feature now. So is dark mode important? Yes.

9
00:01:19.140 --> 00:01:31.060
In low light environments, dark mode can reduce the strain that our screens put on our eyes. Overall screen luminance and glare are reduced in dark mode, and this can prevent discomfort in dim settings.

10
00:01:31.310 --> 00:01:40.640
One's eyes may adjust more easily between a dark room and a dark screen. That said, this is only beneficial if that person is working at night or in a dark room.

11
00:01:40.900 --> 00:01:53.920
Black pixels consume less energy on OLED screens because they emit no light. That makes dark mode a power and battery-saving option for modern devices like mobile phones, laptop screens, TVs.

12
00:01:54.140 --> 00:02:06.140
In a lot of ways, dark mode just looks a lot cooler than light mode does. Yes, I understand that this is also just user preference, but there's just something about a dark background with light text that just works.

13
00:02:06.400 --> 00:02:15.700
While dark mode is important, we have to remember that light mode exists for a reason. One thing that many people don't consider is that light mode is an accessibility feature.

14
00:02:16.000 --> 00:02:28.049
Not everyone perceives content the same way, so to assume light mode is just altogether inferior is a UX mistake. There are a couple groups of people to consider where light mode is going to be preferred.

15
00:02:28.080 --> 00:02:41.420
For those with an astigmatism, like me, dark mode can get uncomfortable when used for too long. About half the US population has some sort of astigmatism according to a study done by the World Health Organization.

16
00:02:41.660 --> 00:02:57.190
An astigmatism can make a dark background with light text have what's called a halation effect or halo effect, which makes light text appear to have a glow or to be fuzzy, which is kind of how I perceive traffic lights at night without my glasses.

17
00:02:57.460 --> 00:03:01.700
People with dyslexia also have an easier time with light mode than they do dark mode.

18
00:03:01.740 --> 00:03:13.200
According to an article from the Bureau of Internet Accessibility, extreme contrast like pure white over pure black can cause legibility issues for those with dyslexia.

19
00:03:13.380 --> 00:03:19.240
Lighter backgrounds with an adequately contrasting darker text color is preferred for this population.

20
00:03:19.480 --> 00:03:27.410
It's best in general to avoid that pure black and pure white combination so many people of different varieties can enjoy your website as well.

21
00:03:27.460 --> 00:03:39.310
Just like light mode is an accessibility feature, dark mode is also an accessibility feature. The first population who really enjoys dark mode are going to be the ones who suffer from chronic migraines.

22
00:03:39.340 --> 00:03:47.300
Some people suffer from migraines that are caused by bright lights, so light mode can be a trigger event for their migraine. So I get it.

23
00:03:47.500 --> 00:03:55.910
In this case, many people are going to prefer to consume their content in dark mode. Another group of people are those who have a light sensitivity called photophobia.

24
00:03:56.049 --> 00:04:01.800
Dark mode tends to be easier on the eyes in normal circumstances when ambient light is low.

25
00:04:01.860 --> 00:04:11.340
This means at times like sundown or sunrise, or in rooms that have few lights or dim lights, dark mode could be the preferred way to consume content.

26
00:04:11.600 --> 00:04:18.180
If there's not a lot of light or it's dark outside, a dark theme may be more appropriate for your editing needs.

27
00:04:18.220 --> 00:04:29.520
There are peer-reviewed studies like one presented on nature.com that claim that reading in light mode might promote nearsightedness while reading in dark mode might prevent it.

28
00:04:29.530 --> 00:04:38.760
This is not a definitive claim at this point, though. But research does suggest that this is one benefit of dark mode. Now, with all of that to say, what should you do?

29
00:04:39.060 --> 00:04:49.800
Dark mode is a first-class feature now in browsers and operating systems, and it should be treated as such. Your dark mode theme should look just as good as your light mode theme, and vice versa.

30
00:04:50.100 --> 00:05:03.480
All the accessibility and contrast rules that you would normally put into your preferred theme should apply to the opposite theme so that everybody or as many people as possible can enjoy your website or your app.

31
00:05:03.680 --> 00:05:13.540
Consider people who rely on keyboards to interact with your website. Does your focus have sufficient contrast against your darker backgrounds? If not, then you have some work to do.

32
00:05:13.790 --> 00:05:24.120
A simple way to handle dark mode is to design with your user preference in mind. You ultimately want to provide the user with a way to interact with your site the way that they want to interact with it.

33
00:05:24.180 --> 00:05:34.500
It's important to support dark mode. It's also important to support light mode. It's also important to remember that a user's preference may also be an accessibility concern and should not be ignored.

34
00:05:34.740 --> 00:05:45.420
If you want to support dark mode, please do it. If you want to support light mode, I recommend it. However, if you're going to support either, always allow a way for your user to choose what they prefer.

35
00:05:45.720 --> 00:05:55.340
If you can't provide a toggle, theme provider, or a theme selector, then the simplest way is to design based on the prefers color scheme CSS media query.

36
00:05:55.360 --> 00:06:02.010
This way you're designing based on a user's browser's color preference. This is extremely easy to do even with CSS alone.

37
00:06:02.340 --> 00:06:12.320
Since you're able to target a user's preferences with just a few lines of CSS, you can easily design for multiple accessibility needs at once just using CSS.

38
00:06:12.620 --> 00:06:25.400
Tools like Tailwind CSS make this easy to do too with their modifiers that allow you to target based on light mode, dark mode, prefers contrast, reduced contrast, reduced motion, no motion, all of it.

39
00:06:25.460 --> 00:06:38.320
All of that's included with Tailwind CSS. It's up to you, my developer friends, to make your website or app as accessible to as many people as possible. The tools are at your disposal. So why do I use light mode?

40
00:06:38.920 --> 00:06:49.700
Because in environments with a lot of lights, like when the sun is out or in studio lights, I have a hard time reading and focusing on dark backgrounds with light text.

41
00:06:49.760 --> 00:06:55.220
In fact, especially in normal lighting situations, light mode is a relief to my astigmatism.

42
00:06:55.520 --> 00:07:02.740
When the sun starts to set earlier, my dark mode will kick in sooner, which will then be more comfortable for my eyes during that season.

43
00:07:02.980 --> 00:07:11.060
In the case of my IDE, though, I'm unable to switch my color theme based on who's watching the video, and that's unfortunate.

44
00:07:11.300 --> 00:07:17.220
Since that's the case, I need to use what's most comfortable for me, just as you need to use what's most comfortable for you.

45
00:07:17.460 --> 00:07:25.280
However, as I design, I'll keep in mind the people who have different accessibility needs than I do, and I hope you will too. Now, I wanna hear what you think.

46
00:07:25.340 --> 00:07:31.350
Leave a comment and I'll do my best, as I always do, to respond to all of them. But until then, I'll see you on the next one.