 I've put together this really simple example, just with a few important things in it. We have a gradient background, an image background, some buttony things here. We have a link, I just wanna show you what happens. So a bit of a crude example, but I think it will do a decent job at letting us explore it. And the first thing I wanna show you is how we can turn high contrast mode on, which is a Windows feature. And it might seem very like something that not a lot of people would do, but it is under accessibility. And then contrast themes in Windows 11, it has a slightly different name in Windows 10. But let's say I go and I want this aquatic theme that's right here, I just go and I choose it from my list. And it's going to take a second once I hit apply. And this has completely changed the entire look of my OS and my computer in general. It's not just the browser, but you can see that it has completely changed the look of the site. I no longer have backgrounds on my buttons here. My gradient background is completely vanished. My links have changed colors. Things are just very different from how they were before. Hi there, my friend and friends. Welcome back to yet another video. And if you're new here, my name is Kevin. And here at my channel, I help you fall madly, deeply in love with the wonderful world that is CSS. Today, we're going to be exploring something called high contrast mode. We'll look at what it actually does to a site and how it can affect your sites. We'll talk about why people even bother using a feature like this that can look extremely drastic at first. We'll look at good solutions that we can come up with to help improve the situation when problems do arise. And of course, how we can test it to make sure that the site isn't completely broken when users are in high contrast mode. You might be wondering like, who's actually doing this? But Windows has said that upwards of 4% of their users do. But if you were to get 10,000 users to visit your page, that would still be 200 people who are using this, which is a pretty substantial amount of people. And as we can see, it completely changes how things work. And just so you know, you can come in here and like actually edit this. And the reason people might use it is they like, it's not necessarily high, it used to be called high contrast mode in Windows. Now it's called contrast themes because it's more about like, it can make for a better user experience overall for a user, you can actually make it so the contrast is a lot lower if you don't like high contrast or if you have visibility problems you might want a very high contrast and you're forcing it across the entire operating system, including all websites, which can make things a lot easier for certain people. And as I said, around 4% of users are actually using this type of thing. So I'm actually gonna turn it off for now because I don't really wanna work in this on an operating level because VS Code is kind of awkward when we have that on. But now that that has turned back off, the main thing is we have users that are doing it and it completely changes things. So what can we do about it? And so I'm gonna show you in Chrome how we can actually sort of emulate this and you'll notice the colors are very different but I'm gonna open up my DevTools and then when I'm in my DevTools here, what we can do is a command shift P and this is like the command palette and I'm gonna write emulate and you can actually see there's, we can emulate a whole bunch of stuff but the first one is force colors active and I can click that on and it's forcing it through. The colors are different here because it's not choosing one of the color schemes that's available there, it's just setting it based on what a high contrast mode would do, removing things like background colors, changing what the links look like, changing how outlines work and other stuff like that that we're going to see in a second. So it's not following one of the color schemes that you might have but it's emulating what the experience would be like but it's forcing all of the changes that would be made to be made and we're gonna go over what those are but I just wanna show you how we can do it here. If ever you wanna turn it back off, you just write emulate again and then you can do emulate force colors back to none and then it turns it off and basically when you turn on high contrast mode, what's happening is all of the colors that are used anywhere are thrown out. So images are preserved, layout is preserved, all of that stuff is preserved. Somewhere you might have a background image that is not preserved is if you have a gradient because again, colors are all thrown in the garbage even though that is through a background image and this can actually be problematic for a number of reasons and actually there's a few other things done so we're gonna look at them in a second but let's start by looking at this button here and actually instead of using Chrome I'm gonna do this in polypane and so here is polypane which is a browser for developers and the reason I wanna use this instead of Chrome is it just makes things a little bit easier and so we'll look at a few other examples of how it works and it's running Chromium in here but one of the things I can do is on this I can go to my options and I can actually just toggle it here on and off which is a little bit faster and easier you can see you can do this through all your media features here and there's more, we'll see a few of them here but we can see when this is off if you look at this button and then I go to these active state notice how I had like an arrow here that's disappeared and that's because images including SVGs are preserved they don't get touched and this is an SVG with a black fill the black fill stays black and we actually lose it completely here the background color is also gone the color of links gets forced over to something and any text that is on top of images gets a background color on it because images are completely preserved images will not be changed this just so happens to be a dark image because I wanted the text to be easy to read on it but it doesn't know what your image actually looks like so to ensure that it's readable if you have text on top of an image it will add a background color to that text now another reason that I do like using Polypane is I can actually open a second window here and I'm just gonna choose a you can choose obviously there's lots of different size choices and everything that you can have and you can also just rescale stuff on the side here but the nice thing is I'm not gonna worry too much about this one but I can have it with the high contrast mode on here and with the high contrast mode off here and you can have your mobile device and all the different screen sizes and everything you'd have 20 panels open if you want so it's nice to see if the changes you're making are affecting one are they affecting both are you breaking something in your original one or not so yeah just a fun little extra there but what we're gonna do now is open up VS Code where I have this page currently running and we'll just move Polypane off to the side and let's just shrink this down so we can keep a little bit of the original one in view even though I'm not gonna focus on that I'm gonna be focused more on what's happening over here and the first thing I wanna look at is a nice trick that doesn't actually require a media query though we can write a media query for force color mode and but this first thing is let's go and find something I did down here which was on my buttons I actually put an outline of none and for the hover and the focus state on here so if actually let's go look at our original laptop one here for a second if I tab over onto these I've replaced the original outline with this shadowy thing which is something somebody might do the thing is then if we go back to the high contrast mode if I tab onto these we can't actually see that I'm tabbing onto them you can actually see here that the hover is activating on that because that's just how Polypane works you can disable that if you want but you can see that that is working right there and what we're going to do with this is we wanna have something that's actually showing that there's like an outline of focus like a border on here and a lot of people like turning off outlines in general I'm gonna recommend that you don't but what we can actually do is leverage this outline to make sure that it's actually working when we're in high contrast mode here because outline colors will be changed automatically to make them obvious and so we can actually put here is outline and I can do a three pixel solid transparent and hit save on that and this is on my hover and my focus state so now when I hover and focus on there you can actually see that those are coming through which is awesome. Another thing we could do here is actually leverage this a little bit more by doing button and to say outline is one pixel solid transparent and then we get that and if we hover on top we still get this like a bit of a hover state that is coming up on those so just a really quick one on outlines probably better to set them to transparent rather than none if you really wanna get rid of it but if you are getting rid of an outline make sure that you still have something that can keyboard navigate you can see here when I'm keyboard navigating it is still showing up. A lot of people will get rid of the outline and then not replace it with a focus or focus visible state which is really really important to do. Now we might have other things here like see how my cards look really ugly at the moment and I don't want to do something like here where I have my cards let's just go up. I don't really wanna come on these cards and say add like a border of two pixel solid white or whatever here maybe it actually helps and does something I want but on this version of it I don't really want these cards to have that or maybe there's a drop shadow something subtle that you don't want to you wanna leave it alone on your original one but on the high contrast mode you look at it and you go at some visual separation between these would actually be kinda nice so to be able to do that we can use a media query and it's at media there is a prefers contrast media query that we can do this is not what we're going to be doing this is another setting people can set on their computers to say that they prefer a higher contrast but it won't actually overwrite anything it just allows you to build in like a higher contrast color theme but it will not do anything on its own that's up to you to actually build that in whereas in this case what we're gonna be doing is forced colors and active and if we do that now we can actually build in some redundancies and fallbacks here so I could do now my dot card has a border let's do really big 10 pixels solid and white and you can see it is showing up here and I did it really big just to show you that there's no border showing up on the regular version it's only showing up in the high contrast mode the white here actually doesn't really matter because the border is going to be there no matter what I do basically and it's gonna match my text color because I put red here it's not gonna become red or I could even put black here it's not going to become black because it knows it's setting the page background as black so the border color I can't control it so we could just do a border of 10 pixels and maybe we just make that one or two pixels just to give our cards like an actual shape or something like that we could of course fix the SVG that I have here as well I did this all the way down here so my button SVG again media forced colors is active not true active and then we could say that we have the button SVG and then we can do a fill of in this case it's gonna be a little bit more interesting but let's do an FFF just so it actually comes in and you can see that it's white and what's actually interesting with this is there's other colors that do become available to us when we're in high contrast mode so for example one of those is canvas text and if I hit save it's now following my actual regular text color if I wanna get that yellow color that's being used here I could come down and there's a few different ones but there is link text and link text these are both links and not regular buttons regular buttons I actually think the text inside of them would have been white so just to show we have link text which will be the color of your links there is also a button text here which VS code doesn't like here but it will work of course we do have current color as well current color which will just probably be the best choice for something like that but again you have different options you could do to replace fills or other things and SVGs are probably the one spot where you're gonna run into stuff where it might be invisible or really hard to see because the SVG won't change even though the background is being forced to change the other good thing about doing a fill of current color here is I'm not sure if this is going to work but if I do a light, aha it does the browser can also know if somebody set this to like a light or dark so here if I put FFF because I was testing it well that would work if they were on a dark version where the FFF shows up but if I switch it to light we can't see it whereas if I just sent this to my link color or my current color whatever I do link color hit save oh sorry not link color link text there we go so now it's there and if I switch over to the light it switches over automatically there and that's important to know some color schemes will be light on dark and some will be dark on light so again polypane makes it easy to sort of jump around between the different versions where you could have multiple windows all open at the same time I don't know why you'd want it but you can even get like the selected color like the selection color you could pull in which would be highlight and I think it did change it's hard to see because it's blue and purple but we do get access to that highlight color that's here as well but again if I came on my button let's say button background is going to be black it's not going to switch it to black or even if I switch this to highlight you can see it's not switching anything here it's mostly used we're gonna be using these for SVGs basically in changing strokes and fills and actually while we're here this does do a nice job of highlighting the background color that got added to my text here on the image the other thing I did want to mention is we can combine our media queries to so if you did have something very specific that you wanted to do so say here you did want to go white for some reason for that so in the dark mode it's looking good let's go back to dark you want it to look like that what we could do in this case is do a prefers color scheme of dark so we're looking for the dark color scheme and the force colors of active so then we get something like that so if I switch over to the light mode we're getting the original black that was there and then when we come over to here we get the white that comes through so we also can combine the media queries that way and so that can be useful for if there's like little details that you want to control independently a little bit just for these little extra touches it could be kind of useful so yeah the main things that we want to be doing this for are checking things for background colors where things disappear so often that means replacing background colors with borders this could be for different sections or for cards and other stuff like that you also want to be looking for your focus states and making sure your focus states are still functional because it is possible you broke them along the way you also want to be just looking for little things that like you know you can do a quick scan and actually cover a lot of these things really easily and something like polypane can help you out and if you are interested in polypane I have linked to it down in the description below it is a paid tool that is here to just help us have a much better developer experience unless you are a student in which case you can get it for free but I just want to let you know that the link down below is an affiliate link so if you do decide to purchase it it also does help support this channel now here I looked really fast at the prefers color scheme dark so if you'd like more information on that and how we can do a light and dark color theme for our site just regarding the force color mode there is a video right here for your viewing pleasure and with that I would like to thank my enablers of awesome Jan, Johnny, Michael, Mr. Dave, Patrick, Simon, Steven and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your call on the internet just a little bit more awesome.