Contrast

Overview

Contrast utilities are bundled and work best on images, badges, and visual surfaces that need sharper or softer tonal separation.

Class	Filter (CSS)	Usage
`.contrast-75`	`filter: contrast(0.75);`	Softer separation
`.contrast-90`	`filter: contrast(0.9);`	Slightly muted contrast
`.contrast-100`	`filter: contrast(1);`	Neutral / no change (matches preview scale)
`.contrast-110`	`filter: contrast(1.1);`	Slightly punchier imagery
`.contrast-125`	`filter: contrast(1.25);`	Stronger tonal separation

<div class="elementor-element contrast-110">
  <img alt="Higher contrast media" src="card-art.jpg"/>
</div>

Use small contrast adjustments first before reaching for stronger values.
Test both light and dark contexts because contrast changes feel different in each.
Avoid over-processing UI imagery that already has strong tonal separation.
Combine with brightness intentionally when refining hero or card media.

Balance contrast with brightness changes

Change color families after tonal corrections