<system-color>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<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 の背景色と一緒に使用してください。

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

メニューのテキスト。 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

関連情報

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