<system-color>

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

Le type de donnée CSS <system-color> reflète généralement les choix de couleurs par défaut utilisés pour les différentes parties d'une page web.

Cependant, les agents utilisateur peuvent fournir une fonctionnalité d'accessibilité appelée mode couleurs forcées, dans lequel les couleurs sont limitées à une palette définie par l'utilisateur·ice et l'agent utilisateur, remplaçant le choix de couleurs de l'auteur·ice dans certaines propriétés. En mode couleurs forcées, <system-color> expose les couleurs choisies, afin que le reste de la page puisse s'y intégrer. Un exemple de mode couleurs forcées est le mode contraste élevé de Windows ^(angl.).

En mode couleurs forcées, les auteur·ice·s doivent utiliser les couleurs du type <system-color> pour toutes les propriétés qui ne font pas partie de l'ensemble des propriétés dont les couleurs sont remplacées. Cela garantit que la page utilise de manière cohérente la même palette de couleurs pour toutes les propriétés.

Les auteur·ice·s peuvent détecter le mode couleurs forcées à l'aide de la fonctionnalité média forced-colors.

Une valeur <system-color> peut être utilisée partout où une valeur <color> peut l'être.

Syntaxe

Notez que ces mots-clés sont insensibles à la casse, mais sont listés ici avec une casse mixte pour la lisibilité.

Selon vos paramètres, les couleurs d'exemple affichées dans le tableau peuvent changer. Vous pouvez également consulter cette page avec différents navigateurs, systèmes d'exploitation et paramètres système pour vérifier les différences.

Mot-clé	Description	Exemple
`AccentColor`	Arrière-plan des contrôles d'interface utilisateur accentués.
`AccentColorText`	Texte des contrôles d'interface utilisateur accentués.
`ActiveText`	Texte des liens actifs.
`ButtonBorder`	Couleur de bordure de base des contrôles.
`ButtonFace`	Couleur d'arrière-plan des contrôles.
`ButtonText`	Couleur du texte des contrôles.
`Canvas`	Arrière-plan du contenu de l'application ou des documents.
`CanvasText`	Couleur du texte dans le contenu de l'application ou des documents.
`Field`	Arrière-plan des champs de saisie.
`FieldText`	Texte dans les champs de saisie.
`GrayText`	Couleur du texte pour les éléments désactivés (par exemple, un contrôle désactivé).
`Highlight`	Arrière-plan des éléments sélectionnés.
`HighlightText`	Couleur du texte des éléments sélectionnés.
`LinkText`	Texte des liens non actifs et non visités.
`Mark`	Arrière-plan du texte spécialement marqué (par exemple, par l'élément HTML `mark`).
`MarkText`	Texte spécialement marqué (par exemple, par l'élément HTML `mark`).
`SelectedItem`	Arrière-plan des éléments sélectionnés, par exemple, une case à cocher sélectionnée.
`SelectedItemText`	Texte des éléments sélectionnés.
`VisitedText`	Texte des liens visités.

Mots-clés de couleurs système obsolètes

Les mots-clés suivants étaient définis dans les versions antérieures du module de couleur CSS. Ils sont désormais obsolètes pour une utilisation sur des pages web publiques.

Mot-clé	Description	Remplacement
`ActiveBorder`	Bordure de la fenêtre active	`ButtonBorder`
`ActiveCaption`	Légende de la fenêtre active. À utiliser avec `CaptionText` comme couleur de premier plan.	`Canvas`
`AppWorkspace`	Couleur d'arrière-plan de l'interface à documents multiples.	`Canvas`
`Background`	Arrière-plan du bureau.	`Canvas`
`ButtonHighlight`	Couleur de la bordure exposée à la lumière pour les éléments 3D qui paraissent en relief grâce à cette couche de bordure.	`ButtonFace`
`ButtonShadow`	Couleur de la bordure opposée à la lumière pour les éléments 3D qui paraissent en relief grâce à cette couche de bordure.	`ButtonFace`
`CaptionText`	Texte dans la légende, la zone de taille et la flèche de la barre de défilement. À utiliser avec la couleur d'arrière-plan `ActiveCaption`.	`CanvasText`
`InactiveBorder`	Bordure de la fenêtre inactive.	`ButtonBorder`
`InactiveCaption`	Légende de la fenêtre inactive. À utiliser avec la couleur de premier plan `InactiveCaptionText`.	`Canvas`
`InactiveCaptionText`	Couleur du texte dans une légende inactive. À utiliser avec la couleur d'arrière-plan `InactiveCaption`.	`GrayText`
`InfoBackground`	Couleur d'arrière-plan des info-bulles. À utiliser avec la couleur de premier plan `InfoText`.	`Canvas`
`InfoText`	Couleur du texte des info-bulles. À utiliser avec la couleur d'arrière-plan `InfoBackground`.	`CanvasText`
`Menu`	Arrière-plan du menu. À utiliser avec la couleur de premier plan `MenuText` ou `-moz-MenuBarText`.	`Canvas`
`MenuText`	Texte dans les menus. À utiliser avec la couleur d'arrière-plan `Menu`.	`CanvasText`
`Scrollbar`	Arrière-plan des barres de défilement.	`Canvas`
`ThreeDDarkShadow`	Couleur de la bordure la plus sombre (généralement extérieure) des deux, opposée à la lumière, pour les éléments 3D qui paraissent en relief grâce à deux couches concentriques de bordure.	`ButtonBorder`
`ThreeDFace`	Couleur de fond de la face des éléments 3D qui paraissent en relief grâce à deux couches concentriques de bordure. À utiliser avec la couleur de premier plan `ButtonText`.	`ButtonFace`
`ThreeDHighlight`	Couleur de la bordure la plus claire (généralement extérieure) exposée à la lumière, pour les éléments 3D qui paraissent en relief grâce à deux couches concentriques de bordure.	`ButtonBorder`
`ThreeDLightShadow`	Couleur de la bordure la plus sombre (généralement intérieure) exposée à la lumière, pour les éléments 3D qui paraissent en relief grâce à deux couches concentriques de bordure.	`ButtonBorder`
`ThreeDShadow`	Couleur de la bordure la plus claire (généralement intérieure) opposée à la lumière, pour les éléments 3D qui paraissent en relief grâce à deux couches concentriques de bordure.	`ButtonBorder`
`Window`	Arrière-plan de la fenêtre. À utiliser avec la couleur de premier plan `WindowText`.	`Canvas`
`WindowFrame`	Cadre de la fenêtre.	`ButtonBorder`
`WindowText`	Texte dans les fenêtres. À utiliser avec la couleur d'arrière-plan `Window`.	`CanvasText`

Exemples

Utilisation des couleurs système

Dans cet exemple, nous avons un bouton qui obtient normalement son contraste à l'aide de la propriété box-shadow. En mode couleurs forcées, box-shadow est forcé à none, donc l'exemple utilise la fonctionnalité média forced-colors pour s'assurer qu'il y a une bordure de la couleur appropriée (ButtonBorder dans ce cas).

HTML

html

<button class="button">Appuyez sur moi&nbsp;!</button>

CSS

css

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

@media (forced-colors: active) {
  .button {
    /* Utilisez une bordure à la place, car box-shadow
    est forcé à 'none' en mode couleurs forcées */
    border: 2px ButtonBorder solid;
  }
}

Résultat

Spécifications

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

Compatibilité des navigateurs

Voir aussi

<color> : le type de donnée auquel appartiennent ces mots-clés

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨25 nov. 2025⁩ par les contributeurs du MDN.

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