contrast() CSS Function

The contrast() CSS function adjusts the contrast of an element’s rendered content, making the differences between light and dark areas more or less pronounced. When applied, it can enhance or soften the visual intensity of images, text, or other graphical elements within an element. Unlike basic color adjustments, contrast() affects the overall luminance relationships, which can be particularly useful for improving readability, emphasizing details, or creating stylistic effects.

This function is commonly used with the filter property to modify how content appears without altering the original source. The contrast value can be greater than 1 to increase contrast, less than 1 to decrease it, or set to 0 for a completely gray image. Negative values are invalid and will be ignored by the browser.

For example, increasing contrast can make an image appear sharper and more vivid, while lowering it can produce a muted or faded effect. contrast() can also be combined with other brightness(), saturate(), or grayscale() functions to achieve complex visual adjustments in a single filter chain.

Here’s a practical example:

img {
  filter: contrast(1.5);
}

In this example, the image’s contrast is increased by 50%, making dark areas darker and light areas lighter. Similarly, using a value like 0.5 would soften the image’s tones, creating a more subtle appearance.

Another useful scenario is combining contrast() with brightness() to maintain visibility in low-light images:

img {
  filter: brightness(1.2) contrast(1.3);
}

Here, the image is brightened slightly while also enhancing contrast, improving overall clarity. This approach is especially effective for img elements that need both correction and visual impact.