Fonction CSS `contrast-color()`

Baseline 2026

Nouvellement disponible

Depuis April 2026, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

La fonction CSS contrast-color() prend une valeur de type <color> et retourne une couleur contrastée garantie ^(angl.).

contrast-color() permet de définir une couleur de texte et de générer automatiquement une couleur d'arrière‑plan contrastée, ou l'inverse. Il évite le besoin de maintenir des paires de couleurs fond/texte.

Syntaxe

css

contrast-color(red)
contrast-color(var(--backgroundColor))

Paramètres

color: Toute valeur <color> valide.

Valeur de retour

Une couleur nommée (<named-color>) : white ou black.

Description

La fonction contrast-color() retourne la valeur white ou black, selon celle qui offre le plus grand contraste avec la couleur d'entrée. Si white et black ont le même contraste avec la couleur d'entrée, white est retournée.

Attention : Il n'y a aucune garantie que les valeurs retournées par la fonction contrast-color() produisent un résultat accessible. Les couleurs de fond moyennes n'offrent généralement pas un contraste suffisant. Il est donc recommandé d'utiliser des couleurs claires ou foncées avec la fonction contrast-color().

Exemples

Texte contrasté pour un bouton

Dans l'exemple suivant, le navigateur applique automatiquement la couleur sélectionnée à l'arrière-plan de l'élément HTML <button> intitulé « Bouton », et la couleur contrastée (noir ou blanc) à son texte.

<label>
  Sélectionnez la couleur d'arrière‑plan du bouton&nbsp;:
  <input type="color" id="colorPicker" value="#660066" />
</label>
<br />
<button>Bouton</button>

css

:root {
  --button-color: lightblue;
}

button {
  background-color: var(--button-color);

  /* Définir automatiquement une couleur de texte contrastée */
  color: contrast-color(var(--button-color));
}

body {
  padding: 1rem;
}

button {
  margin: 3rem;
  padding: 1rem;
  width: 150px;
  font-size: 2rem;
  border-radius: 1rem;
}

@supports not (color: contrast-color(red)) {
  body::before {
    content: "Votre navigateur ne prend pas en charge la fonction contrast-color().";
    background-color: wheat;
    display: block;
    padding: 1rem 0;
    text-align: center;
  }
}

const colorPicker = document.getElementById("colorPicker");
const root = document.documentElement;

function updateColor(color) {
  root.style.setProperty("--button-color", colorPicker.value);
}

colorPicker.addEventListener("input", updateColor);
updateColor();

Utiliser le mode clair et sombre

Dans l'exemple suivant, la requête média prefers-color-scheme est utilisée pour définir une couleur d'arrière‑plan selon les préférences du système d'exploitation ou du navigateur. La fonction contrast-color() est utilisée pour définir automatiquement la couleur du texte.

Essayez de changer le mode sombre ou clair du navigateur ou du système pour voir l'effet.

<pre>
    Q&nbsp;: Comment CSS transforme‑t‑il la lumière en énergie&nbsp;?
  R&nbsp;: Avec <a href="/fr/docs/Web/CSS/font-synthesis">font-synthesis</a>.
</pre>

css

:root {
  --background-color: navy;
}

@media (prefers-color-scheme: light) {
  :root {
    --background-color: wheat;
  }
}

body,
a {
  background-color: var(--background-color);
  color: contrast-color(var(--background-color));
}

body {
  padding: 2rem;
  font-size: 1.2rem;
}

pre {
  margin-top: 3rem;
}

@supports not (color: contrast-color(red)) {
  body::before {
    content: "Votre navigateur ne prend pas en charge la fonction contrast-color().";
    background-color: wheat;
    display: block;
    padding: 1rem 0;
    text-align: center;
  }
}