Saturation Tool

Overview

The Saturation tool adjusts color intensity and vibrancy to help users with visual processing difficulties, color sensitivity, or specific visual preferences. It dynamically modifies color saturation using CSS filters while maintaining the original content structure and ensuring accessibility standards are preserved.

Features

• Real-time Color Adjustment: Instant saturation modification across all page elements
• Four Preset Levels: Carefully calibrated saturation options for different needs
• Contrast Preservation: Maintains readability while adjusting color intensity
• CSS Filter Implementation: Uses modern browser capabilities for efficient rendering
• Registry Integration: Coordinates with other color tools to prevent conflicts

Available Options

The tool provides four distinct saturation levels accessible through a cycling interface:

Option	Saturation Level	Description	Use Case
Normal	100%	Default website colors (disabled state)	Standard browsing
Enhanced	150%	Increased color vibrancy	Low color perception, mood enhancement
Reduced	70%	Decreased color intensity	Color sensitivity, ADHD support
Grayscale	0%	Complete color removal	Severe sensitivity, focus enhancement

Usage

User Interface

1. Click the Saturation button in the accessibility toolbar
2. Each click cycles through the available options in order
3. The button displays the current saturation level
4. Visual changes apply immediately across the entire page

Button States

• Inactive: Shows "Normal" when at 100% saturation
• Active: Displays current level (Enhanced, Reduced, or Grayscale)
• Cycling: Automatically moves to next option on each activation

Accessibility Benefits

Enhanced Saturation (150%)

• Target Users: Individuals with reduced color perception
• Benefits: Improved color distinction, better mood support
• Applications: Color-blind users, depression management
• Considerations: May increase eye strain for sensitive individuals

Reduced Saturation (70%)

• Target Users: People with sensory processing disorders
• Benefits: Calmer visual experience, reduced overstimulation
• Applications: ADHD, anxiety disorders, autism spectrum
• Considerations: May reduce effectiveness of color-coded information

Grayscale (0%)

• Target Users: Users with severe color sensitivity or focus needs
• Benefits: Complete elimination of color distractions
• Applications: Extreme photosensitivity, concentration enhancement
• Considerations: Loss of all color-based visual cues

Technical Implementation

The tool uses CSS custom properties and filter effects for optimal performance:

• CSS Variable: --ada-saturation controls the saturation level
• HTML Classes:
  • ada-saturation-active indicates the tool is active
  • ada-filters-active coordinates with other color tools
• Filter Application: Applied globally via CSS filters for consistent results
• Performance: Leverages GPU acceleration for smooth rendering

API Reference

Basic Usage

// Enable the saturation tool
window.BrowseAidWidget.api.enableTool('saturation');

// Enable with specific level
window.BrowseAidWidget.api.enableTool('saturation', {
  level: 150    // Enhanced saturation
});

// Update saturation level
window.BrowseAidWidget.api.updateTool('saturation', {
  enabled: true,
  level: 70     // Reduced saturation
});

// Toggle the tool
const isActive = window.BrowseAidWidget.api.toggleTool('saturation');

// Get current settings
const settings = window.BrowseAidWidget.api.getToolState('saturation');

Configuration Options

Property	Type	Values	Default	Description
enabled	boolean	true | false	false	Activates the saturation tool
level	number	0 | 70 | 100 | 150	100	Saturation percentage level

Valid Level Values

The tool accepts only these specific saturation levels:

• 100 - Normal (tool disabled)
• 150 - Enhanced
• 70 - Reduced
• 0 - Grayscale

Passing other values will not apply changes to maintain consistency with the UI cycling behavior.

Advanced Usage Examples

// Cycle through all saturation options
const saturationLevels = [100, 150, 70, 0];
let currentIndex = 0;

function cycleSaturation() {
  const level = saturationLevels[currentIndex];
  window.BrowseAidWidget.api.updateTool('saturation', {
    enabled: level !== 100,
    level: level
  });
  currentIndex = (currentIndex + 1) % saturationLevels.length;
}

// Apply saturation based on user preference
function applySaturationPreference(userProfile) {
  const profileSettings = {
    'default': 100,
    'colorBlind': 150,
    'adhd': 70,
    'photosensitive': 0
  };

  const level = profileSettings[userProfile] || 100;
  window.BrowseAidWidget.api.updateTool('saturation', {
    enabled: level !== 100,
    level: level
  });
}

// Listen for saturation changes
window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'saturation') {
    console.log(`Saturation ${settings.enabled ? 'enabled' : 'disabled'} at ${settings.level}%`);
  }
});

// Check if saturation is currently active
const saturationState = window.BrowseAidWidget.api.getToolState('saturation');
const isActive = saturationState?.enabled && saturationState?.level !== 100;

Integration with Accessibility Profiles

The saturation tool integrates seamlessly with accessibility profiles:

// Profile-based saturation configuration
const profileSaturationSettings = {
  'motor': 100,        // No change needed
  'visual': 150,       // Enhanced for better visibility
  'cognitive': 70,     // Reduced for less distraction
  'adhd': 70,         // Calming colors
  'seizure': 0        // Grayscale for safety
};

// Apply saturation for specific profile
function enableProfileSaturation(profileName) {
  const level = profileSaturationSettings[profileName];
  if (level !== undefined) {
    window.BrowseAidWidget.api.updateTool('saturation', {
      enabled: level !== 100,
      level: level
    });
  }
}

Related Tools

The Saturation tool works in coordination with other color adjustment tools:

• Contrast Tool - For brightness adjustment
• Color Filter - For color perception assistance
• Dark Mode - For overall theme changes
• Blue Light Filter - For eye strain reduction