 Welcome to the Dark Side. We got cookies and a presentation about making Dark Mode accessible for web. I'm Angeet Schot van Herijnen and I've been an Ember Volunteer since 2018 Ember Comp. I'm the person in the Zoë costume, so if you were there back then, you might have hurt me. I've given Lightning Talks at Ember Fast and Talks at Ember Comp before. I married Nick Schot in August, making my name even longer and more complicated for everybody outside of the Netherlands. And I work in Groenlo at NEDAP, a company that does a lot of things. And I work there as a team coach where I help teams communicate and collaborate. You can find me all over social media on Instagram, Twitter, GitHub and of course on the Ember Discord. Let's get back on topic, making Dark Mode accessible for web. First, we're going to talk about how to make it accessible for you as a developer to implement the preferences for Dark Modes or Light Modes within your website. Secondly, we're going to talk about how to make it accessible for the user who's actually looking at your web page. When we're talking about Dark Mode and Light Mode, the first thing that comes into mind for developers is editors. Here we see an example of the Light Mode and Dark Mode themes from Visual Studio Code. CSS Tricks did a poll to check what the preferences of developers actually are and they found out that 37% of their respondents actually prefers Light Mode over Dark Mode. So it's actually a matter of taste and maybe a difference from situation to situation. But what about the web? Luckily in the web we can also cater to the preferences of our users. And I did so during HectoverFest 2021 for two Ember projects and I want to take you through how I did it for both of them. The first project is the ALF-wide Automation Tracker by Mel Sumner. You can see in here it has a great list of all potential accessibility violations that we might run into later. And now you can also look at it in a Dark Mode. The background got dark gray and we changed the purplish accent color to be yellow. The violations page with a ton of rows and columns and status indications is now dark gray, alternating rows with darker colors to make sure that the contrast of the status indications still adheres to the weak extent. The second project that I did was the Lintu the Future dashboard that Chris already talked about today. He told you how it works, I'm just here to talk about the design. We changed the light green and the white cards to a dark blue and a lighter blue for the cards to match the blue of the buttons that was already there. We actually did these two using media queries in our CSS files. So we're not even bothered with JavaScript of this one. A media query is the part of your CSS file that starts with a media followed by sometimes a little and sometimes a lot. The first part of a media query is the media type. There are three types. There is all, print and screen. All makes it explicit that it will apply always. Print will make sure that it only applies when a user is printing it. A screen will make sure that it only applies when it's watched on a screen. So for dark mode we're going to use screen because when a user prints your dark themed page it probably doesn't want to print a whole black page with some white letters in it. The second part of a media query is the media feature. And there are a ton of them. They might look at the orientation of your device. They might look at the width of your device. But today we're going to look at the media queries concerning preferences because they're there and they allow you to check what preferences your user has. We're going to look at preferred color scheme. This allows you to detect if the user prefers a light or a dark color scheme where light is the default. It will look like this if you actually want to listen to the dark preference at media screen and to make sure that we use the mode. Preference color scheme dark. Time to insert your CSS. But before we do that let's look at how browsers support this and luckily it's a lot. This is the user's relative so we see that most of our users will probably be able to actually use this feature the way we intend to. When we're looking at the lint to the future dashboard we're looking at a normal CSS project. This project will has a normal CSS file where we inject the at media prefers color scheme dark. We're going to change the body color to be the dark blue and make the text all white. The second thing we do is change the color of the link to be yellow to make sure that the contrast between the blue and the yellow is grayed enough. Where the green wouldn't have done that. We're changing the background color of the chart and here we're running into the first real problem where we can hardly read any of the access labels anymore. So we're also making those white. The access labels are SVG so that's why we use fill white and we need to actually overwrite them so that's why the importance there. You probably don't really need that that often. If you want to do this in your own CSS project you probably start out with a route with CSS variables in it. So we have two color CSS variables and then we have the border radius. We're going to use those variables to describe the background color of our body and the color of our text. The next thing we're doing is creating the media query for the dark color scheme preferences and changing the background color to a really dark gray and the background text or the text color to a white. What we could do to even clean it up more is move all the color variables into two distinct preferences preferred color schemes. So we're moving the default ones to light and the dark ones to dark. This way you always know where your colors are. So they're always where they supposed to be in the color scheme preference. For the A11Y automation tracker it works a bit different. This project uses Tailwind CSS which is a CSS framework where you actually need to enable the dark mode feature in the Tailwind config. Here you have the option to choose media or class. Media works with the media query as we just saw. Class allows you to toggle manually and use a class to do so. Here we're using the media query to have the same behavior as that into the future dashboard. Tailwind enables you to do this without immediately changing something. To change something to your code you actually need to add the dark keyword. You're going to add the dark keyword in front of a bunch of colors where you actually want to change the color from. So here we're going to change the background to dark background gray 700 which is telling Tailwind that if a user prefers a dark color scheme we're going to use the dark gray instead of the gray 100 that is the default. Changing these two projects to actually adhere to the user preferences took me a hundred lines of code. And I hope this has shown you how to do it for your projects too. But this was all cool and designy but what about the devices that your users use their products on? Maybe we're developing this on a super high resolution 8k screen and your user might use an old tablet. To make sure that our design is universally accessible we're going to take you through all the things that might impact the design that you made on your own computer. They might use it outside in the sun reducing maybe the contrast of your colors. They might use it at night making the white of your screen and your design way more impactful. Users might not always perceive certain colors because they perceive a reduced contrast. They might not see certain colors or they might not see any colors at all. Agata has talked about these last two and I hope you learned a lot from her about the topic of color blindness. You will see it come along in my talk but I won't spend much time on it here. When we're thinking about how people access the data that our web app is providing, we're talking about accessibility. Often abbreviated to A, you'll have a Y on the web. And today I want to talk to you about colors. Colors are what makes a dark color scheme. And here I want to show you what happens if we mix colors. So here we're mixing paint. We're taking the primary colors red, blue and green, red, blue and yellow. And we're actually mixing green, orange and purple. When we mix them all together we get brown. That works fine when you're painting something but a lot of us don't paint for our users. We're designing for an LED screen. An LED screen uses a red, a blue and a green LED to mix colors. And as you can see in this example, we can't mix brown. Wait, but we can perceive brown. Yes, but it's a super dark orange. When it comes to printing, things get even more complex because we're not using RGB values. We're using CYMK values. So colors across multiple medias don't always work the same. I have been calling these colors red, blue and green, but you might observe them differently. You might not think that salmon is pink or that there's a distinction between them because you as a male might observe something different or call something different than a female. It also is impacted by the culture you're from. There are languages that have multiple words for the word blue where I would just call it blue. So we've been talking about how we make colors, how we talk about colors and then there's of course how we perceive colors. For me the left top picture is super distinct from the other three. But if you have a color deficiency, you might not see it the same way. Luckily there are guidelines that tell us what we should do to make our website as accessible as possible and there are tools out there to help you do so. So the Web Content Accessibility Guidelines talk about contrast. When they talk about contrast they're talking about a ratio. So the ratio from the darker color to the lighter color and they have defined what ratio it should adhere to. There's a lot of math behind it where you can use relative luminance of one to relative luminance of the other and calculate it. I don't do that much math on my day to day basis. So there are things like the web aim contrast checker that allow you to put in the hex value of your color, foreground and background and see what the contrast ratio is. It also allows you to adjust your color to see when it passes. Be aware that this number is a mathematical number which probably doesn't mean that it works on each screen the same. So if you're scooting it super close to the accessibility guidelines cut-off point you're probably not making it accessible across all screens and devices. Firefox allows you to hover over color and it will show you whether or not you passed the color contrast. Check. When we go back to the contrast checker I've chosen two colors and I've not picked them at random. I've chosen a super dark blue and a pink and I'm specifically saying these names for the color for the foreground and the background because when we emulate that the user doesn't see any red it changes to a dark blue with a blue background. At least for me it has changed but contrast checker did not update. Luckily the accessibility tool in Firefox allows you to see what contrast it now actually has and we can see that it dropped far below three so it doesn't adhere to the contrast check anymore. So be aware that if you're trying to make a universal design that works across multiple devices across different way of using and different users you might not want to use always these colors so distinctly. Then we come to the last part. The tools that will actually help you to create a universally acceptable design and they're across your browser that you use from day to day. I took four browsers Safari, the Chromium based browsers and Firefox because they're the big three and they all have different tools to help you make a universally acceptable design. When we look at Safari they have two icons right on the elements tab. The first one doesn't print your page as you might think but it will toggle to the printed version of your page so that you can see if your AdMedia screen actually worked or if you're using AdMedia print that it actually does what it should. The other icon behind it even though it's not so clear what it does will toggle to a dark mode for you so it will forces dark mode. The second thing that they have are accessibility audits. The accessibility audits there are a ton of them. You can run them on your website. I don't think they're as useful as maybe something we'll see later but I wanted to show you and you did them. They are there. The second part of the browser I want to discuss are the Chromium based browsers. They use Lighthouse to allow you to generate for example an accessibility report for your website. In this case we're generating an accessibility report. We're getting a score which is going to be 87 and we're going to see which violations there are and how we could fix them. In this case we see a contrast violation because the orange contrasting with the white is not enough to pass the WCAG test. We can also emulate things like within a Safari but we have to go through the three dots rendering to make sure that we pick emulate light mode preference or dark mode preference. We can also emulate the different color vision deficiencies there. They're a bit hidden so I hope that you now know where to find them. In Firefox we can toggle between light and dark mode similarly to Safari although they have introduced two buttons here. So the sun is to force light mode and the moon is to force dark mode and then you have the print option that doesn't look like a printer but like a printed page to do the same print toggle that I just talked about in Safari. The second part is the accessibility tab that allows you to again do kind of an accessibility audit in this case on contrast and allows you to on that audit emulate a certain color efficiency. Here we're claiming to see no green and with that we actually see that a part of the color contrast violations disappears because the blue we picked had a lot of green in it making it closer to white. By removing that green we're actually getting a better contrast. This shows that not always color deficiencies leads to a lesser accessibility point but they might increase the accessibility. So make sure that you test these things so you can even enhance it for your other users too. So what have we talked about today? Well, first of all we talked about how you want to implement this in your CSS file. If you're using a normal CSS file you're using the add media screen and your first color scheme dark media query and you're going to insert your color-concerned CSS there. Second of all you're going to use the tools that different browsers provide you to check if it actually works, to check if the contrast is okay, to easily toggle without having to go to your system settings which I did before I found out that these buttons were there. And then lastly I hope that while you're designing your web app and you're building your web app you're thinking about all the different devices and situations that your users are in. Thank you very much.