forced-color-adjust-none

The forced-color-adjust-none utility prevents the browser from automatically adjusting colors in forced-colors mode, preserving your original design.

Class Information

CSS Class

forced-color-adjust-none

CSS Property

forced-color-adjust: none;

⚠️ Use with Caution

Using forced-color-adjust-none can make your content inaccessible to users who rely on high contrast mode. Only use this when you have a specific accessibility need and ensure your design maintains sufficient contrast.

Examples

Auto vs None Comparison

With Auto Adjustment

Auto Card

This card will adapt to high contrast colors.

With No Adjustment

Fixed Card

This card preserves original colors.

In high contrast mode, the left card will change colors while the right card maintains its original appearance. 

<!-- Will adapt to high contrast -->
<div class="forced-color-adjust-auto bg-blue-600 p-4 rounded-lg">
  <h5>Auto Card</h5>
</div>

<!-- Will preserve original colors -->
<div class="forced-color-adjust-none bg-blue-600 p-4 rounded-lg">
  <h5>Fixed Card</h5>
</div>

Brand Elements (Use Case)

BRAND LOGO

Brand colors preserved in high contrast mode

Status Indicators

Online
Away
Offline

Color-coded status indicators maintain their meaning

<!-- Brand logo with preserved colors -->
<div class="forced-color-adjust-none bg-gradient-to-r from-purple-600 to-pink-600 p-6 rounded-lg">
  <div class="forced-color-adjust-none bg-white text-purple-600 px-6 py-3 rounded-lg font-bold">
    BRAND LOGO
  </div>
</div>

<!-- Status indicators -->
<div class="forced-color-adjust-none flex items-center space-x-2">
  <div class="w-3 h-3 bg-green-500 rounded-full"></div>
  <span>Online</span>
</div>

Data Visualization

Chart with Preserved Colors

JanFebMarAprMayJun

Chart colors remain distinct for data interpretation

<div class="forced-color-adjust-none bg-gray-800 p-4 rounded-lg">
  <div class="flex items-end space-x-2 h-32">
    <div class="forced-color-adjust-none bg-blue-500 w-8 h-16 rounded-t"></div>
    <div class="forced-color-adjust-none bg-green-500 w-8 h-24 rounded-t"></div>
    <!-- More chart bars... -->
  </div>
</div>

Usage Guidelines

✅ Appropriate Use Cases:

  • Brand logos and identity elements that must maintain specific colors
  • Data visualizations where color distinctions are critical
  • Status indicators where color conveys specific meaning
  • Images or graphics that lose meaning with color changes

❌ Avoid Using For:

  • General UI elements like buttons and form controls
  • Text content and reading areas
  • Navigation elements
  • Any element where accessibility is more important than brand consistency

🔧 Best Practices:

  • Always ensure sufficient contrast ratios (4.5:1 for normal text, 3:1 for large text)
  • Test with actual high contrast mode users
  • Provide alternative ways to convey information beyond color
  • Use sparingly and only when absolutely necessary
  • Document why you're overriding forced-colors for future maintainers