<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 ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

<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

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年10月16日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content