Color Filter Tool

Overview

The Color Filter tool applies specialized filters to assist users with color vision deficiencies (color blindness). It adjusts color perception by modifying the color spectrum to enhance distinction between colors that may appear similar to users with various types of color blindness.

Features

• Multiple Filter Types: Supports different types of color vision deficiencies
• Real-time Processing: Instant color adjustments across the entire page
• Selective Application: Preserves important visual elements while enhancing distinction
• Medical Accuracy: Based on scientific research on color vision deficiencies
• Step-based Navigation: Cycle through filter options using stepper controls

Settings

Filter Type	Label	Description	Step	Affects
None	Off	No color filtering applied	0	Standard color vision
Protanopia	Red-blind	Red-blind filter with 20% grayscale and 330° hue rotation	1	Difficulty distinguishing red from green
Deuteranopia	Green-blind	Green-blind filter with 25% grayscale and 20° hue rotation	2	Difficulty distinguishing green from red
Tritanopia	Blue-blind	Blue-blind filter with 15% grayscale and 180° hue rotation	3	Difficulty distinguishing blue from yellow
Achromatopsia	Color-blind	Complete color blindness with 100% grayscale	4	Converts to grayscale

Usage

1. Click the Color Filter button (palette icon) in the accessibility toolbar
2. Navigate through filter options using the stepper controls (steps 0-4)
3. Color adjustments apply immediately across the entire page
4. Choose the filter that provides the best color distinction
5. The tool shows current step and filter type in the interface

Accessibility Benefits

• Color Vision Deficiency Support: Essential for users with color blindness
• Enhanced Color Distinction: Improves ability to distinguish between similar colors
• Information Access: Ensures color-coded information remains accessible
• Visual Clarity: Reduces confusion caused by indistinguishable colors
• Independence: Allows users to access content without assistance

Color Vision Types

Protanopia (Red-Blind)

• Prevalence: Affects approximately 1% of males
• Characteristics: Difficulty distinguishing red from green
• Filter Effect: 20% grayscale + 330° hue rotation
• Common Issues: Traffic lights, charts, graphs with red/green indicators

Deuteranopia (Green-Blind)

• Prevalence: Most common form, affects 5% of males
• Characteristics: Reduced sensitivity to green light
• Filter Effect: 25% grayscale + 20° hue rotation
• Common Issues: Nature photography, vegetation, status indicators

Tritanopia (Blue-Blind)

• Prevalence: Rare, affects less than 1% of population
• Characteristics: Difficulty distinguishing blue from yellow
• Filter Effect: 15% grayscale + 180° hue rotation
• Common Issues: Sky/water distinction, blue/purple differentiation

Achromatopsia (Complete Color Blindness)

• Prevalence: Very rare, affects 1 in 30,000 people
• Characteristics: No color perception, sees only in grayscale
• Filter Effect: 100% grayscale conversion
• Benefits: High contrast, no color confusion

Technical Implementation

The tool uses CSS custom properties and filter functions to apply scientifically-based color corrections:

• CSS Variables: Uses --ada-grayscale and --ada-hue-rotate for dynamic filter control
• HTML Classes: Applies ada-filters-active and specific filter classes (ada-filter-{type})
• Registry Integration: Coordinates with other color tools to manage global filter state
• DOM Manipulation: Uses toggleHtmlClass utility for efficient class management

API Usage Example

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

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

// Enable with specific filter type
window.BrowseAidWidget.api.enableTool('color-filter', {
  level: 'protanopia'    // Red-blind filter
});

// Update tool settings
window.BrowseAidWidget.api.updateTool('color-filter', {
  enabled: true,
  level: 'deuteranopia'    // Green-blind filter
});

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

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

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

// Listen for tool changes
const unsubscribe = window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'color-filter') {
    console.log('Color Filter settings changed:', settings);
  }
});

Configuration Options

Option	Type	Values	Default	Description
enabled	boolean	true/false	false	Enables or disables the tool
level	string	'none', 'protanopia', 'deuteranopia', 'tritanopia', 'achromatopsia'	'none'	Type of color filter

Level Examples

• 'none' - No filtering (standard vision) - Step 0
• 'protanopia' - Red-blind filter - Step 1
• 'deuteranopia' - Green-blind filter - Step 2
• 'tritanopia' - Blue-blind filter - Step 3
• 'achromatopsia' - Complete color blindness (grayscale) - Step 4

Usage Patterns

// User profile-based filter selection
const colorVisionProfiles = {
  'normal': 'none',
  'red-blind': 'protanopia',
  'green-blind': 'deuteranopia',
  'blue-blind': 'tritanopia',
  'color-blind': 'achromatopsia'
};

function setColorFilterForProfile(profile) {
  const level = colorVisionProfiles[profile] || 'none';
  window.BrowseAidWidget.api.updateTool('color-filter', {
    enabled: level !== 'none',
    level: level
  });
}

// Step-based navigation (matching UI behavior)
function setColorFilterByStep(step) {
  const filterOptions = [
    'none',           // Step 0
    'protanopia',     // Step 1
    'deuteranopia',   // Step 2
    'tritanopia',     // Step 3
    'achromatopsia'   // Step 4
  ];

  const level = filterOptions[step] || 'none';
  window.BrowseAidWidget.api.updateTool('color-filter', {
    enabled: level !== 'none',
    level: level
  });
}

// Medical assessment-based filter
function setColorFilterForMedicalNeed(assessment) {
  let filterType;

  switch (assessment.type) {
    case 'red-green-deficiency':
      filterType = assessment.severity === 'complete' ? 'protanopia' : 'deuteranopia';
      break;
    case 'blue-yellow-deficiency':
      filterType = 'tritanopia';
      break;
    case 'monochromacy':
      filterType = 'achromatopsia';
      break;
    default:
      filterType = 'none';
  }

  window.BrowseAidWidget.api.updateTool('color-filter', {
    enabled: filterType !== 'none',
    level: filterType
  });
}

// Context-sensitive filtering
function enableColorFilterForContent(contentType) {
  // Different content may benefit from different filters
  const contentFilters = {
    'charts-graphs': 'deuteranopia',    // Most common color blindness
    'traffic-safety': 'protanopia',     // Red-green critical
    'nature-content': 'deuteranopia',   // Green distinction important
    'technical-diagrams': 'achromatopsia' // High contrast needed
  };

  const filter = contentFilters[contentType] || 'none';
  window.BrowseAidWidget.api.updateTool('color-filter', {
    enabled: filter !== 'none',
    level: filter
  });
}