Skip to content

Commit fff603c

Browse files
tristanthebtristantheb
authored
fr: update Web/CSS/color_value/contrast-color (#29769)
updt(l10n): update of `Web/CSS/color_value/contrast-color`
1 parent c2c5f8a commit fff603c

File tree

1 file changed

+163
-10
lines changed
  • files/fr/web/css/color_value/contrast-color

1 file changed

+163
-10
lines changed

‎files/fr/web/css/color_value/contrast-color/index.md‎

Lines changed: 163 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,171 @@
11
---
2-
title: color-contrast()
2+
title: contrast-color()
33
slug: Web/CSS/color_value/contrast-color
44
original_slug: Web/CSS/color_value/color-contrast
55
l10n:
6-
sourceCommit: 78a78cb2c94a5fd970fef00d4629c40c0b9437b7
6+
sourceCommit: 0cc9980e3b21c83d1800a428bc402ae1865326b2
77
---
88

9-
{{CSSRef}}{{SeeCompatTable}}
9+
{{SeeCompatTable}}
1010

11-
La notation fonctionnelle **`color-contrast()`** prend une couleur et la compare à une liste d'autres couleurs (voir [`<color>`](/fr/docs/Web/CSS/color_value) pour les valeurs possibles) afin de sélectionner la valeur de la liste qui offre le contraste le plus important avec la première couleur.
11+
La [fonction de type `<color>`](/fr/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions#les_fonctions_de_couleur) [CSS](/fr/docs/Web/CSS) **`contrast-color()`** prend une valeur {{cssxref("color_value","couleur")}} et retourne une couleur contrastée [garantie <sup>(angl.)</sup>](https://w3c.github.io/wcag/guidelines/22/#contrast-minimum).
12+
13+
`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.
1214

1315
## Syntaxe
1416

1517
```css
16-
color-contrast(wheat vs tan, sienna, #d2691e)
17-
color-contrast(#008080 vs olive, var(--myColor), #d2691e)
18+
contrast-color(red)
19+
contrast-color(var(--backgroundColor))
20+
```
21+
22+
### Paramètres
23+
24+
- `color`
25+
- : Toute valeur {{cssxref("&lt;color&gt;")}} valide.
26+
27+
### Valeur de retour
28+
29+
Une couleur nommée ({{cssxref("named-color")}})&nbsp;: `white` ou `black`.
30+
31+
## Description
32+
33+
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.
34+
35+
> [!WARNING]
36+
> 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()`.
37+
38+
## Exemples
39+
40+
### Exemple : texte contrasté pour un bouton
41+
42+
Dans l'exemple suivant, le navigateur applique automatiquement une couleur contrastée au texte de l'élément {{htmlelement("button")}} de soumission lorsque vous changez sa couleur d'arrière‑plan.
43+
44+
```html hidden
45+
<label>
46+
Sélectionnez la couleur d'arrière‑plan du bouton&nbsp;:
47+
<input type="color" id="colorPicker" value="#660066" />
48+
</label>
49+
<br />
50+
<button>Envoyer</button>
51+
```
52+
53+
```css
54+
:root {
55+
--button-color: lightblue;
56+
}
57+
58+
button {
59+
background-color: var(--button-color);
60+
61+
/* Définir automatiquement une couleur de texte contrastée */
62+
color: contrast-color(var(--button-color));
63+
}
64+
```
65+
66+
```css hidden
67+
body {
68+
padding: 1rem;
69+
}
70+
71+
button {
72+
margin: 3rem;
73+
padding: 1rem;
74+
width: 150px;
75+
font-size: 2rem;
76+
border-radius: 1rem;
77+
}
78+
79+
@supports not (color: contrast-color(red)) {
80+
body::before {
81+
content: "Votre navigateur ne prend pas en charge la fonction contrast-color().";
82+
background-color: wheat;
83+
display: block;
84+
width: 100%;
85+
text-align: center;
86+
}
87+
88+
body > * {
89+
display: none;
90+
}
91+
}
92+
```
93+
94+
```js hidden
95+
const colorPicker = document.getElementById("colorPicker");
96+
const root = document.documentElement;
97+
98+
function updateColor(color) {
99+
root.style.setProperty("--button-color", colorPicker.value);
100+
}
101+
102+
colorPicker.addEventListener("change", updateColor);
103+
updateColor();
104+
```
105+
106+
{{EmbedLiveSample("exemple_texte_contrasté_pour_un_bouton", "", 250)}}
107+
108+
### Exemple : mode clair et sombre
109+
110+
Dans l'exemple suivant, la [requête média](/fr/docs/Web/CSS/CSS_media_queries/Using_media_queries) [`prefers-color-scheme`](/fr/docs/Web/CSS/@media/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.
111+
112+
Essayez de changer le mode sombre ou clair du navigateur ou du système pour voir l'effet.
113+
114+
```html hidden
115+
<pre>
116+
Q&nbsp;: Comment CSS transforme‑t‑il la lumière en énergie&nbsp;?
117+
R&nbsp;: Avec <a href="/fr/docs/Web/CSS/font-synthesis">font-synthesis</a>.
118+
</pre>
119+
```
120+
121+
```css
122+
:root {
123+
--background-color: navy;
124+
}
125+
126+
@media (prefers-color-scheme: light) {
127+
:root {
128+
--background-color: wheat;
129+
}
130+
}
131+
132+
body,
133+
a {
134+
background-color: var(--background-color);
135+
color: contrast-color(var(--background-color));
136+
}
18137
```
19138

20-
### Valeurs
139+
```css hidden
140+
body {
141+
padding: 2rem;
142+
font-size: 1.2rem;
143+
}
144+
145+
pre {
146+
margin-top: 3rem;
147+
}
21148

22-
- `color-contrast( <couleur> vs <couleur>#{2,} )`
23-
- : `<couleur>` est une valeur de type [`<color>`](/fr/docs/Web/CSS/color_value).
149+
@supports not (color: contrast-color(red)) {
150+
body::before {
151+
content: "Votre navigateur ne prend pas en charge la fonction contrast-color().";
152+
background-color: wheat;
153+
display: block;
154+
width: 100%;
155+
text-align: center;
156+
}
24157

25-
`<couleur>#{2,}` est une liste de couleurs (type [`<color>`](/fr/docs/Web/CSS/color_value)) séparées par des virgules, à comparer à la première.
158+
body {
159+
background-color: white;
160+
}
161+
162+
body > * {
163+
display: none;
164+
}
165+
}
166+
```
167+
168+
{{EmbedLiveSample("exemple_mode_clair_et_sombre", "", 250)}}
26169

27170
## Spécifications
28171

@@ -31,3 +174,13 @@ color-contrast(#008080 vs olive, var(--myColor), #d2691e)
31174
## Compatibilité des navigateurs
32175

33176
{{Compat}}
177+
178+
## Voir aussi
179+
180+
- La fonction CSS {{CSSXref("filter-function/contrast", "contrast()")}}
181+
- Le module des [couleurs CSS](/fr/docs/Web/CSS/CSS_colors)
182+
- [Propriétés personnalisées CSS](/fr/docs/Web/CSS/--*) et {{cssxref("var")}}
183+
- Les fonctionnalités {{cssxref("@media")}} [`prefers-contrast`](/fr/docs/Web/CSS/@media/prefers-contrast) et [`prefers-color-scheme`](/fr/docs/Web/CSS/@media/prefers-color-scheme)
184+
- [WCAG&nbsp;: contraste des couleurs](/fr/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable/Color_contrast)
185+
- [Comment laisser le navigateur choisir une couleur contrastée en CSS <sup>(angl.)</sup>](https://webkit.org/blog/16929/contrast-color/) sur webkit.org (2025)
186+
- [WebAIM Contrast Checker <sup>(angl.)</sup>](https://webaim.org/resources/contrastchecker/) sur webaim.org (2025)

0 commit comments

Comments
 (0)