v145 · CSS · Accessibility

Enable monochrome emoji rendering in forced colors mode

Chrome 145 renders emoji in monochrome (text color) when Windows High Contrast or CSS forced-colors mode is active, ensuring emoji integrate with the user's chosen high-contrast palette instead of appearing as bright color islands.

background

Forced colors mode (Windows High Contrast, CSS forced-colors: active) replaces page colors with a system-defined high-contrast palette to improve readability for users with low vision. Before Chrome 145, emoji were always rendered in their native color regardless of forced colors mode, making them visually jarring and potentially unreadable against the forced color backgrounds.

Chrome 145 maps emoji to the system text foreground color in forced colors mode, so they appear as monochrome glyphs consistent with surrounding text.

concepts

  1. Emoji Demo

    Shows a set of emoji in normal and simulated forced-colors contexts, with a CSS media query toggle and forced-colors color-scheme information.

  2. Forced Colors Context

    How forced-colors mode works, which CSS properties it overrides, how to detect it with a media query, and the system color keywords available for authors.

  3. Glyph Substitution Explorer

    Toggle a simulated forced-colors stage and watch which glyphs Chrome rewrites and which stay coloured. Helps you choose between emoji-block and geometric Unicode symbols when designing system icons.

  4. Icon System

    A realistic dashboard with emoji used as navigation and card icons. Toggle between Normal, Forced Colors before Chrome 145, and Forced Colors Chrome 145+ to see how the monochrome fix makes emoji icons blend with the high-contrast palette instead of appearing as jarring color islands.

the change

/* Before Chrome 145: emoji always render in color, even in forced-colors */
/* Chrome 145+: emoji render as monochrome in forced-colors: active */

/* Detect forced colors mode in CSS */
@media (forced-colors: active) {
  /* Emoji will automatically appear in monochrome (ButtonText, WindowText, etc.) */
  /* Adjust surrounding styles to match the high-contrast palette */
  .emoji-label {
    color: ButtonText;
    background: ButtonFace;
  }
}

/* In JavaScript: */
const forcedColors = window.matchMedia('(forced-colors: active)').matches;
console.log('Forced colors:', forcedColors);

references