CSS contrast() Function

CSS contrast() Function

The CSS contrast() function increases or decreases the difference between light and dark areas of an element.

It is used with the filter and backdrop-filter properties to adjust the appearance of images, backgrounds, and other rendered content without modifying the original files.

Syntax

contrast()
contrast(amount)

The contrast() function accepts an optional number or percentage that determines the amount of contrast adjustment.

For example:

.example {
  filter: contrast(150%);
}

This increases the contrast of the rendered element to 150% of its original level.

Additional examples:

filter: contrast(0);
filter: contrast(50%);
filter: contrast(1);
filter: contrast(150%);
filter: contrast(2);
filter: contrast();

The function can also be used with backdrop-filter:

.overlay {
  backdrop-filter: contrast(150%);
}

The contrast() function returns a CSS <filter-function> value. It is not a standalone CSS property.

Parameters

The function accepts one optional parameter.

The default amount is 1, equivalent to 100%. This leaves the original contrast unchanged.

For example:

filter: contrast(1);
filter: contrast(100%);

Both declarations produce the same result.

The parameter may be omitted:

filter: contrast();

This also leaves the original contrast unchanged.

How It Works

The contrast() function adjusts the difference between light and dark colors in the rendered image.

Values below 100% move color channels toward their midpoint, reducing contrast. Values above 100% move them farther from that midpoint, increasing contrast.

For example:

.low-contrast {
  filter: contrast(50%);
}
.normal-contrast {
  filter: contrast(100%);
}
.high-contrast {
  filter: contrast(200%);
}

The first element has reduced contrast, the second retains its original appearance, and the third has increased contrast.

At 0%, the RGB channels become 50% gray:

filter: contrast(0%);

This produces a uniform gray image while preserving its alpha transparency.

Increasing contrast beyond 100% can cause light areas to become white and dark areas to become black as channel values reach their limits.

Contrast Values

Contrast amounts can be expressed as numbers or percentages.

Values greater than 100% are allowed, with no fixed maximum defined by the function.

Negative values are invalid:

filter: contrast(-50%);

Use a value of 0 or greater.

Using with filter

The filter property applies the contrast adjustment to an element's rendered appearance.

For example:

img {
  filter: contrast(150%);
}

This increases the contrast of images matched by the selector.

The same function can be applied to other elements:

.card {
  filter: contrast(120%);
}

When applied to an element containing text, backgrounds, borders, and child elements, the filter affects the rendered result as a whole.

To adjust only an image inside a card, apply the filter directly to the image:

.card img {
  filter: contrast(120%);
}

This leaves the card's text and other content outside the filtered image unaffected.

The original image file is not modified. The browser applies the adjustment when rendering the page.

Using with backdrop-filter

The backdrop-filter property applies contrast adjustments to the content visible behind an element.

For example:

.overlay {
  background-color: rgb(255 255 255 / 20%);
  backdrop-filter: contrast(150%);
}

The background behind the overlay receives increased contrast, while the overlay's own content is not directly filtered by that declaration.

For a reduced-contrast effect:

.overlay {
  background-color: rgb(255 255 255 / 15%);
  backdrop-filter: contrast(50%);
}

A transparent or partially transparent background allows the adjusted backdrop to remain visible.

If the overlay is completely opaque, its background may conceal the backdrop effect.

The filter property changes the element itself, while backdrop-filter changes the backdrop visible through it.

Combining Filter Functions

Multiple filter functions can be combined in a single declaration.

For example:

.example {
  filter: contrast(150%) brightness(110%);
}

This increases both contrast and brightness.

Other combinations include:

filter: contrast(130%) saturate(120%);
filter: contrast(150%) grayscale(50%);
filter: brightness(110%) contrast(125%);
filter: contrast(120%) sepia(30%);

Filter functions are applied in the order they appear.

For example:

filter: brightness(150%) contrast(200%);
filter: contrast(200%) brightness(150%);

These declarations may produce different results because each filter processes the output of the preceding filter.

Use spaces between filter functions, not commas.

Transitions and Animations

The contrast() function can be animated using CSS transitions and keyframes.

For example, an image can increase its contrast when hovered:

.photo {
  filter: contrast(100%);
  transition: filter 0.3s ease;
}
.photo:hover {
  filter: contrast(150%);
}

The browser interpolates the contrast amount between the two values.

A keyframe animation can also change contrast over time:

@keyframes contrast-change {
  0% {
    filter: contrast(100%);
  }
  50% {
    filter: contrast(175%);
  }
  100% {
    filter: contrast(100%);
  }
}
.animated-photo {
  animation: contrast-change 3s ease-in-out infinite;
}

For interfaces that include animation, consider users who prefer reduced motion.

A hover effect can be disabled for those users:

@media (prefers-reduced-motion: reduce) {
  .photo {
    transition: none;
  }
}

Example

The following example compares four contrast settings applied to identical colored backgrounds.

HTML:

