CSS contrast() Filter: Adjusting Element Contrast with Percentages
Apply contrast() via filter to adjust element contrast, using percentages or numbers, and verify rendering across browsers.
Add contrast() filter to elements needing contrast adjustment and verify rendering in target browsers.
Summary
CSS contrast() is a filter function that adjusts an element’s contrast by multiplying each RGB channel by a given amount and adding a constant offset. The function accepts either a percentage or a decimal number, with 0% or 0 producing a fully gray image, 100% leaving the element unchanged, and values above 100% increasing contrast linearly. Negative values are ignored, and the function can be used with CSS variables for dynamic control. Contrast() works only with the filter and backdrop-filter properties, and is supported across all modern browsers.
Unlike contrast-color(), which returns a text color, contrast() modifies the visual appearance of the element itself, making light pixels lighter and dark pixels darker. The function is useful for flattening images to improve text readability or for creating hover effects that emphasize product images. Developers can combine contrast() with other filters like brightness() to fine‑tune image presentation. Because it is a pure CSS filter, it does not require JavaScript and keeps styles declarative.
Key changes
- contrast() multiplies each RGB channel by a given amount and adds a constant offset.
- Accepts percentages or decimal numbers; 0%/0 yields gray, 100% no change, >100% increases contrast.
- Negative values are ignored; no effect.
- Works only with filter and backdrop-filter properties.
- Supported across all modern browsers.
- Modifies element appearance, not text color.
- Can be combined with other filters like brightness().
- Enables dynamic contrast adjustments without JavaScript.