Tailwind CSS - 强制颜色调整

Tailwind CSS：管理强制颜色调整

Tailwind CSS 中的 forced-color-adjust 工具类对于可访问性至关重要。当强制颜色模式（例如 Windows 高对比度模式）激活时，它们控制元素的颜色是否可以被用户代理覆盖。

什么是强制颜色模式？

强制颜色模式是操作系统层面的一项可访问性功能，它强制将网页内容转换为有限的、用户选择的调色板（例如，黑白色）。这显著提高了对比度，并有助于光敏性或低视力用户。默认情况下，浏览器会将此调色板应用于你的网站，但某些自定义 UI 元素可能需要保留其原始颜色以保持功能性。

强制颜色调整工具类

以下是用于选择元素是否遵守强制颜色调色板的类。

Class	CSS Property	Purpose
forced-color-adjust-auto	forced-color-adjust: auto;	默认值。 允许浏览器在强制颜色模式下自由更改元素的颜色。用于恢复被禁用的元素的默认行为。
forced-color-adjust-none	forced-color-adjust: none;	阻止浏览器更改元素的颜色。这会保留你的自定义样式，但应极其谨慎使用。

实际应用与可访问性

何时使用 forced-color-adjust-none

仅当元素的含义完全通过其颜色来传达，并且该含义在高对比度模式下会丢失时，才使用 forced-color-adjust-none。一个常见示例是颜色选择器或状态图表，其中特定颜色代表特定数据。

可访问性警告

将 forced-color-adjust-none 作为最后的手段。 过度使用会导致你的网站对依赖高对比度模式的用户不可用。始终确保有理解内容的替代方式，例如文本标签或工具提示。

示例：保留品牌标志颜色

在此示例中，我们有一个产品卡片。我们希望所有文本和边框都能适应强制颜色模式以提高可读性，但我们希望阻止品牌标志（此处由一个彩色 div 表示）的颜色被移除。要查看效果，请在浏览器的开发者工具中启用强制颜色模式（例如，在 Chrome DevTools > 渲染 (Rendering) > 模拟 CSS 媒体特性 (Emulate CSS media feature) forced-colors: active）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forced Color Adjust</title>
    <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-white dark:bg-slate-900 p-8 font-sans">

    <div class="max-w-sm mx-auto bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg p-6 shadow-md">
        <h2 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
            Product Card
        </h2>

        <p class="text-slate-600 dark:text-slate-400 mb-4">
            This text and the card's border will adapt to the user's high contrast settings.
        </p>

        <!-- 此元素代表品牌标志或关键颜色键 -->
        <div class="forced-color-adjust-none bg-gradient-to-r from-blue-500 to-purple-600 p-4 rounded-md">
            <p class="text-white font-semibold text-center">BrandLogo</p>
        </div>
        <p class="text-xs text-slate-500 mt-2">This logo's colors are preserved.</p>
    </div>

</body>
</html>