Contrast Tool

Overview

The Contrast tool adjusts color contrast between text and backgrounds to improve readability. It analyzes existing color combinations using WCAG contrast ratio calculations and dynamically adjusts colors to meet accessibility standards.

Features

• WCAG Compliance: Ensures contrast ratios meet accessibility guidelines
• Dynamic Analysis: Real-time color contrast calculations
• Selective Enhancement: Targets text and background combinations
• Preserve Design: Maintains visual hierarchy while improving readability
• Mobile Support: Works across all device types

Settings

Level	Contrast Ratio	Description
Normal	1.0	Default website contrast levels
Low Contrast	0.7	Reduced contrast for light sensitivity
High Contrast	1.4	Enhanced contrast for better readability

Usage

1. Click the Contrast button in the accessibility toolbar
2. Select your preferred contrast level using the stepper controls
3. Text and background colors adjust automatically
4. Fine-tune the level based on your visual needs

Accessibility Benefits

• Low Vision Support: Essential for users with reduced visual acuity
• Color Vision Deficiency: Helps distinguish between similar colors
• Age-Related Changes: Compensates for decreased contrast sensitivity
• Environmental Factors: Improves readability in bright or dim conditions
• Cognitive Support: Reduces visual processing load

Technical Implementation

Uses advanced color analysis algorithms to calculate luminance ratios and apply appropriate contrast adjustments while maintaining color relationships and visual design integrity.

API Usage Example

The Contrast tool can be programmatically controlled using the widget API. Here's how to enable and customize the tool:

// Basic activation with default contrast adjustment
window.BrowseAidWidget.api.enableTool('contrast');

// Enable with specific contrast level
window.BrowseAidWidget.api.enableTool('contrast', {
  level: 1.4    // High contrast adjustment (0.7, 1.0, or 1.4)
});

// Update tool settings
window.BrowseAidWidget.api.updateTool('contrast', {
  enabled: true,
  level: 0.7    // Low contrast adjustment
});

// Toggle the tool on/off
const isEnabled = window.BrowseAidWidget.api.toggleTool('contrast');
console.log('Contrast tool is now:', isEnabled ? 'enabled' : 'disabled');

// Toggle with specific level when enabling
window.BrowseAidWidget.api.toggleTool('contrast', {
  level: 1.4    // High contrast when enabling
});

// Get current settings
const settings = window.BrowseAidWidget.api.getToolState('contrast');
console.log('Current Contrast settings:', settings);

// Disable the tool (reset to normal contrast)
window.BrowseAidWidget.api.disableTool('contrast');

// Listen for tool changes
const unsubscribe = window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'contrast') {
    console.log('Contrast settings changed:', settings);
    console.log('Current level:', settings.level);
  }
});

Configuration Options

Option	Type	Values	Default	Description
enabled	boolean	true/false	false	Enables or disables the tool
level	number	0.7, 1.0, 1.4	1.0	Predefined contrast adjustment levels

Level Options

• 0.7 - Low Contrast: Reduced contrast for light sensitivity
• 1.0 - Normal: Default website contrast (no change)
• 1.4 - High Contrast: Enhanced contrast for better readability

Advanced Usage Patterns

// Cycle through available contrast levels
const CONTRAST_LEVELS = [1.0, 0.7, 1.4];
let currentLevelIndex = 0;

function cycleContrast() {
  currentLevelIndex = (currentLevelIndex + 1) % CONTRAST_LEVELS.length;
  const newLevel = CONTRAST_LEVELS[currentLevelIndex];

  window.BrowseAidWidget.api.updateTool('contrast', {
    enabled: newLevel !== 1.0, // Disable when at normal level
    level: newLevel
  });
}

// User preference-based contrast
const userVisionProfile = 'low-vision'; // Could be from user settings
const contrastLevels = {
  'normal': 1.0,
  'light-sensitive': 0.7,
  'low-vision': 1.4,
  'severe-impairment': 1.4  // Maximum available level
};

window.BrowseAidWidget.api.enableTool('contrast', {
  level: contrastLevels[userVisionProfile] || 1.0
});

// Simple contrast adjustment functions
function enableLowContrast() {
  window.BrowseAidWidget.api.enableTool('contrast', { level: 0.7 });
}

function enableHighContrast() {
  window.BrowseAidWidget.api.enableTool('contrast', { level: 1.4 });
}

function resetContrast() {
  window.BrowseAidWidget.api.disableTool('contrast');
}