🎨
ハイコントラストモードで色を自動調整する方法
はじめに
ハイコントラストモードでSVGアイコンが表示されないというバグ報告を受け、その対応を行いました。今回は、この問題の解決策について共有します。
対応策
ハイコントラストモードでは、CanvasTextを利用して色を自動的に調整しました。
.icon {
mask-image: url(svg-link);
background-color: currentColor;
...
}
@media (forced-colors: active) {
.icon::before {
background-color: CanvasText;
}
}
私のケースでは、元々currentColorで親要素の色を指定していましたが、ハイコントラストモードの時は一律でbackground-colorをCanvasTextにしたかったので上記のようにスタイルを変更しました。
CanvasTextとは
CanvasTextは、アプリケーションのコンテンツや文書のテキスト色を指し、システムの背景色に対して最適なコントラストを保つ色を自動的に選択してくれます。
これを使用することで、ユーザーがハイコントラストモードを有効にしている場合でも、テキストやアイコンの視認性を確保できます。
また、システムのテーマに基づいて色を決定するため、ダークモードやライトモードのようなシステムの配色設定にも対応できます。
私のケースでは、アイコンのbackground-colorが元々黒色に設定されていましたが、ハイコントラストモードにより背景が黒色になると、アイコンが見えなくなる問題が発生しました。白色に変更すれば表示されましたが、すべてのケースに対応するためにシステムカラーである CanvasTextを使用しました。
参考
Discussion