Forced Colors and CSS

Sometimes, users can take a lot more control over our page than we realize might be possible! In this video, I look at how they can completely change the look of a site using high-contrast mode, and how we can make sure there are no big issues when they do this.

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:41 - Who uses high-contrast mode and why do they use it?
02:55 - Emulate it in Chrome
04:00 - How it affects our page
04:30 - Using Polypane to emulate high-contrast mode and some of the benefits of Polypane
06:25 - Using outline: transparent
08:55 - The forced-colors media query
11:18 - The new colors we can use
14:39 - The things to keep an eye out for

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[well.]

When this person joined YouTube, YouTube accepted his terms and conditions.

[Stoney_Eagle]

That transparent color is a nifty trick and doesn't hurt my normal design, it's perfect!

[SuperGylden]

Another great video. It's often people with very low vision who uses extreme zooming that needs forced colours. Often they are looking at the screen from a very, very short distance and white background can put a lot of strain on their eyes

[aglowkeys]

This is absolutely amazing. Didn't know that contrast modes changed the design so much. Gonna be taking a look at my portfolio and downloading Polypane right now. Thank you for this video! It was super interesting and learned so many new cool tricks :)

[dimitardimitrov]

I am always learning new and I interesting stuff from you. You rock!

[dixztube]

just drop'n some coder love...keep doing your thing im sure i speak for everyone when i say we appreciate this channel so much.

to anyone seeing this comment how do you work with the virtual keyboard and doing styling around that

[git-tauseef]

What a clarity! Learning a lot from your courses as well...

[eritert]

Yes, i use qutebrowser with dark mode, some websites are illegible with it.

[robertmcintosh]

Honestly, this was a great video for using currentColor more often. lol

[dmitryfateev]

Hi, Kevin! I'm frontend beginner. I really like your videos, they help me a lot!
Can you tell me why are you using pure css in your videos? You don't use SASS and stuff like that?

[musictime]

I am so glad I found you! Thanks for your amazing content

[thedacian]

When does forced-colors mode trigger and afterwards prefers-color-scheme, with the media queries and all the stuff?When the user change either so high contrast setting or browser themes?Thank you!

[micUrCr]

Sir can you make how design the table responsive .. with simple and colofuly.

[clevermissfox]

Hmm 8:00. How does setting outline on :hover to transparent gives it a yellow outline when in high contrast? Then in focus its blue

[some_person_]

I thought this video would be about making a website that doesn't break when someone uses Dark Reader extension, but this is interesting too. :D

[McBEASTse]

Does this work on all browsers, or just Chromium-based ones?

[aram]

OFF TOPIC: do you use a reset.css stylesheet/package? There's ton of them at npm, can you recommend any of them? could you point out the things to look into?

[mariocamspam]

Really loving the new thumbnail and title styles! Could you please turn down the saturation on your camera; you look so red sometimes haha

[DJMoreMuzic]

Brilliant — i love the expressions and explanations 💯✅.

[AsTadeLP]

Hey guys, I am searching Kevin's Video on the ripple effect for buttons via JS and CSS, but I can't find it. Can someone help out?