Dealing with High Contrast Mode, Custom Stylesheets, and Icon Fonts
summary
Icons implemented as CSS backgrounds or sprites vanish under Windows high contrast mode and user stylesheets, and font-icon sets break when a user overrides the font family. A jQuery-based high contrast detection script checks computed styles, sets light/dark flags and adds a root class after ~2 seconds to unhide off‑screen fallback text. Combining font icons with detection (or using the Adobe Blank font trick) preserves information in most cases; it’s pragmatic and deployable but not flawless—some visual polish and edge cases remain.
AI-written summary · about
chapters (16)
- 0:00Start
- 4:27Windows High Contrast Mode
- 6:27User Defined Style Sheets
- 8:04Questions about Windows High Contrast Mode or User Defined Style Sheets
- 13:08Html Images
- 15:59A Sprite Image
- 18:50Lists Bullet Images
- 20:08Alt Text
- 22:41High Contrast Mode
- 25:22High Contrast Mode Detection Script
- 25:34High Contrast Mode Detection Scripts
- 30:32Smoke Detection Scripts
- 31:41Font Based Icon
- 46:08Questions
- 46:44Can the High Contrast Mode Detection Detect Details about the Users
- 49:58Is There any Discussion of Re-Examining High Contrast Mode Disabling Css Images
related talks
49mWorking with High Contrast Mode
21mExploring the Strange World of High Contrast Mode
31mDeath to Icon Fonts
39mThe Death of Icon Fonts Component Based SVG Icon Systems
47mThe Scoville Scale of Web Font Loading Opinions
28mSyntax Highlight Everything
54mInclusively Responsive UIs with CSS and SVG
39mTypographer vs. Accessibility