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

inverted-colorsメディア機能の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月29日

基本的な使い方

inverted-colorsプロパティは、ユーザーのシステム設定において色が反転して表示されているかどうかを判断するためのCSSメディア特性を定義するプロパティです。このプロパティを使用することで、ウェブページがユーザーの色の反転設定に適切に対応し、よりアクセシブルな表示を提供できるようになります。

具体的には、@mediaルール内でこのプロパティを指定し、ユーザーエージェント（ブラウザなど）が色を反転させて表示しているかどうかに応じて、異なるスタイルを適用することが可能です。指定できる値は主に二つです。一つはinvertedで、これはユーザーエージェントが色を反転させて表示している場合に一致します。もう一つはnoneで、これは色を反転させていない場合に一致します。

例えば、ユーザーがデバイスのアクセシビリティ設定で「色反転」を有効にしている場合、ウェブページのデザインは標準の色設定に基づいていると、テキストが見えにくくなったり、画像の色が意図せず変化したりする可能性があります。inverted-colorsプロパティを用いることで、色反転が有効なユーザーに対して、文字色と背景色のコントラストを最適化したり、特定の要素の配色を調整したりするなど、その状態に合わせた特別なスタイルを提供できます。これにより、ウェブコンテンツの視認性とユーザビリティが向上し、多様なユーザー環境に対応した柔軟なウェブデザインを実現することが可能になります。

公式リファレンス: inverted-colors

構文(syntax)


1@media (inverted-colors: inverted) {
2}

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

CSS: inverted-colors で色反転を検知する


1/*
2 * inverted-colors: ユーザーが色を反転表示しているかどうかを検出するメディア特性。
3 * 値:
4 *   - none: 色は反転表示されていません。
5 *   - inverted: 色は反転表示されています。
6 *
7 * このサンプルコードは、ユーザーが色を反転表示している場合に、
8 * ドキュメントの背景色と文字色を調整する例です。
9 */
10
11/* ベースとなるスタイル: 通常の配色 */
12body {
13  background-color: #ffffff; /* 白い背景 */
14  color: #000000;            /* 黒い文字 */
15  font-family: sans-serif;
16  padding: 20px;
17  line-height: 1.6;
18}
19
20/*
21 * ユーザーがブラウザやOSの設定で色を反転させている場合に適用されるスタイル。
22 * 例: macOSの「反転色」やWindowsの「ハイコントラストテーマ」などで色が反転されている場合。
23 */
24@media (inverted-colors: inverted) {
25  body {
26    background-color: #000000; /* 反転時の背景色を黒に */
27    color: #ffffff;            /* 反転時の文字色を白に */
28  }
29}

CSSのinverted-colorsは、ユーザーがオペレーティングシステムやブラウザの設定で、表示色を反転させているかどうかを検出するためのメディア特性です。この特性には、特別な引数や戻り値は設定されていません。

inverted-colorsは主に二つの状態を検出します。一つはnoneで、これはユーザーが色を反転表示していない通常の状態を意味します。もう一つはinvertedで、ユーザーが色を反転表示している状態を示します。

提供されたサンプルコードでは、まずbody要素に対して通常の白い背景と黒い文字色を設定しています。その次に、@media (inverted-colors: inverted)という記述を用いて、ユーザーが色を反転表示している場合にのみ適用されるスタイルを定義しています。この反転表示時には、背景色を黒色に、文字色を白色に調整しています。

このように記述することで、ユーザーがパソコンやスマートフォンの設定で「色を反転する」といったアクセシビリティ機能を有効にしている場合でも、ウェブサイトの配色が適切に保たれ、視認性が損なわれないように調整できます。これにより、多様な視覚的ニーズを持つユーザーに対して、より使いやすいウェブサイトを提供することに貢献します。

inverted-colorsは、ユーザー補助機能としてOSやブラウザが提供する色反転設定を検出するメディア特性です。開発者が任意に色を反転させる機能ではなく、ユーザーのアクセシビリティ設定に合わせた表示調整に利用するものです。

サンプルコードのようにスタイルを設定する際は、元の色がシステムによって反転された後、さらにこのCSSで調整されることを考慮し、最終的に視認性の高い配色になるよう慎重に選びましょう。意図しない配色になるのを防ぐため、元の色設定と反転時の色設定のバランスが重要です。

ご自身の開発環境で、OSやブラウザの色反転設定を実際にオン・オフにして動作確認を行うことが非常に重要です。また、比較的新しいCSS機能のため、一部の古いブラウザではサポートされていない場合がある点にも注意し、互換性を確認することをおすすめします。