Forced Color Adjust Class

Comprehensive guide to Tailwind CSS forced color adjustment utilities for handling high contrast mode and ensuring accessibility across different viewing conditions.

Forced Color Adjust Utilities

forced-color-adjust-auto

forced-color-adjust: auto;

Allows browser to automatically adjust colors in forced-colors mode

forced-color-adjust-none

forced-color-adjust: none;

Prevents browser from adjusting colors, preserving original design

Understanding Forced Colors Mode

Forced colors mode is an accessibility feature that helps users with visual impairments by replacing website colors with a limited, high-contrast color palette.

When It's Activated:

  • Windows High Contrast mode
  • Some screen reader software
  • Browser accessibility settings
  • User-defined color schemes

Benefits:

  • Improved readability for low vision users
  • Reduced eye strain
  • Consistent color experience
  • Better focus on content

Auto vs None Comparison

Interactive Elements

With Auto Adjustment

These elements will adapt to high contrast colors

Card Component

This card will use high contrast colors when needed.

With No Adjustment

These elements preserve original colors

Card Component

This card maintains its original purple color scheme.

<!-- Auto adjustment (recommended for most UI elements) -->
<button class="forced-color-adjust-auto bg-blue-600 text-white px-4 py-3 rounded-lg">
  Primary Button
</button>

<!-- No adjustment (use sparingly) -->
<button class="forced-color-adjust-none bg-blue-600 text-white px-4 py-3 rounded-lg">
  Primary Button
</button>

Common Use Cases

1. Form Controls (Use Auto)

Form controls should use auto adjustment to ensure they remain accessible in high contrast mode.

2. Brand Elements (Consider None)

COMPANY LOGO
R
G
B

Brand elements may use none adjustment to preserve brand identity, but ensure sufficient contrast.

3. Data Visualization (Use None Carefully)

Sales by Quarter

Q1
Q2
Q3
Q4
Q1: $50k
Q2: $75k
Q3: $30k
Q4: $60k

Data visualizations may need color preservation for meaning, but provide alternative ways to convey information.

Best Practices & Guidelines

✅ Use forced-color-adjust-auto for:

  • Form controls (inputs, buttons, selects)
  • Navigation elements
  • Interactive UI components
  • Text content areas
  • General page layout elements

⚠️ Use forced-color-adjust-none sparingly for:

  • Brand logos and identity elements
  • Data visualizations where color conveys meaning
  • Status indicators with specific color coding
  • Images or graphics that lose meaning with color changes

🔧 Testing & Implementation:

  • Test with Windows High Contrast mode enabled
  • Use browser developer tools to simulate forced-colors
  • Ensure 4.5:1 contrast ratio for normal text, 3:1 for large text
  • Provide alternative ways to convey information beyond color
  • Test with actual users who rely on high contrast mode
  • Document decisions to override forced-colors for future reference

💡 Pro Tips:

  • Default behavior is auto - only specify when you need to override
  • Consider using CSS custom properties for colors that need to adapt
  • Use semantic HTML to help browsers make better color decisions
  • Combine with other accessibility features like ARIA labels
  • Regular accessibility audits should include forced-colors testing