Supporting High Contrast Mode with Tailwind CSS

What is High Contrast Mode?

Windows High Contrast Mode (now called Contrast Themes) overrides all colors with a user-chosen palette. CSS backgrounds, shadows, and custom colors are removed. Only borders, text, and system colors remain visible.

Testing with forced-colors

/* Detect forced-colors mode */
@media (forced-colors: active) {
  .card {
    /* Borders become essential since shadows and backgrounds are stripped */
    border: 2px solid ButtonText;
  }
  .btn-primary {
    /* System color keywords work in forced-colors */
    background: ButtonFace;
    color: ButtonText;
    border: 2px solid ButtonText;
  }
  .icon {
    /* Ensure icons remain visible */
    forced-color-adjust: auto;
  }
}

Tailwind Strategies for High Contrast

• Always use visible borders on interactive elements, not just background color changes
• Do not rely on box-shadow for element boundaries; shadows are removed in forced-colors
• Use semantic HTML elements (button, a, input) which receive automatic system styling
• Add transparent borders that become visible in high contrast: border border-transparent
• Test with Windows Contrast Themes or Firefox's forced-colors simulation

Transparent Border Technique

<!-- This button relies on background only -->
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg">
  Invisible in high contrast!
</button>

<!-- Better: Add transparent border that shows in forced-colors -->
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg border-2 border-transparent">
  Visible in high contrast
</button>