ハイコントラストモードで色を自動的に調整する方法

導入

最近、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

以上がハイコントラストモードで色を自動的に調整する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。