W3cubDocs

/CSS

<system-color>

The <system-color> CSS data type usually reflects the default color choices used for the different parts of a web page.

However, user agents can provide an accessibility feature called forced colors mode, in which colors are restricted into a user- and user agent-defined palette, overriding the author's choice of colors in certain properties. In forced colors mode, <system-color> exposes the chosen colors, so that the rest of the page can integrate with them. An example of forced colors mode is high contrast mode on Windows.

In forced colors mode, authors should use colors from the <system-color> type for all properties that are not in the set of properties whose colors are overridden. This ensures that the page consistently uses the same color palette across all properties.

Authors can detect forced colors mode using the forced-colors media feature.

A <system-color> value can be used anywhere a <color> can be used.

Syntax

Note that these keywords are case insensitive, but are listed here with mixed case for readability.

AccentColor: Background of accented user interface controls
AccentColorText: Text of accented user interface controls
ActiveText: Text of active links
ButtonBorder: Base border color of controls
ButtonFace: Background color of controls
ButtonText: Text color of controls
Canvas: Background of application content or documents
CanvasText: Text color in application content or documents
Field: Background of input fields
FieldText: Text in input fields
GrayText: Text color for disabled items (e.g. a disabled control)
Highlight: Background of selected items
HighlightText: Text color of selected items
LinkText: Text of non-active, non-visited links
Mark: Background of text that has been specially marked (such as by the HTML mark element)
MarkText: Text that has been specially marked (such as by the HTML mark element)
VisitedText: Text of visited links

Deprecated system color keywords

The following keywords were defined in earlier versions of the CSS Color Module. They are now deprecated for use on public web pages.

ActiveBorder Deprecated: Active window border.
ActiveCaption Deprecated: Active window caption. Should be used with CaptionText as foreground color.
AppWorkspace Deprecated: Background color of multiple document interface.
Background Deprecated: Desktop background.
ButtonHighlight Deprecated: The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
ButtonShadow Deprecated: The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
CaptionText Deprecated: Text in caption, size box, and scrollbar arrow box. Should be used with the ActiveCaption background color.
InactiveBorder Deprecated: Inactive window border.
InactiveCaption Deprecated: Inactive window caption. Should be used with the InactiveCaptionText foreground color.
InactiveCaptionText Deprecated: Color of text in an inactive caption. Should be used with the InactiveCaption background color.
InfoBackground Deprecated: Background color for tooltip controls. Should be used with the InfoText foreground color.
InfoText Deprecated: Text color for tooltip controls. Should be used with the InfoBackground background color.
Menu Deprecated: Menu background. Should be used with the MenuText or -moz-MenuBarText foreground color.
MenuText Deprecated: Text in menus. Should be used with the Menu background color.
Scrollbar Deprecated: Background color of scroll bars.
ThreeDDarkShadow Deprecated: The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDFace Deprecated: The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the ButtonText foreground color.
ThreeDHighlight Deprecated: The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDLightShadow Deprecated: The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDShadow Deprecated: The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
Window Deprecated: Window background. Should be used with the WindowText foreground color.
WindowFrame Deprecated: Window frame.
WindowText Deprecated: Text in windows. Should be used with the Window background color.

Firefox non-standard system color extensions

Firefox also supports some non-standard extensions to the system color keyword set.

