Understanding the CSS contrast() Filter: How to Control Image Contrast

What Is the contrast() Filter?

The CSS contrast() filter function lets you adjust the contrast of an element, making colors stand out or fade into a grayish tone. Unlike related filters such as brightness() or saturate(), contrast() affects both saturation and lightness while preserving the original hue. This makes it a powerful tool for creating visual emphasis or softening an image.

Understanding the CSS contrast() Filter: How to Control Image Contrast

According to the Filter Effects Module Level 1 specification, contrast() is defined as part of the standard filter functions set.

Syntax and Usage

The official syntax is:

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

In practice, you apply it to an element like this:

filter: contrast(<amount>);

The contrast() function works only with the filter and backdrop-filter CSS properties.

Understanding the Arguments

The function takes a single argument—a number or percentage—that determines the new contrast level. Here’s how different values behave:

Using Percentages

contrast(0%) – Removes all contrast, producing a completely gray image.
contrast(50%) – Reduces contrast by half, resulting in a dull, subdued look.
contrast(100%) – Leaves the element unchanged (the default).
contrast(150%) – Increases contrast to 1.5 times the original, making edges and differences pop.

Using Numbers (0–1 Range)

contrast(0) – Equivalent to 0%: completely gray.
contrast(0.5) – Equivalent to 50%: half contrast.
contrast(1) – Equivalent to 100%: no change.
contrast(1.5) – Equivalent to 150%: increased contrast.

Values above 1 or 100% increase contrast linearly, while negative values are ignored—they produce no effect.

Special Cases

No argument: filter: contrast(); leaves the element unchanged (treated as 1 or 100%).
CSS variables: You can pass a custom property for dynamic control. Example: --amount: 200%; filter: contrast(var(--amount));

How contrast() Affects Color

Like all filter functions, contrast() operates on RGB math. For each pixel, the filter multiplies each RGB channel by the given <amount>, then adds 255 × (0.5 – 0.5 × <amount>) to the result. This formula ensures that:

At 100% (1), the output equals the input.
At 0%, all channels converge to 127.5 (middle gray).
Above 100%, colors become more extreme, pushing dark channels toward black and bright channels toward white.

This mathematical behavior explains why contrast() simultaneously affects saturation and lightness while preserving hue.

Practical Example

The following CSS demonstrates low, normal, and high contrast applied to an image:

.low {
  filter: contrast(50%);
}

.normal {
  filter: contrast(100%);
}

.high {
  filter: contrast(200%);
}

You can see the results in action on a CodePen embed (not shown here due to format constraints).

Browser Compatibility

The contrast() filter is widely supported in modern browsers. Check CanIUse for the latest details.

Summary

Use contrast() to fine‑tune the visual impact of any element. Remember that negative values have no effect, and you can use both numbers (0–∞) and percentages (0%–∞) for precise control. Pair it with CSS custom properties for dynamic theming.

Tags: