Contrast() - Fonction CSS

contrast()

Résumé des caractéristiques de la fonction contrast()

Description rapide
Ajuste le contraste d'un élément (filtre graphique).
Statut
Standard
Pourcentages
Calculés par rapport au contraste original, autrement dit la valeur 100% ne change pas le contraste.
Module W3C
Module filtres et effets
Références (W3C)
Statut du document: WD (document de travail)

Description de la fonction contrast().

La fonction contrast() modifie le contraste d'une image, ou plus généralement d'un élément quelconque. Le contraste étant l'écart de luminosité entre les tons sombres et les tons clairs. Le contraste peut être augmenté ou réduit suivant la valeur du paramètre donné à la fonction.

La valeur contrast() peut être utilisée avec les propriétés suivantes :

  • backdrop-filter : Applique un filtre graphique sur l'élément situé derrière l'élément ciblé.
  • filter : Applique un filtre graphique (flou, contraste, luminosité...) à un élément.

Syntaxes de la fonction contrast().

  • filter: contrast(50%); n

    n indique l'importance du changement de contraste.
    C'est une valeur numérique positive sans unité ou un pourcentage.

    1. 0 indique une réduction totale du contraste (une image grise).
    2. Une valeur entre 0 et 1 (ou entre 0% et 100%) indique une réduction du contraste.
    3. 1 ou 100% conserve le contraste initial de l'image.
    4. Une valeur supérieure à 1 ou à 100% correspond à une augmentation du contraste.
    5. Si aucune valeur n'est précisée, la valeur par défaut est 1.
    6. Les valeurs négatives sont interdites.

Animation avec la fonction contrast().

Lorsque la valeur du contraste est baissée jusqu'à 0, l'élément est totalement gris. Nous avons utilisé cette particularité pour faire disparaître et apparaître le texte de l'élément ci-dessous.

Coucou

Simulateur : contrast() utilisée avec filter.

filter :
Ajustement du contraste

Simulateur : contrast() utilisée avec backdrop-filter.

Le texte ci-dessous et bien plus facile à lire lorsque le contraste de l'arrière-plan est réduit.

backdrop-filter :
Ajustement du contraste
Amélioration de la lisibilité en
réduisant le contraste de l'arrière-plan

Support de la fonction contrast().

La fonction contrast() est, à l'heure actuelle, bien prise en charge par les navigateurs. Il en est de même pour les autres filtres et effets graphiques.

Colonne 1
Capacité à appliquer un filtre sur un élément, avec la propriété filter.
Colonne 2
Support de la fonction contrast() qui, utilisée avec la propriété filter, permet d'ajuster le contraste d'un élément.
1
Filtres
graphiques
2
Fonction
contrast()
Estimation de la prise en charge globale.
96%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Opéra

Safari

Firefox

Chrome pour Androïd

Chrome

Edge

Androïd Brower

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique de la fonction contrast().

Voir aussi...

De nombreux filtres graphiques sont disponibles en CSS. Ils sont décrits dans la spécification du W3C dénommée "module filtres et effets" (Filter Effects Module). En voici la liste, avec les propriétés permettant de les mettre en œuvre.

Propriétés :

backdrop-filter
Applique un filtre graphique sur l'élément situé derrière l'élément ciblé.
color-interpolation
Définit l'espace de couleurs à utiliser pour calculer les dégradés, les animations et les combinaisons avec la couche alpha.
color-interpolation-filters
Définit dans quel espace de couleurs sont calculés les effets de filtrage. Par défaut cet espace est le linearRGB
filter
Applique un filtre graphique (flou, contraste, luminosité...) à un élément.
flood-color
Définit la couleur des remplissages et des ombrages dans le contexte de filtres SVG.
flood-opacity
Définit l'opacité des remplissages et des ombrages dans le contexte de filtres SVG.
lighting-color
Définit la couleur de l'éclairage dans le contexte d'un filtre SVG.

Fonctions :

blur()
blur() est un filtre graphique utilisable avec la propriété filter. La fonction applique un effet de flou sur l'élément.
brightness()
Ajuste la luminosité d'un élément (filtre graphique).
drop-shadow()
Définit l'ombre d'un élément : dimensions, flou, couleur (filtre graphique).
grayscale()
Convertit un élément en nuances de gris (filtre graphique) de façon plus moins complète. A l'extrême les couleurs peuvent être complètement supprimées.
hue-rotate()
Change les couleurs d'une image en effectuant une rotation des teintes (filtre graphique).
invert()
Inverse les couleurs d'un élément (filtre graphique).
opacity()
Détermine le degré de transparence d'un élément (filtre graphique).
saturate()
Définit la saturation des couleurs d'un élément (filtre graphique).
sepia()
Applique un effet sépia à un élément (filtre graphique).