contrast()

The CSS contrast() filter function increases or decreases the contrast of an element, either making colors pop out more or dulling them to gray. Unlike other filter functions like brightness() or saturate(), contrast() affects both saturation and lightness, keeping only the color’s hue.

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

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

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

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

Syntax

The official syntax for the contrast() function is:

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

Or simply:

filter: contrast(<amount>);

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

Arguments

/* Using percentages */
filter: contrast(0%); /* Totally grayed out */
filter: contrast(50%); /* Partially grayed out */
filter: contrast(100%); /* No change */
filter: contrast(150%); /* Element is 1.5 times more defined */

/* Using numbers (0–1 range) */
filter: contrast(0); /* Totally grayed out */
filter: contrast(0.5); /* Partially grayed out */
filter: contrast(1); /* No change */
filter: contrast(1.5); /* Element is 1.5 times more defined */

/* Using percentages */
filter: contrast(0%); /* Totally grayed out */
filter: contrast(50%); /* Partially grayed out */
filter: contrast(100%); /* No change */
filter: contrast(150%); /* Element is 1.5 times more defined */

/* Using numbers (0–1 range) */
filter: contrast(0); /* Totally grayed out */
filter: contrast(0.5); /* Partially grayed out */
filter: contrast(1); /* No change */
filter: contrast(1.5); /* Element is 1.5 times more defined */

/* Works with CSS variables */
--amount: 200%;
filter: contrast(--amount);

/* No argument */
filter: contrast(); /* No change */

/* Negative value */
filter: contrast(-1.5); /* No effect */
filter: contrast(--amount);

/* No argument */
filter: contrast(); /* No change */

/* Negative value */
filter: contrast(-1.5); /* No effect */

The contrast() function takes a single argument, which can be a positive decimal or percentage value. The argument determines the new contrast for the element, where:

• 0 or 0% dries out all contrast from the element, resulting in a completely gray image.
• 1 or 100% leaves the element completely unchanged.
• Values above 1 or 100% increase the contrast linearly.

Negative values aren’t allowed. But CSS variables are:

.element {
  --filter-amount: 150%;
  filter: contrast(var(--filter-amount));
}

How contrast() affects color

Like other filter functions, the contrast() filter operates purely on RGB math. Specifically, given an <amount> it multiplies each RGB channel by that <amount> and then adds 255 * (0.5 - 0.5 * <amount>) to the result. In practice, this affects colors in one of two ways:

• High contrast (greater than 1) makes light pixels get lighter and dark pixels get darker, so colors become more vivid.
• Low contrast (smaller than 1) pulls all pixels toward a middle gray. This reduces the difference between light and dark areas, making the image look flat and muted.

Basic usage

Some background images, usually in hero sections or carousels, can make the foreground text difficult to read. Especially if it has very bright and dark colors, which compete with any text color. To solve this, we can use contrast() to reduce the difference between the image’s whites and blacks, making text more readable against the whole image.

img {
    filter: contrast(70%) brightness(60%);
}

The low contrast flattens the image, and as a plus, we can also reduce the image’s brightness to make the text pop regardless of its colors.

Demo: Making product card images pop on hover

Another useful application for contrast() is to highlight an image in a user’s interaction. For example, in a row of image cards, we could increase the image’s contrast and also scale it on hover

.card img {
  transition:
    filter 0.4s ease,
    transform 0.4s ease;
}

.card:hover img {
  filter: contrast(125%);
  transform: scale(1.05);
}

Is contrast() the same as contrast-color()?

While both CSS functions have similar names, they are not to be confused with each other.

• contrast() is a filter function that makes an element more vivid by making whites lighter and blacks darker.
• contrast-color() returns the text color with the highest contrast to a solid background. Its resulting color is either white or black, depending on which color contrasts most with the background. It is also not a filter function.

Browser support

The contrast() function is currently supported across all modern browsers.

contrast() originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

​