v145 · Accessibility · Glyph Substitution Explorer

Glyph substitution explorer

Toggle a simulated forced-colors stage to see which glyphs Chrome 145 swaps for monochrome variants and which keep their colour by virtue of being outside the emoji block. Helps you decide whether to put symbols on your design system in U+1F300 range or geometric Unicode.

stage

forced-colors: not active
forced-colors media query: checking…
😀U+1F600 grinning
❤️U+2764 FE0F heart
🚀U+1F680 rocket
⭐U+2B50 star
✅U+2705 check
⚠️U+26A0 warn
▲U+25B2 triangle (no emoji)
●U+25CF circle (no emoji)

code

/* Chrome 145 in forced-colors mode renders emoji as monochrome glyphs
   to match the user's high-contrast palette. To opt back into
   chromatic rendering for specific elements: */

.brand-mark {
  forced-color-adjust: none;
}

/* Detect forced-colors mode at runtime: */
const forced = window.matchMedia('(forced-colors: active)').matches;

see also