<system-color>
==============

**`<system-color>`** は CSS のデータ型で、ウェブページの様々な部分に通常使用する既定の色を反映します。

しかし、ユーザーエージェントは強制色モードと呼ばれるアクセシビリティ機能を提供することができ、このモードでは色はユーザーとユーザーエージェントが定義したパレットに制限され、特定のプロパティで作者が選択した色を上書きします。強制色モードでは、 `<system-color>` は選択された色を公開するので、ページの残りの部分はそれらと統合することができます。強制色モードの例としては、 Windows の高コントラストモードがあります。

強制色モードでは、作者は `<system-color>` 型の色を、色がオーバーライドされるプロパティの設定にはないすべてのプロパティに使用するべきです。これにより、ページがすべてのプロパティで一貫して同じ色パレットを使用することを保証します。

作者は `forced-colors` メディア特性を使用して、強制色モードを検出することができます。

`<system-color>` 値は、 `<color>` を使用できる場所であればどこでも使用することができます。

構文
--

これらのキーワードは大文字と小文字を区別しませんが、ここでは読み取り可能なように大文字と小文字を混合して掲載しています。

`AccentColor`

アクセント付きユーザーインターフェイスコントロールの背景

`AccentColorText`

アクセント付きユーザーインターフェイスコントロールのテキスト

`ActiveText`

アクティブリンクのテキスト

`ButtonBorder`

コントロールのベース境界色

`ButtonFace`

コントロールの背景色

`ButtonText`

コントロールのテキスト色

`Canvas`

アプリケーションのコンテンツや文書の背景

`CanvasText`

アプリケーションのコンテンツや文書のテキスト色

`Field`

入力フィールドの背景

`FieldText`

入力フィールドのテキスト

`GrayText`

無効なアイテムの文字色（無効なコントロールなど）

`Highlight`

選択項目の背景

`HighlightText`

選択項目のテキスト色

`LinkText`

非アクティブ、未訪問リンクのテキスト

`Mark`

特別にマークされたテキストの背景（HTML の `mark` 要素など）。

`MarkText`

特別にマークされたテキスト（HTML の `mark` 要素など）。

`VisitedText`

訪問済みリンクのテキスト

### 非推奨のシステム色キーワード

以下のキーワードは、以前のバージョンの CSS カラーモジュールで定義されていました。これらを公開ウェブページで使用することは非推奨です。

`ActiveBorder` 
非推奨

アクティブウィンドウの境界線。

`ActiveCaption` 
非推奨

アクティブウィンドウのキャプション。前景色としては `CaptionText` を使用してください。

`AppWorkspace` 
非推奨

複数文書インターフェイスの背景色。

`Background` 
非推奨

デスクトップの背景。

`ButtonHighlight` 
非推奨

境界線のレイヤーによって立体的に現れる 3D 要素の、光源に面する境界線の色。

`ButtonShadow` 
非推奨

境界線のレイヤーによって立体的に現れる 3D 要素の、光源から離れた境界線の色。

`CaptionText` 
非推奨

キャプション、サイズボックス、スクロールバーの矢印ボックスのテキスト。 `ActiveCaption` の背景色と一緒に使用してください。

`InactiveBorder` 
非推奨

非アクティブウィンドウの境界線。

`InactiveCaption` 
非推奨

非アクティブウィンドウのキャプション。 `InactiveCaptionText` の前景色と一緒に使用してください。

`InactiveCaptionText` 
非推奨

非アクティブキャプションのテキストの色。 `InactiveCaption` の背景色と一緒に使用してください。

`InfoBackground` 
非推奨

ツールチップコントロールの背景色。 `InfoText` の前景色と一緒に使用してください。

`InfoText` 
非推奨

ツールチップコントロールの文字色。 `InfoBackground` の背景色と一緒に使用してください。

`Menu` 
非推奨

メニューの背景。 `MenuText` または `-moz-MenuBarText` の前景色と一緒に使用してください。

`MenuText` 
非推奨

メニューのテキスト。 `Menu` の背景色と一緒に使用してください。

`Scrollbar` 
非推奨

スクロールバーの背景色です。

`ThreeDDarkShadow` 
非推奨

境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源から離れた 2 つの境界線のうち、暗い方（一般に外側）の色。

`ThreeDFace` 
非推奨

境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の表面の背景色。 `ButtonText` の前景色と一緒に使用してください。

`ThreeDHighlight` 
非推奨

境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源に面する 2 つの境界線のうち、明るい方（一般に外側）の色。

`ThreeDLightShadow` 
非推奨

境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源に面する 2 つの境界線のうち暗い方（一般に内側）の色。

`ThreeDShadow` 
非推奨

境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源から離れた 2 つの境界線のうち、明るい方（一般に内側）の色。

`Window` 
非推奨

ウィンドウの背景です。 `WindowText` の前景色と一緒に使用してください。

`WindowFrame` 
非推奨

ウィンドウの枠です。

`WindowText` 
非推奨

ウィンドウ内のテキストです。ウィンドウの背景色 `Window` と共に使用してください。

例
-

### システムカラーの使用

この例では、通常 `box-shadow` プロパティを使ってコントラストを取得するボタンがあります。強制色モードでは、 `box-shadow` は強制的に `none` になるので、この例では `forced-colors` メディア特性を使用して、適切な色（この用途では `ButtonBorder`）の境界線が確実に表示されるようにします。

#### HTML


```html
<button class="button">押してください</button>
```


#### CSS


```css
.button {
  border: 0;
  padding: 10px;
  box-shadow:
    -2px -2px 5px gray,
    2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /\* forced-colors モードでは box-shadow は強制的に 'none' になるので、
 代わりに境界を使用します。 \*/
    border: 2px ButtonBorder solid;
  }
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # css-system-colors |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<color>`: これらのキーワードが所属する先のデータ型