contrast-color()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
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
contrast-color(red)
contrast-color(var(--backgroundColor))
Paramètres
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.
: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));
}
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.
: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));
}
Spécifications
Specification |
---|
CSS Color Module Level 5> # contrast-color> |
Compatibilité des navigateurs
Loading…
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
etprefers-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)