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

王林
リリース: 2024-08-23 14:31:36
オリジナル
418 人が閲覧しました

How to Automatically Adjust Colors in High Contrast Mode

導入

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

解決

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

リーリー

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

CanvasTextとは何ですか?

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

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

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

参考文献

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

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

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!