Capítulo 29 de 29

Chapter 29: Accessibility

Core Idea

A single utility, forced-color-adjust, controls whether an element participates in the OS-level "forced colors" (Windows High Contrast) mode — the rest of Tailwind's accessibility surface lives in other chapters (sr-only/not-sr-only in Layout, forced-colors: variant in Hover/Focus/Other States, ARIA/inert/RTL variants also in that chapter).

Reference Table

forced-color-adjust: forced-color-adjust-auto (default — the browser overrides the element's colors with the user's forced-colors palette), forced-color-adjust-none (opts the element out, preserving its authored colors — use sparingly, only where the forced palette would genuinely break usability, e.g. a color-coded status indicator or a brand logo that must stay legible in its exact colors).

Code Examples


<button class="bg-blue-600 text-white">Save</button>


<span class="inline-block size-3 rounded-full bg-red-500 forced-color-adjust-none" aria-hidden="true"></span>
<span>Critical status</span>
  • What it demonstrates: leaving the default (auto) for ordinary UI, and opting a single color-coded indicator out of forced-colors mode only because the color itself carries meaning — paired with a text label so the meaning isn't lost for forced-colors users regardless.

Key Takeaways

  1. Default to forced-color-adjust-auto (i.e. don't touch this utility) for almost everything — Windows High Contrast users rely on the OS repainting UI chrome consistently.
  2. Reach for forced-color-adjust-none only when color is the entire information channel and no text/icon backup exists — and even then, prefer adding a redundant non-color cue over opting out.
  3. This one utility is a narrow tool — most of Tailwind's real accessibility toolkit (sr-only, aria-* variants, inert:, focus-visible styling, dark:/forced-colors: variants) lives across the Layout and Hover/Focus/Other States chapters, not here.

Connects To

  • Layout: sr-only/not-sr-only for visually-hidden-but-announced content.
  • Hover, Focus & Other States: the forced-colors: media variant, aria-* attribute variants, and inert: variant for accessibility-driven conditional styling.