contrast()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨septembre 2016⁩.

La fonction CSS contrast() permet d'ajuster le contraste d'une image. Le résultat de cette fonction est une valeur <filter-function>.

Exemple interactif

filter: contrast(1);

filter: contrast(1.75);

filter: contrast(50%);

filter: contrast(0);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntaxe

css

contrast(amount)

Valeurs

amount Facultatif: Contraste du résultat, indiqué sous la forme d'un nombre (<number>) ou d'un pourcentage (<percentage>). Une valeur inférieure à 100% diminue le contraste, tandis qu'une valeur supérieure à 100% l'augmente. Une valeur de 0 ou 0% rend l'image complètement grise, tandis qu'une valeur de 1 ou 100% laisse l'entrée inchangée. Les valeurs négatives ne sont pas autorisées. La valeur initiale pour l'interpolation est 1. La valeur par défaut est 1.

Voici des paires de valeurs équivalentes :

css

contrast(0)    /* Complètement gris */
contrast(0%)

contrast(0.65) /* 65% de contraste */
contrast(65%)

contrast()     /* Aucun effet */
contrast(1)
contrast(100%)

contrast(2)    /* Double le contraste */
contrast(200%)

Syntaxe formelle

<contrast()> = 
  contrast( [ <number> | <percentage> ]? )

Exemples

Avec la propriété `backdrop-filter`

Cet exemple applique un filtre contrast() via la propriété CSS backdrop-filter au paragraphe et au texte à chasse fixe, modifiant les couleurs de la zone derrière les éléments <p> et <code>.

css

.container {
  background: url("unity_for_the_people.jpg") no-repeat center / contain #333399;
}
p {
  backdrop-filter: contrast(0.5);
}
code {
  backdrop-filter: contrast(0.15);
}

.container {
  padding: 3rem;
  width: 30rem;
}
p {
  padding: 0.5rem;
  color: white;
  font-family: sans-serif;
}

<div class="container">
  <p>
    Veillez toujours à ce qu'il y ait suffisamment de contraste entre le texte
    et toutes les couleurs d'arrière-plan. Si vous pensez que votre texte peut
    se retrouver au-dessus d'une image de fond, ajoutez un
    <code>backdrop-filter</code>. Réduire le contraste des couleurs
    d'arrière-plan avec le filtre <code>contrast()</code> peut améliorer la
    lisibilité mais ne garantit pas l'accessibilité.
  </p>
</div>

Cet exemple applique un filtre contrast() via la propriété CSS filter, modifiant le contraste en ajustant les couleurs de l'ensemble de l'élément, y compris le contenu, la bordure, l'arrière-plan et les ombres.

css

p:first-of-type {
  filter: contrast(30%);
}
p:last-of-type {
  filter: contrast(300%);
}

p {
  text-shadow: 2px 2px blue;
  background-color: magenta;
  color: palegoldenrod;
  border: 1em solid rebeccapurple;
  box-shadow:
    inset -5px -5px red,
    5px 5px yellow;
  padding: 0.25rem;
  font-size: 1.25rem;
  font-family: sans-serif;
  width: 85vw;
}

<p>Ce paragraphe a un contraste réduit.</p>
<p>Ce paragraphe a un contraste normal.</p>
<p>Ce paragraphe a un contraste augmenté.</p>

Avec `url()` et un filtre SVG `contrast`

L'élément SVG <filter> permet de définir des effets de filtre personnalisés qui peuvent ensuite être référencés par id. La primitive <feComponentTransfer> du filtre permet un remappage des couleurs au niveau du pixel. Exemple :

html

<svg
  xmlns="http://www.w3.org/2000/svg"
  id="svg"
  viewBox="0 0 240 151"
  height="0"
  width="0"
  overflow="visible"
  color-interpolation-filters="sRGB">
  <filter id="contrast">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5" />
      <feFuncG type="linear" slope="2" intercept="-0.5" />
      <feFuncB type="linear" slope="2" intercept="-0.5" />
    </feComponentTransfer>
  </filter>
</svg>

Ces valeurs produisent le même résultat :

css

filter: contrast(200%);
filter: url("#contrast"); /* avec SVG intégré */
filter: url("folder/fileName.svg#contrast"); /* définition du filtre SVG externe */

Cet exemple montre trois images : l'image avec la fonction de filtre contrast() appliquée, l'image avec un filtre url() équivalent, et l'image originale pour comparaison :

<table cellpadding="5">
  <thead>
    <tr>
      <th><code>contrast()</code></th>
      <th><code>url()</code></th>
      <th>Image d'origine</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="css-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          class="svg-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

.css-filter {
  filter: contrast(200%);
}
.svg-filter {
  filter: url("#contrast");
}
svg:not(:root) {
  display: none;
}

Spécifications

Specification
Filter Effects Module Level 1 # funcdef-filter-contrast

Compatibilité des navigateurs

Voir aussi

Le module des effets de filtre CSS
Les autres fonctions <filter-function> disponibles pour être utilisées dans les valeurs des propriétés filter et backdrop-filter incluent :

Help improve MDN

Learn how to contribute

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

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