Exploring the Strange World of High Contrast Mode
summary
Windows High Contrast mode forced-colors: active aggressively replaces CSS colors, backgrounds, borders, box-shadows and many SVG fills, breaking color-only cues (GitHub loses syntax highlighting, Wordle becomes unusable). Fixes used: detect forced colors, swap to system colors for critical foreground/background, move a 2px transparent outline to focus/active, and use force-color-adjust: none only as last resort. Testing requires manual checks or DevTools emulation (Shift‑Cmd‑P → forced colors); about 3–5% of users browse with high contrast on.
AI-written summary · about
chapters (11)
- 0:00Introduction to high contrast
- 1:03Entering high contrast mode
- 4:37Rules of high contrast rendering
- 7:27Designing for high contrast
- 11:41Force color adjust escape
- 12:03Case study Calcite Components
- 15:15Why support high contrast
- 16:17Testing high contrast support
- 17:42White high contrast mode
- 18:43CSS forced colors spec
- 19:03Q&A high contrast usage
related talks
49mWorking with High Contrast Mode
33mAccessibility Adventures - The Lost Secrets of Forced Colors Mode
53mDealing with High Contrast Mode, Custom Stylesheets, and Icon Fonts
06mDesign Accessibly: Color Contrast Tips and Tools
44mError 404: Color Not found
20mThe Dark Side of the Web
26mThe World Isn't Black and White, It's RGB
11mChrome DevTools for designers