contrast-color()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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

contrast-color() permet, par exemple, 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

Exemple : texte contrasté pour un bouton

Dans l'exemple suivant, le navigateur applique automatiquement une couleur contrastée au texte de l'élément <button> de soumission lorsque vous changez sa couleur d'arrière‑plan.

<label>
  Sélectionnez la couleur d'arrière‑plan du bouton&nbsp;:
  <input type="color" id="colorPicker" value="#660066" />
</label>
<br />
<button>Envoyer</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;
    width: 100%;
    text-align: center;
  }

  body > * {
    display: none;
  }
}

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

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

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

Exemple : 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;
    width: 100%;
    text-align: center;
  }

  body {
    background-color: white;
  }

  body > * {
    display: none;
  }
}

Spécifications

Specification
CSS Color Module Level 5 # contrast-color

Compatibilité des navigateurs

Voir aussi

La fonction CSS contrast()
Le module des couleurs CSS
Propriétés personnalisées CSS et var()
Les fonctionnalités @media prefers-contrast et prefers-color-scheme
WCAG : contraste des couleurs
Comment laisser le navigateur choisir une couleur contrastée en CSS ^(angl.) sur webkit.org (2025)
WebAIM Contrast Checker ^(angl.) sur webaim.org (2025)

Help improve MDN

Learn how to contribute

This page was last modified on ⁨13 oct. 2025⁩ by MDN contributors.

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