<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
-
Base border color of controls
-
Background color of controls
-
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.
-
Active window caption. Should be used with
CaptionText
as foreground color. AppWorkspace
Deprecated-
Background color of multiple document interface.
Background
Deprecated-
Desktop background.
-
The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
-
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.
-
Text in caption, size box, and scrollbar arrow box. Should be used with the
ActiveCaption
background color. InactiveBorder
Deprecated-
Inactive window border.
-
Inactive window caption. Should be used with the
InactiveCaptionText
foreground color. -
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 background. Should be used with the
MenuText
or-moz-MenuBarText
foreground color. -
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.
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
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
Specification |
---|
CSS Color Module Level 4 # css-system-colors |
Browser compatibility
BCD tables only load in the browser
See also
<color>
: the data type these keywords belong to