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> ]?…