【CSS Modules】forced-colorsメディア機能の使い方

forced-colorsプロパティは、ユーザーのシステムが強制カラーモードを有効にしているかどうかを保持するプロパティです。このCSSメディア特性は、オペレーティングシステム（OS）のアクセシビリティ設定によって提供される、ハイコントラストテーマなど特別な色設定が適用されているかをウェブページ側で検出するために使用されます。これは、色覚に障害を持つ方や視力の低い方など、特定の視覚要件を持つユーザーがコンテンツをより見やすくするために重要な機能です。

具体的には、forced-colorsプロパティはactiveとnoneの二つの値を持ちます。forced-colors: activeは、ユーザーのシステムで強制カラーモードが有効になっており、ブラウザがそのモードに合わせた色の変更を適用している状態を示します。一方、forced-colors: noneは、強制カラーモードが有効ではない状態、つまり通常の色設定が使用されていることを示します。

開発者はこのforced-colorsプロパティをCSSのメディアクエリ、例えば@media (forced-colors: active)と組み合わせることで、強制カラーモードが有効なユーザーに対して、ウェブサイトのデザインや色使いを細かく最適化できます。これにより、意図しない色の組み合わせや、背景画像が強制カラーモードで表示されなくなることによる情報の欠落などを防ぎ、文字と背景のコントラストを明確にするなど、アクセシビリティを大きく向上させることが可能です。このプロパティを活用することで、より多くのユーザーが快適にウェブコンテンツを利用できるようになります。

Copy
1@media (forced-colors: active) { }

引数なし

引数はありません

戻り値なし

戻り値はありません