【CSS Modules】prefers-contrastメディア機能の使い方

prefers-contrastプロパティは、ユーザーのシステム設定におけるコントラスト設定の状態を保持するプロパティです。これはCSSのメディア特性（media feature）の一つで、ウェブサイトの表示をユーザーのアクセシビリティの好みに合わせて調整するために使用されます。特に、コントラスト比の調整が必要なユーザーのために、視覚的な負担を軽減し、情報の読みやすさを向上させる目的で活用されます。

このプロパティは、CSSの@mediaルール内で条件式として使われます。例えば、(prefers-contrast: high)のように記述することで、ユーザーがオペレーティングシステム（OS）やブラウザの設定で「高コントラスト」モードを有効にしている場合にのみ、特定のCSSスタイルを適用することができます。

prefers-contrastが取り得る値には、主に以下のものがあります。no-preferenceはユーザーが特にコントラスト設定を行っていない状態を、highは高コントラスト設定を、lowは低コントトラスト設定を、そしてcustomは特定のカスタムコントラスト設定をそれぞれ示します。開発者はこれらの値を利用して、高コントラスト設定のユーザーには背景色と文字色をよりはっきりと区別できる配色にしたり、低コントラスト設定のユーザーには目に優しい柔らかな色合いを提供したりするなど、柔軟なデザイン調整を行うことが可能です。このように、prefers-contrastは、より多くのユーザーにとって使いやすいウェブコンテンツを作成するための重要なツールとなっています。

Copy
1@media (prefers-contrast: high) {
2  /* スタイルをここに記述 */
3}

引数なし

引数はありません

戻り値なし

戻り値はありません