contrast()

Baseline Widely available

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

Die contrast() CSS Funktion passt den Kontrast des Eingabebildes an. Ihr Ergebnis ist eine <filter-function>.

Syntax

css

contrast(amount)

Werte

amount: Der Kontrast des Ergebnisses, angegeben als <number> oder <percentage>. Ein Wert unter 100% verringert den Kontrast, während ein Wert über 100% ihn erhöht. Ein Wert von 0 oder 0% erzeugt ein komplett graues Bild, während ein Wert von 1 oder 100% das Eingabebild unverändert lässt. Negative Werte sind nicht erlaubt. Der Anfangswert für Interpolation ist 1.

Folgende Paare von Werten sind äquivalent:

css

contrast(0) /* Completely gray */
contrast(0%)

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

contrast(1)     /* No effect */
contrast(100%)

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

Formale Syntax

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

Dieses Beispiel wendet einen contrast()-Filter über die backdrop-filter CSS-Eigenschaft auf den Absatz und den monospaced Text an, wodurch die Farben des Bereichs hinter dem <p> und <code> verschoben werden.

css

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

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

<div class="container" style="background-image: url(unity_for_the_people.jpg);">
  <p>
    Always ensure there is enough contrast between text and all background
    colors. If you think your text may land on top of a background image,
    include a <code>backdrop-filter</code>. Reducing the contrast of background
    colors with the <code>contrast()</code> filter may improve legibility but
    does not guarantee accessibility.
  </p>
</div>

Mit der filter-Eigenschaft

Dieses Beispiel wendet einen contrast()-Filter über die filter CSS-Eigenschaft an, indem der Kontrast durch Farbverschiebung des gesamten Elements einschließlich Inhalt, Rand, Hintergrund und Schatten verändert wird.

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>This paragraph has reduced contrast.</p>
<p>This paragraph has normal contrast.</p>
<p>This paragraph has increased contrast.</p>

Mit url() und dem SVG-Kontrastfilter

Das SVG-Element <filter> wird verwendet, um benutzerdefinierte Filtereffekte zu definieren, die dann mit id referenziert werden können. Das <filter>-Primitive <feComponentTransfer> ermöglicht die Farbumwandlung auf Pixelebene. Gegeben sind folgende:

svg

  <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>

.svgFilterLive {
  filter: url(#contrast2);
}

Diese Werte ergeben die gleichen Ergebnisse:

css

filter: contrast(200%);
filter: url(#contrast); /* with embedded SVG */
filter: url(folder/fileName.svg#contrast); /* external svg filter definition */

Dieses Beispiel zeigt drei Bilder: das Bild mit einer contrast()-Filterfunktion angewendet, das Bild mit einem äquivalenten url()-Filter angewendet und die Originalbilder zum Vergleich:

<table cellpadding="5">
  <thead>
    <tr>
      <th><code>contrast()</code></th>
      <th><code>url()</code></th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          style="filter: contrast(200%)"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          class="svgFilterLive"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
        <svg
          xmlns="http://www.w3.org/2000/svg"
          id="svg"
          viewBox="0 0 240 151"
          height="0"
          width="0"
          style="overflow: visible"
          color-interpolation-filters="sRGB">
          <filter id="contrast2">
            <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>
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

CSS Filtereffekte-Modul
Die anderen <filter-function>-Funktionen, die in Werten der filter und backdrop-filter Eigenschaften verwendet werden können, sind: