【CSS Modules】forced-color-adjustプロパティの使い方
forced-color-adjustプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
forced-color-adjustプロパティは、システムで強制色モードが有効な際に、Webページの要素の色の調整を制御するプロパティです。これは、視覚補助が必要なユーザーがコンテンツを見やすくするための重要なアクセシビリティ機能です。
このプロパティの初期値はautoです。autoが設定されている場合、ブラウザはテキストや背景色などを強制色モードのテーマに合わせて自動調整し、コントラストを高めて視認性を向上させます。これにより、ユーザーは快適にコンテンツを利用できます。
一方、noneを設定すると、ブラウザによる色の自動調整が無効になります。この設定は、画像やブランドロゴなど、色の変更が意図しない意味合いや視覚的整合性の喪失につながる場合に有用です。forced-color-adjust: none;を使用することで、ブランドロゴなど、本来の色を忠実に再現したいコンテンツの表示を保護可能です。
このプロパティを適切に活用することで、アクセシビリティとデザインを両立させ、多くのユーザーにとって使いやすいWebサイトの提供に貢献できます。
公式リファレンス: forced-color-adjust
構文(syntax)
1forced-color-adjust: none;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません