v145 · CSS · Accessibility · demo

Icon System

A realistic dashboard that uses emoji as navigation and card icons. Toggle between Normal, Forced Colors (before Chrome 145), and Forced Colors (Chrome 145+) to see how the monochrome rendering fix makes emoji icons usable in Windows High Contrast and forced-colors: active mode.

Chrome 145: emoji render in the system text color when forced-colors: active. Before, emoji stayed fully colored even on a dark high-contrast background — jarring and hard to read. No code change required; Chrome applies this automatically.

Toggle modes below · compare the emoji icons in "Forced (before)" vs "Forced (Chrome 145+)" · notice color vs monochrome

Render mode Standard rendering — emoji appear in full color.
Dashboard (normal mode)
📊 Overview
✅
Tasks
12
📬
Unread
4
⚠️
Alerts
2
📈
Growth
+8%
🔒
Security
OK
💾
Storage
72%
What changed in Chrome 145
Before Chrome 145 Emoji always render in color, even in forced-colors: active — bright colorful icons on a dark high-contrast background are jarring and hard to parse
Chrome 145+ Emoji are rendered in the system text color when forced-colors: active — icons blend with surrounding text, consistent with the user's chosen palette
CSS required None — Chrome applies this automatically. Use @media (forced-colors: active) only if you need to adjust layout, not emoji color. 
/* No CSS code change needed — Chrome 145 applies monochrome emoji automatically.
   Use forced-colors media query only for layout and palette adjustments: */

@media (forced-colors: active) {
  /* Adjust surrounding UI to match the forced palette */
  .nav-item {
    border: 1px solid ButtonBorder;
    background: ButtonFace;
    color: ButtonText;
  }

  /* Emoji: rendered in CanvasText color by Chrome 145 — no filter needed */
  /* .nav-icon { filter: grayscale(1); } ← not needed in Chrome 145+ */

  /* Use forced-color system keywords for interactive states */
  .nav-item:hover {
    background: Highlight;
    color: HighlightText;
  }
}

/* Detect in JS */
const forcedColors = window.matchMedia('(forced-colors: active)').matches;

see also