Accessibility Adventures - The Lost Secrets of Forced Colors Mode
summary
Defines what forced-colors media query actually does: a browser in forced colors mode removes many CSS properties (notably box-shadow) and maps semantics to system keywords like button-face so nonsemantic div “buttons” look wrong. Shows demos that break (focus outlines vanish, logos with transparent backgrounds become unreadable) and fixes that work: use transparent border, swap images via picture for forced colors, or opt out carefully with force-color-adjust: none. Tests run on Windows (Chrome simulation is partial); ~84% sites show low contrast, ~4% Windows on contrast themes.
AI-written summary · about
chapters (12)
- 0:00Accessibility challenges
- 3:59Forced colors mode
- 8:53High contrast to contrast themes
- 11:20CSS overrides in forced colors
- 13:50Semantics behavior
- 17:26Treasure hunt concept
- 18:29Fixing buttons visibility
- 22:01Intermission
- 22:41Color-dependent filters
- 25:53Form and image solutions
- 30:34Testing forced colors mode
- 32:19Key takeaway layers
related talks
21mExploring the Strange World of High Contrast Mode
36mBeyond responsive design - New CSS media queries
49mWorking with High Contrast Mode
20mThe Dark Side of the Web
44mError 404: Color Not found
06mDesign Accessibly: Color Contrast Tips and Tools
39mVue your Media with Accessibility
11mChrome DevTools for designers