Color Inversion Tool

The Color Inversion Tool reverses colors on web pages, converting light backgrounds to dark and dark text to light. This creates a high-contrast viewing experience that can reduce eye strain and improve readability.

Features

• Complete Color Reversal: Inverts all colors including text, backgrounds, and UI elements
• High Contrast: Provides maximum color contrast for improved readability
• Instant Toggle: Immediate color inversion with single click activation
• Global Effect Management: Coordinates with other color tools to prevent conflicts

Settings

Level	Description
Disabled	Normal color display
Enabled	Complete color inversion with high contrast

Usage

1. Click the Color Inversion button in the accessibility toolbar
2. All page colors immediately invert to provide high contrast
3. Click again to return to normal color display

Accessibility Benefits

• Visual Impairment Support: Essential for users who read better with inverted colors
• Light Sensitivity Relief: Provides dark backgrounds to reduce glare and discomfort
• Contrast Enhancement: Creates maximum possible contrast between text and backgrounds
• Eye Strain Reduction: Helpful for users with photophobia or light-sensitive conditions
• Night Reading: Improves comfort when reading in low-light environments
• Medical Conditions: Assists users with certain neurological conditions that benefit from inverted displays

Visual Impact

Text and Backgrounds

• White backgrounds become black
• Black text becomes white
• Colored elements invert to complementary colors
• UI components maintain functionality with inverted colors

Excluded Elements

The following elements are automatically excluded from color inversion to maintain readability and natural appearance:

• Images (<img>) - Remain in original colors for better recognition
• Videos (<video>) - Preserve natural visual content
• Audio players (<audio>) - Keep original interface colors
• Embedded content (<object>, <embed>) - Maintain proper display

These exclusions ensure that media content remains visually coherent while text and interface elements benefit from the high-contrast inversion.

Technical Implementation

Uses CSS filter: invert(1) property applied via the ada-invert-colors class to reverse all colors while maintaining the structural integrity of the page. Media elements (images, videos, audio, objects, embeds) receive a counter-inversion to preserve their original appearance. The tool also manages the global ada-filters-active class to coordinate with other color-related tools.

API Usage Example

The Color Inversion tool can be programmatically controlled using the widget API:

// Basic activation
window.BrowseAidWidget.api.enableTool('color-inversion');

// Toggle the tool on/off
const isEnabled = window.BrowseAidWidget.api.toggleTool('color-inversion');
console.log('Color Inversion is now:', isEnabled ? 'enabled' : 'disabled');

// Get current settings
const settings = window.BrowseAidWidget.api.getToolState('color-inversion');
console.log('Current Color Inversion enabled:', settings.enabled);

// Disable the tool
window.BrowseAidWidget.api.disableTool('color-inversion');

// Listen for tool changes
const unsubscribe = window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'color-inversion') {
    console.log('Color Inversion is now:', settings.enabled ? 'enabled' : 'disabled');
  }
});

Usage Patterns

// Simple condition-based activation
function setInversionForCondition(condition) {
  const shouldEnable = ['photophobia', 'migraine-sensitive', 'low-vision'].includes(condition);

  if (shouldEnable) {
    window.BrowseAidWidget.api.enableTool('color-inversion');
  } else {
    window.BrowseAidWidget.api.disableTool('color-inversion');
  }
}

// Environmental adaptation
function setInversionForEnvironment(environment) {
  const shouldEnable = ['dark-room', 'bright-light'].includes(environment);

  if (shouldEnable) {
    window.BrowseAidWidget.api.enableTool('color-inversion');
  } else {
    window.BrowseAidWidget.api.disableTool('color-inversion');
  }
}

// Time-based inversion
function setTimeBasedInversion() {
  const hour = new Date().getHours();
  const isNightTime = hour >= 22 || hour <= 6;

  if (isNightTime) {
    window.BrowseAidWidget.api.enableTool('color-inversion');
  } else {
    window.BrowseAidWidget.api.disableTool('color-inversion');
  }
}

// Check if tool is currently active
function isColorInversionActive() {
  const settings = window.BrowseAidWidget.api.getToolState('color-inversion');
  return settings.enabled === true;
}

// Simple toggle function
function toggleColorInversion() {
  window.BrowseAidWidget.api.toggleTool('color-inversion');
}