-moz-ButtonDefault Non-standard: The border color that goes around buttons that represent the default action for a dialog box.
-moz-ButtonHoverFace Non-standard: The background color of a button that the mouse pointer is over (which would be ThreeDFace or ButtonFace when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverText foreground color.
-moz-ButtonHoverText Non-standard: The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverFace background color.
-moz-CellHighlight Non-standard: Background color for selected item in a tree widget. Should be used with the -moz-CellHighlightText foreground color. See also -moz-html-CellHighlight.
-moz-CellHighlightText Non-standard: Text color for a selected item in a tree. Should be used with the -moz-CellHighlight background color. See also -moz-html-CellHighlightText.
-moz-Combobox Non-standard: Background color for combo-boxes. Should be used with the -moz-ComboboxText foreground color. In versions prior to 1.9.2, use -moz-Field instead.
-moz-ComboboxText Non-standard: Text color for combo-boxes. Should be used with the -moz-Combobox background color. In versions prior to 1.9.2, use -moz-FieldText instead.
-moz-Dialog Non-standard: Background color for dialog boxes. Should be used with the -moz-DialogText foreground color.
-moz-DialogText Non-standard: Text color for dialog boxes. Should be used with the -moz-Dialog background color.
-moz-dragtargetzone Non-standard , -moz-EvenTreeRow Non-standard: Background color for even-numbered rows in a tree. Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-OddTreeRow.
-moz-html-CellHighlight Non-standard: Background color for highlighted item in HTML <select>s. Should be used with the -moz-html-CellHighlightText foreground color. Prior to Gecko 1.9, use -moz-CellHighlight.
-moz-html-CellHighlightText Non-standard: Text color for highlighted items in HTML <select>s. Should be used with the -moz-html-CellHighlight background color. Prior to Gecko 1.9, use -moz-CellHighlightText.
-moz-mac-accentdarkestshadow Non-standard , -moz-mac-accentdarkshadow Non-standard , -moz-mac-accentface Non-standard , -moz-mac-accentlightesthighlight Non-standard , -moz-mac-accentlightshadow Non-standard , -moz-mac-accentregularhighlight Non-standard , -moz-mac-accentregularshadow Non-standard: Accent colors.
-moz-mac-chrome-active Non-standard , -moz-mac-chrome-inactive Non-standard: Colors for inactive and active browser chrome.
-moz-mac-focusring Non-standard , -moz-mac-menuselect Non-standard , -moz-mac-menushadow Non-standard , -moz-mac-menutextselect Non-standard , -moz-MenuHover Non-standard: Background color for hovered menu items. Often similar to Highlight. Should be used with the -moz-MenuHoverText or -moz-MenuBarHoverText foreground color.
-moz-MenuHoverText Non-standard: Text color for hovered menu items. Often similar to HighlightText. Should be used with the -moz-MenuHover background color.
-moz-MenuBarText Non-standard: Text color in menu bars. Often similar to MenuText. Should be used on top of Menu background.
-moz-MenuBarHoverText Non-standard: Color for hovered text in menu bars. Often similar to -moz-MenuHoverText. Should be used on top of -moz-MenuHover background.
-moz-nativehyperlinktext Non-standard: Default platform hyperlink color.
-moz-OddTreeRow Non-standard: Background color for odd-numbered rows in a tree. Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-EvenTreeRow.
-moz-win-communicationstext Non-standard: Should be used for text in objects with appearance: -moz-win-communications-toolbox;.
-moz-win-mediatext Non-standard: Should be used for text in objects with appearance: -moz-win-media-toolbox.
-moz-win-accentcolor Non-standard: Used to access the Windows 10 custom accent color that you can set on the start menu, taskbar, title bars, etc.
-moz-win-accentcolortext Non-standard: Used to access the color of text placed over the Windows 10 custom accent color in the start menu, taskbar, title bars, etc.

Examples

Using system colors

In this example we have a button that normally gets its contrast using the box-shadow property. In forced colors mode, box-shadow is forced to none, so the example uses the forced-colors media feature to ensure there is a border of the appropriate color (ButtonBorder in this case).

HTML

<button class="button">Press me!</button>

CSS

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

@media (forced-colors: active) {
  .button {
    /* Use a border instead, since box-shadow
    is forced to 'none' in forced-colors mode */
    border: 2px ButtonBorder solid;
  }
}

Result

Specifications

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

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`system-color`	1	12	1	3	3.5	1	≤37	18	4	10.1	1	1.0
`mark_marktext_buttonborder`	No	No	109	No	No	No	No	No	109	No	No	No