Working with High Contrast Mode

on YouTube ↗49m

" summary

Windows High Contrast Mode works on Windows 7+ and Edge/IE10+ and exposes four built-in themes with six configurable properties (text, links, disabled text, selected text, button text, background). Use semantic HTML, the CSS media query -ms-high-contrast: active and high-contrast keywords (windowtext, buttonface, highlight) to let themes drive colors; inline SVG with currentColor updates automatically. Practical tricks that work: add borders (even transparent) so controls remain visible, avoid relying on CSS background images, and test on a Windows VM or remote workspace.

AI-written summary · about

" chapters (14)

1. 0:00Introduction and context
2. 2:00The need for contrast
3. 5:30User accessibility needs
4. 8:08Windows high contrast mode
5. 11:16Customizing themes
6. 13:48Business case and browser support
7. 17:18CSS implementation techniques
8. 22:54Optimizing forms and inputs
9. 25:56Buttons and ARIA roles
10. 27:37Handling images and media
11. 33:57Advanced tips and tricks
12. 37:27Future CSS media queries
13. 39:30Testing and concluding
14. 42:29Q&A and closing remarks

" related talks

• 21mExploring the Strange World of High Contrast ModeMatt Priour · HalfStack Charlotte 2023
• 53mDealing with High Contrast Mode, Custom Stylesheets, and Icon FontsHans Hillen · Inclusive Design 24 2014
• 06mDesign Accessibly: Color Contrast Tips and ToolsCathy O’Connor · Ignite OSCON 2015
• 33mAccessibility Adventures - The Lost Secrets of Forced Colors ModeDaniel Yuschick · Future Frontend 2026
• 44mError 404: Color Not foundDennie Declercq · Build Stuff 2022
• 15mAccessible by law! Generating colors with JS and CSS Custom PropertiesIngvild Indrebø · Nordic.js 2018
• 20mThe Dark Side of the WebAnne-Greeth van Herwijnen · EmberConf 2022
• 22mWeb Accessibility - a better user experience for everyone!Michaela Rudolfová · FrontKon 2023