Tailwind CSS - Contrast

Tailwind CSS - Contrast

The contrast-* utilities are part of Tailwind’s CSS filter toolkit, allowing you to adjust the contrast of an element. This is commonly used on images to enhance their visual appeal or to apply effects on interaction.

Contrast Utilities

Tailwind provides a range of pre-defined contrast levels. A value of contrast-100 is normal (100%), while values below 100 decrease contrast and values above 100 increase it.

Class	CSS Properties
contrast-0	filter: contrast(0);
contrast-50	filter: contrast(.5);
contrast-75	filter: contrast(.75);
contrast-100	filter: contrast(1);
contrast-125	filter: contrast(1.25);
contrast-150	filter: contrast(1.5);
contrast-200	filter: contrast(2);

Interactive Example

The following example demonstrates the different contrast utilities. For a more engaging experience, we’ve also added a hover effect that increases the contrast, a common UI pattern.

Example: Image Contrast Gallery

<!-- Assumes a modern Tailwind CSS setup -->
<div class="p-8 bg-slate-100">
  <h2 class="text-2xl font-bold mb-6 text-center">Image Contrast Effects</h2>
  <div class="grid grid-cols-2 md:grid-cols-3 gap-6">

    <!-- The image source uses picsum.photos for a working placeholder -->
    <div class="text-center">
      <h3 class="font-semibold mb-2">contrast-50</h3>
      <img alt="Low contrast landscape" class="contrast-50 rounded-lg shadow-md transition hover:contrast-100" src="https://picsum.photos/seed/image1/400/300"/>
    </div>

    <div class="text-center">
      <h3 class="font-semibold mb-2">contrast-75</h3>
      <img alt="Slightly low contrast landscape" class="contrast-75 rounded-lg shadow-md transition hover:contrast-125" src="https://picsum.photos/seed/image2/400/300"/>
    </div>

    <div class="text-center">
      <h3 class="font-semibold mb-2">contrast-100 (Normal)</h3>
      <img alt="Normal contrast landscape" class="contrast-100 rounded-lg shadow-md transition hover:contrast-125" src="https://picsum.photos/seed/image3/400/300"/>
    </div>

    <div class="text-center">
      <h3 class="font-semibold mb-2">contrast-125</h3>
      <img alt="Slightly high contrast landscape" class="contrast-125 rounded-lg shadow-md transition hover:contrast-150" src="https://picsum.photos/seed/image4/400/300"/>
    </div>

    <div class="text-center">
      <h3 class="font-semibold mb-2">contrast-150</h3>
      <img alt="High contrast landscape" class="contrast-150 rounded-lg shadow-md transition hover:contrast-150" src="https://picsum.photos/seed/image5/400/300"/>
    </div>

    <div class="text-center">
      <h3 class="font-semibold mb-2">contrast-200</h3>
      <img alt="Very high contrast landscape" class="contrast-200 rounded-lg shadow-md transition hover:contrast-200" src="https://picsum.photos/seed/image6/400/300"/>
    </div>

  </div>
</div>

Modern Features and Best Practices

Arbitrary Values

With Tailwind’s Just-in-Time (JIT) compiler, you are not limited to the default scale. You can use arbitrary values for fine-grained control. For example, if you need a specific contrast of 110%, you can use the class contrast-[1.1].

<img class="contrast-[1.1]" src="..." alt="Image with custom contrast">

Accessibility (a11y) Considerations

While filter: contrast() is a powerful visual tool, it must be used with care to ensure your site remains accessible:

• Don’t rely on it for text legibility: Never use filters as the primary method to meet WCAG text-on-background contrast requirements. Always choose accessible foreground and background colors first.
• Avoid extreme values: Very high (contrast-200) or very low (contrast-0) values can make images difficult to see for users with visual impairments.
• Decorative use: These filters are best suited for decorative images or for subtle interactive feedback, rather than for elements that convey critical information.