<div class="contrast-demo">
  <div class="contrast-demo-item">
    <span>50% Contrast</span>
    <div class="contrast-demo-sample contrast-low">
      <div></div><div></div><div></div>
    </div>
  </div>
  <div class="contrast-demo-item">
    <span>100% Contrast</span>
    <div class="contrast-demo-sample contrast-normal">
      <div></div><div></div><div></div>
    </div>
  </div>
  <div class="contrast-demo-item">
    <span>150% Contrast</span>
    <div class="contrast-demo-sample contrast-high">
      <div></div><div></div><div></div>
    </div>
  </div>
  <div class="contrast-demo-item">
    <span>200% Contrast</span>
    <div class="contrast-demo-sample contrast-higher">
      <div></div><div></div><div></div>
    </div>
  </div>
</div>

CSS:

.contrast-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.contrast-demo-item {
  width: 120px;
  text-align: center;
}
.contrast-demo-item span {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
}
.contrast-demo-sample {
  display: flex;
  width: 120px;
  height: 90px;
}
.contrast-demo-sample div {
  flex: 1;
}
.contrast-demo-sample div:nth-child(1) {
  background-color: #555;
}
.contrast-demo-sample div:nth-child(2) {
  background-color: #999;
}
.contrast-demo-sample div:nth-child(3) {
  background-color: #ddd;
}
.contrast-low {
  filter: contrast(50%);
}
.contrast-normal {
  filter: contrast(100%);
}
.contrast-high {
  filter: contrast(150%);
}
.contrast-higher {
  filter: contrast(200%);
}

At 50%, the three gray shades move closer together. At 150% and 200%, the difference between the dark and light shades becomes more pronounced.

The same contrast adjustments can be applied to photographs and other rendered content.

Backdrop Example

This example demonstrates how backdrop-filter adjusts the contrast of a background visible through an overlay.

HTML:

<div class="contrast-backdrop-demo">
  <div class="contrast-backdrop-overlay">
    Backdrop Contrast: 200%
  </div>
</div>

CSS:

.contrast-backdrop-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  background: linear-gradient(90deg, #444 0% 33%, #999 33% 66%, #ddd 66% 100%);
}
.contrast-backdrop-overlay {
  padding: 20px;
  background-color: rgb(255 255 255 / 15%);
  backdrop-filter: contrast(200%);
  border: 1px solid rgb(255 255 255 / 60%);
  color: #111;
  font-weight: bold;
  text-align: center;
}

The background visible through the overlay has increased contrast. The overlay's text is not directly affected by the backdrop filter.

Only the portion of the background behind the overlay receives this effect.

contrast() vs. brightness()

The contrast() and brightness() functions both adjust rendered colors, but they produce different effects.

For example:

.first {
  filter: contrast(150%);
}
.second {
  filter: brightness(150%);
}

The first increases the separation between light and dark values. The second increases brightness across the image.

Both functions can be combined when an image needs adjustments to brightness and contrast.

Accessibility

The contrast() filter changes visual contrast, but it does not guarantee that text meets accessibility contrast requirements.

For example:

.text-container {
  filter: contrast(150%);
}

This may increase some color differences, but it can also distort colors or reduce readability in certain situations.

Text contrast should be evaluated using the actual rendered foreground and background colors.

For WCAG 2.2 Level AA, normal text generally requires a contrast ratio of at least 4.5:1, while large text generally requires at least 3:1.

These ratios are different from the percentages accepted by the contrast() function.

Do not use contrast(150%) as a substitute for testing a text contrast ratio.

When applying filters to interactive elements, verify that text, icons, and focus indicators remain readable.

Common Uses

The contrast() function can be used for a variety of visual effects.

For example, a gallery image can increase its contrast on hover:

.gallery img {
  filter: contrast(100%);
  transition: filter 0.3s ease;
}
.gallery img:hover {
  filter: contrast(130%);
}

The effect changes the displayed image without requiring a second image file.

Limitations

The contrast() function has several important rules and limitations.

• The optional amount must be a non-negative number or percentage.
• Values above 100% increase contrast, but very large values can remove visible detail.
• A value of 0% creates a uniform gray image rather than a grayscale photograph.
• Applying filter to a container affects its rendered descendants as well.
• The function does not modify the original image file.
• Filter effects can create additional rendering work, especially when applied to large areas or animated frequently.
• Increasing visual contrast does not automatically satisfy accessibility contrast requirements.
• The function cannot be used directly as a color value for properties such as color or background-color.

For example, this is valid:

filter: contrast(150%);

However, this is invalid:

filter: contrast(-50%);

The function cannot accept negative amounts.

It is also important not to confuse contrast() with contrast-color(). The latter is a separate CSS color function that selects a contrasting color.

Browser Support

The CSS contrast() function is Baseline Widely available and has been supported across major browser engines since September 2016.

It can be used with the widely supported filter property. Support for the separate backdrop-filter property should be checked independently.

For a fallback, provide an unfiltered appearance by default:

.example {
  filter: none;
}
@supports (filter: contrast(150%)) {
  .example {
    filter: contrast(150%);
  }
}

Browsers that do not support the filter retain the original appearance.

For current compatibility information, visit Can I Use? .

Specifications

The contrast() function is defined in the Filter Effects Module Level 1 .

The specification defines the accepted values, default amount, and contrast adjustment behavior.

Related filter functions include brightness(), grayscale(), saturate(), sepia(), and invert().