forced-color-adjust-auto

The forced-color-adjust-auto utility allows the browser to automatically adjust colors when users enable forced-colors mode (high contrast mode).

Class Information

CSS Class

forced-color-adjust-auto

CSS Property

forced-color-adjust: auto;

What is Forced Colors Mode?

Forced colors mode is an accessibility feature that helps users with visual impairments by:

  • High Contrast: Replaces website colors with user-defined high contrast colors
  • Reduced Eye Strain: Provides better readability for users with low vision
  • Consistency: Creates a uniform color scheme across all websites
  • Customization: Users can choose their preferred color combinations

When forced-color-adjust: auto is applied, the browser will automatically replace your custom colors with the user's preferred high contrast colors.

Examples

Buttons with Auto Color Adjustment

These buttons will automatically adjust to high contrast colors when forced-colors mode is enabled. 

<button class="forced-color-adjust-auto bg-blue-600 text-white px-6 py-3 rounded-lg">
  Primary Button
</button>

Cards with Auto Adjustment

Feature Card

This card will adapt to high contrast mode automatically.

Another Card

Colors will be replaced with user's preferred high contrast colors.

<div class="forced-color-adjust-auto bg-purple-600 p-6 rounded-lg">
  <h4 class="text-white font-semibold">Feature Card</h4>
  <p class="text-purple-100">This card will adapt to high contrast mode.</p>
  <button class="forced-color-adjust-auto bg-purple-800 text-white px-4 py-2 rounded">
    Learn More
  </button>
</div>

Form Elements

<input 
  type="text" 
  class="forced-color-adjust-auto w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg text-white"
  placeholder="Enter your name"
>

Usage Guidelines

✅ When to Use:

  • On interactive elements like buttons and form controls
  • For content areas that benefit from high contrast
  • When you want to respect user's accessibility preferences
  • For elements where color conveys important information

💡 Best Practices:

  • This is the default behavior - use when you want standard forced-colors handling
  • Test your design with Windows High Contrast mode enabled
  • Ensure sufficient contrast ratios even in normal mode
  • Use semantic HTML to help browsers make better color adjustments

🔧 Testing:

  • Enable High Contrast mode in Windows Settings
  • Use browser developer tools to simulate forced-colors
  • Test with different high contrast themes
  • Verify that all interactive elements remain usable