<system-color> CSS type

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.

Depending on your settings, the sample colors displayed in the table may change. You can also view this page with different browsers, operating systems, and system settings, to check the differences.

KeywordDescriptionSample
AccentColorBackground of accented user interface controls.
AccentColorTextText of accented user interface controls.
ActiveTextText of active links.
ButtonBorderBase border color of controls.
ButtonFaceBackground color of controls.
ButtonTextText color of controls.
CanvasBackground of application content or documents.
CanvasTextText color in application content or documents.
FieldBackground of input fields.
FieldTextText in input fields.
GrayTextText color for disabled items (for example, a disabled control).
HighlightBackground of selected items.
HighlightTextText color of selected items.
LinkTextText of non-active, non-visited links.
MarkBackground of text that has been specially marked (such as by the HTML mark element).
MarkTextText that has been specially marked (such as by the HTML mark element).
SelectedItemBackground of selected items, for example, a selected checkbox.
SelectedItemTextText of selected items.
VisitedTextText of visited links.

Note: To reduce the risk of fingerprinting, some browsers return a fixed value for AccentColor and AccentColorText unless they are used in certain restricted circumstances. See browser compatibility for details.

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.

KeywordDescriptionReplacementSample
ActiveBorderActive window borderButtonBorder
ActiveCaptionActive window caption. Should be used with CaptionText as foreground color.Canvas
AppWorkspaceBackground color of multiple document interface.Canvas
BackgroundDesktop background.Canvas
ButtonHighlightThe color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.ButtonFace
ButtonShadowThe color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.ButtonFace
CaptionTextText in caption, size box, and scrollbar arrow box. Should be used with the ActiveCaption background color.CanvasText
InactiveBorderInactive window border.ButtonBorder
InactiveCaptionInactive window caption. Should be used with the InactiveCaptionText foreground color.Canvas
InactiveCaptionTextColor of text in an inactive caption. Should be used with the InactiveCaption background color.GrayText
InfoBackgroundBackground color for tooltip controls. Should be used with the InfoText foreground color.Canvas
InfoTextText color for tooltip controls. Should be used with the InfoBackground background color.CanvasText
MenuMenu background. Should be used with the MenuText or -moz-MenuBarText foreground color.Canvas
MenuTextText in menus. Should be used with the Menu background color.CanvasText
ScrollbarBackground color of scroll bars.Canvas
ThreeDDarkShadowThe 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.ButtonBorder
ThreeDFaceThe 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.ButtonFace
ThreeDHighlightThe 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.ButtonBorder
ThreeDLightShadowThe 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.ButtonBorder
ThreeDShadowThe 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.ButtonBorder
WindowWindow background. Should be used with the WindowText foreground color.Canvas
WindowFrameWindow frame.ButtonBorder
WindowTextText in windows. Should be used with the Window background color.CanvasText

Examples

undefined

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

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

CSS

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

See also