導入

最近、SVG アイコンがハイ コントラスト モードで正しく表示されないというバグ レポートを受け取りました。この記事では、私にとってうまくいった解決策を紹介します。

解決

ハイ コントラスト モードでは、CanvasText システム カラーを使用してアイコンの色を自動的に調整しました。

.icon {
  mask-image: url(svg-link);
  background-color: currentColor;
  ...
}

@media (forced-colors: active) {
  .icon::before {
    background-color: CanvasText;
  }
}

私の場合、最初は currentColor を使用して親要素から色を継承しました。ただし、ハイ コントラスト モードでは、子要素内で背景色を CanvasText に普遍的に設定したかったため、この変更を適用しました。

CanvasTextとは何ですか?

CanvasText は、アプリケーションのコンテンツまたはドキュメントに使用されるテキストの色を指します。システムの背景色に対して最適なコントラストを提供するように自動的に調整されます。

CanvasText を使用すると、ユーザーがハイ コントラスト モードを有効にした場合でも、テキストとアイコンが表示されたままになります。さらに、CanvasText はシステムのテーマに基づいて適応するため、ダーク モードとライト モードの両方で適切に動作します。

私の場合、アイコンの背景色は最初は黒に設定されていました。ただし、ハイコントラストモードで背景が黒くなるとアイコンが見えなくなりました。色を白に変更すると再び表示されるようになりますが、これをすべてのシナリオで一貫して処理するために、システム カラー CanvasText.

参考文献

https://developer.mozilla.org/en-US/docs/Web/CSS/system-color