Tailwind CSS - Forced Color Adjust

Tailwind CSS: Managing Forced Color Adjust

The forced-color-adjust utilities in Tailwind CSS are essential for accessibility. They control whether an element’s colors can be overridden by the user agent when a forced colors mode, such as Windows High Contrast Mode, is active.

What is Forced Colors Mode?

Forced Colors Mode is an accessibility feature at the operating system level that forces web content into a limited, user-chosen color palette (e.g., black and white). This dramatically increases contrast and helps users with photosensitivity or low vision. By default, browsers will apply this palette to your website, but some custom UI elements might require their original colors to remain functional.

Forced Color Adjust Utilities

Here are the classes for opting elements in or out of the forced color palette.

Class	CSS Property	Purpose
forced-color-adjust-auto	forced-color-adjust: auto;	The default value. Allows the browser to freely change the element’s colors in forced colors mode. Use this to restore the default behavior on an element where it was disabled.
forced-color-adjust-none	forced-color-adjust: none;	Prevents the browser from changing the element’s colors. This preserves your custom styling but should be used with extreme caution.

Practical Application and Accessibility

When to Use forced-color-adjust-none

Only use forced-color-adjust-none when an element’s meaning is conveyed exclusively through its color, and that meaning would be lost in high contrast mode. A common example is a color picker or a status chart where specific colors represent specific data.

Accessibility Warning

Use forced-color-adjust-none as a last resort. Overusing it can make your site unusable for people who rely on high contrast modes. Always ensure there is an alternative way to understand the content, such as text labels or tooltips.

Example: Preserving Brand Logo Colors

In this example, we have a product card. We want all text and borders to adapt to forced colors mode for readability, but we want to prevent the brand’s logo (represented here by a colored div) from having its colors stripped away. To see the effect, enable forced colors mode in your browser’s developer tools (e.g., in Chrome DevTools > Rendering > 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>

        <!-- This element represents a brand logo or a critical color key -->
        <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>