Tailwind CSS - 对比度

Tailwind CSS - 对比度（Contrast）

contrast-* 工具类是 Tailwind CSS 滤镜工具包的一部分，允许你调整元素的对比度。这常用于图像，以增强其视觉吸引力或在交互时应用效果。

对比度工具类

Tailwind 提供了一系列预定义的对比度级别。contrast-100 的值是正常的 (100%)，低于 100 的值会降低对比度，高于 100 的值会增加对比度。

类	CSS 属性
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);

交互式示例

以下示例演示了不同的对比度工具类。为了提供更具吸引力的体验，我们还添加了一个 hover 效果来增加对比度，这是一种常见的 UI 模式。

示例：图像对比度图库

<!-- 假设已配置现代 Tailwind CSS -->
<div class="p-8 bg-slate-100">
  <h2 class="text-2xl font-bold mb-6 text-center">图像对比度效果</h2>
  <div class="grid grid-cols-2 md:grid-cols-3 gap-6">

    <!-- 图像源使用 picsum.photos 作为可用的占位符 -->
    <div class="text-center">
      <h3 class="font-semibold mb-2">contrast-50</h3>
      <img alt="低对比度风景" 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="略低对比度风景" 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 (正常)</h3>
      <img alt="正常对比度风景" 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="略高对比度风景" 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="高对比度风景" 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="非常高对比度风景" class="contrast-200 rounded-lg shadow-md transition hover:contrast-200" src="https://picsum.photos/seed/image6/400/300"/>
    </div>

  </div>
</div>

现代特性与最佳实践

任意值

借助 Tailwind 的即时 (JIT) 编译器，你不再受限于默认的缩放级别。你可以使用任意值进行细粒度控制。例如，如果你需要 110% 的特定对比度，可以使用 contrast-[1.1] 类。

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

可访问性 (a11y) 考量

尽管 filter: contrast() 是一个强大的视觉工具，但必须谨慎使用，以确保你的网站保持可访问性：

• 不要依赖它来确保文本可读性： 绝不要将滤镜作为满足 WCAG 文本背景对比度要求的主要方法。始终首先选择可访问的前景和背景颜色。
• 避免极端值： 非常高 (contrast-200) 或非常低 (contrast-0) 的值可能会使有视力障碍的用户难以看清图像。
• 装饰性用途： 这些滤镜最适合用于装饰性图像或细微的交互反馈，而不是用于传达关键信息的元素。