背景色を「文字色」として使う時は conic-gradient(currentcolor) ＋ CanvasText で強制カラーモードに備える

どんな時に使う？

• mask で描くアイコン、区切り線、チェックマーク、ローディングのバーなど、「背景色で塗っているけれど見た目は前景（文字と同じ色）」の要素
• Windows の「コントラスト テーマ」（CSS では forced-colors: active）を使う人にも、アイコンや線を確実に見せたい時

なぜ消えるのか

強制カラーモードでは、ブラウザが color や background-color などをユーザーのシステムカラーで上書きする。background-color は背景用のシステムカラー（Canvas）に置き換わるので、background: currentcolor で塗っていた部分は周りの背景と同じ色になり、見えなくなる。

コード

/* 例: mask で描くアイコン */
.icon {
  width: 1em;
  height: 1em;
  mask: url("/icons/check.svg") center / contain no-repeat;

  /* NG: 強制カラーモードで背景色が Canvas に置き換わり、アイコンが消える */
  /* background: currentcolor; */

  /* OK: 1枚目は currentcolor 一色のグラデーション画像、最後は CanvasText の背景色 */
  background: conic-gradient(currentcolor), CanvasText;
}

• conic-gradient(currentcolor) は「currentcolor 一色の画像」になる。通常時はこれが一番上に描かれるので、見た目は background: currentcolor と変わらない。
• 末尾の CanvasText は最下層の背景色。CanvasText は「背景（Canvas）の上に置く文字の色」を表すシステムカラーなので、強制カラーモードで背景色が扱われても前景として読める色になる。
• linear-gradient(currentcolor 0 0) でも同じ「一色の画像」は作れる。conic-gradient(currentcolor) は短く書けるのが利点。

注意点・対応状況

• 元の投稿は「そうするのがよさそう」という知見の共有で、挙動はブラウザや OS の設定で変わりうる。Windows のコントラスト テーマか、Chrome DevTools の「Rendering」パネルの「Emulate CSS media feature forced-colors」で実際に表示を確認すること。
• 強制カラーモード向けにもっと細かく調整したい時は @media (forced-colors: active) { … } の中で個別に指定する方法もある。
• アイコンを mask で描く方法そのものは アイコンは SVG コンポーネントではなく CSS の mask で（Icons in Pure CSS） を参照。
• 背景色から読みやすい文字色を自動で選ぶ話は 画像が読み込めない時の alt テキストを contrast-color() で読めるようにする が近いテーマ。

出典

• @tak_dcxi · 2026-10-23