CSS System Colors

CSS system colors are keyword values that automatically adapt to the user's operating system themes, browser defaults, and accessibility settings. After being deprecated for many years in older specifications, they were completely revamped and standardized in CSS Color Module Level 4.

Modern System Colors

AccentColor

The background color of accented user interface controls (such as checkboxes, radio buttons, or range sliders).

AccentColorText

The text color used on top of accented UI controls.

ButtonFace

The background color of buttons and other interactive controls.

ButtonText

The text color used on buttons and controls.

ButtonBorder

The base border color for controls.

Canvas

The background color of application content or documents (the main page background).

CanvasText

The primary text color used in application content or documents.

Field

The background color of input fields, textareas, and select boxes.

FieldText

The text color inside input fields.

GrayText

The text color used for disabled items or inactive controls.

Highlight

The background color of selected text or items.

HighlightText

The text color of selected text or items.

Mark

The background color of text marked with the HTML <mark> element.

MarkText

The text color for marked text.

Why Use System Colors?

Modern system colors are crucial for web accessibility. When a user enables a feature like Windows High Contrast Mode (detectable via the forced-colors media feature), browsers automatically map these system color keywords to safe, high-contrast values. Using them ensures your custom components remain legible and integrated with the user's custom environment.

For example, if a user has their Windows system set to a very high contrast yellow-on-blue theme, applying color: CanvasText and background-color: Canvas ensures your text and backgrounds automatically match the user's custom theme without requiring media queries.

Syntax

Related Values

System colors work best when combined with modern color functions and media features:

• light-dark(): Use this function to seamlessly switch between a light and dark system color palette depending on the user's preference.
• color-scheme: Declare that your page supports dark and light modes, which enables the system colors to automatically match the user's operating system settings.
• Forced Colors: Detect if the user has enabled a high-contrast mode in their operating system, allowing you to switch to custom fallback values for enhanced accessibility.