class VisualAccessibilityManager { constructor(options = {}) { this.config = { // Contrast standards contrastLevels: { AA: { normal: 4.5, large: 3.0, nonText: 3.0 }, AAA: { normal: 7.0, large: 4.5, nonText: 4.5 } }, // Text size thresholds (px) largeTextThreshold: 18, boldLargeTextThreshold: 14, // Color blindness simulation enableColorBlindnessTest: true, colorBlindnessTypes: ['protanopia', 'deuteranopia', 'tritanopia', 'achromatopsia'], // User preferences respectUserPreferences: true, enableHighContrastMode: true, enableDarkMode: true, // Debug and testing debugMode: false, showContrastRatios: false, ...options }; this.colorSchemes = new Map(); this.contrastCache = new Map(); this.userPreferences = this.detectUserPreferences(); this.activeFilters = []; this.init(); } init() { this.setupColorSchemes(); this.setupUserPreferenceListeners(); this.setupContrastMonitoring(); this.setupAccessibilityControls(); this.checkInitialContrast(); } // Color Contrast Calculation and Validation calculateLuminance(r, g, b) { // Normalize RGB values to 0-1 range const normalize = (value) => { const normalized = value / 255; return normalized <= 0.03928 ? normalized / 12.92 : Math.pow((normalized + 0.055) / 1.055, 2.4); }; const rLuminance = normalize(r); const gLuminance = normalize(g); const bLuminance = normalize(b); // Calculate relative luminance using ITU-R BT.709 coefficients return 0.2126 * rLuminance + 0.7152 * gLuminance + 0.0722 * bLuminance; } calculateContrastRatio(color1, color2) { const cacheKey = `${color1}-${color2}`; if (this.contrastCache.has(cacheKey)) { return this.contrastCache.get(cacheKey); } const rgb1 = this.parseColor(color1); const rgb2 = this.parseColor(color2); const luminance1 = this.calculateLuminance(rgb1.r, rgb1.g, rgb1.b); const luminance2 = this.calculateLuminance(rgb2.r, rgb2.g, rgb2.b); const lighter = Math.max(luminance1, luminance2); const darker = Math.min(luminance1, luminance2); const contrast = (lighter + 0.05) / (darker + 0.05); // Cache the result this.contrastCache.set(cacheKey, contrast); this.contrastCache.set(`${color2}-${color1}`, contrast); return contrast; } parseColor(color) { // Handle different color formats (hex, rgb, hsl, named colors) if (typeof color !== 'string') return { r: 0, g: 0, b: 0 }; // Remove whitespace and convert to lowercase color = color.trim().toLowerCase(); // Handle hex colors if (color.startsWith('#')) { const hex = color.slice(1); if (hex.length === 3) { return { r: parseInt(hex[0] + hex[0], 16), g: parseInt(hex[1] + hex[1], 16), b: parseInt(hex[2] + hex[2], 16) }; } else if (hex.length === 6) { return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16) }; } } // Handle rgb/rgba colors const rgbMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/); if (rgbMatch) { return { r: parseInt(rgbMatch[1]), g: parseInt(rgbMatch[2]), b: parseInt(rgbMatch[3]) }; } // Handle hsl colors by converting to rgb const hslMatch = color.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%/); if (hslMatch) { return this.hslToRgb( parseInt(hslMatch[1]), parseInt(hslMatch[2]) / 100, parseInt(hslMatch[3]) / 100 ); } // Handle named colors return this.namedColorToRgb(color); } hslToRgb(h, s, l) { h /= 360; const hue2rgb = (p, q, t) => { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1/6) return p + (q - p) * 6 * t; if (t < 1/2) return q; if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; return p; }; let r, g, b; if (s === 0) { r = g = b = l; // achromatic } else { const q = l < 0.5 ? l * (1 + s) : l + s - l * s; const p = 2 * l - q; r = hue2rgb(p, q, h + 1/3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1/3); } return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }; } namedColorToRgb(colorName) { // Basic named colors - expand as needed const namedColors = { 'white': { r: 255, g: 255, b: 255 }, 'black': { r: 0, g: 0, b: 0 }, 'red': { r: 255, g: 0, b: 0 }, 'green': { r: 0, g: 128, b: 0 }, 'blue': { r: 0, g: 0, b: 255 }, 'yellow': { r: 255, g: 255, b: 0 }, 'cyan': { r: 0, g: 255, b: 255 }, 'magenta': { r: 255, g: 0, b: 255 }, 'gray': { r: 128, g: 128, b: 128 }, 'grey': { r: 128, g: 128, b: 128 } }; return namedColors[colorName] || { r: 0, g: 0, b: 0 }; } // Contrast Validation and Suggestions validateContrast(foreground, background, context = {}) { const contrast = this.calculateContrastRatio(foreground, background); const { fontSize = 16, fontWeight = 'normal', isDecorative = false } = context; const isLarge = fontSize >= this.config.largeTextThreshold || (fontSize >= this.config.boldLargeTextThreshold && fontWeight >= 700); const requirements = { AA: isLarge ? this.config.contrastLevels.AA.large : this.config.contrastLevels.AA.normal, AAA: isLarge ? this.config.contrastLevels.AAA.large : this.config.contrastLevels.AAA.normal }; const result = { contrast: parseFloat(contrast.toFixed(2)), meetsAA: contrast >= requirements.AA, meetsAAA: contrast >= requirements.AAA, isLarge, isDecorative, requirements, suggestions: [] }; // Generate improvement suggestions if (!result.meetsAA) { result.suggestions = this.generateContrastSuggestions(foreground, background, requirements.AA); } return result; } generateContrastSuggestions(foreground, background, targetRatio) { const suggestions = []; // Try darkening the background const darkerBg = this.adjustBrightness(background, -20); if (this.calculateContrastRatio(foreground, darkerBg) >= targetRatio) { suggestions.push({ type: 'background', action: 'darken', color: darkerBg, description: 'Darken the background color' }); } // Try lightening the background const lighterBg = this.adjustBrightness(background, 20); if (this.calculateContrastRatio(foreground, lighterBg) >= targetRatio) { suggestions.push({ type: 'background', action: 'lighten', color: lighterBg, description: 'Lighten the background color' }); } // Try darkening the foreground const darkerFg = this.adjustBrightness(foreground, -20); if (this.calculateContrastRatio(darkerFg, background) >= targetRatio) { suggestions.push({ type: 'foreground', action: 'darken', color: darkerFg, description: 'Darken the text color' }); } // Try lightening the foreground const lighterFg = this.adjustBrightness(foreground, 20); if (this.calculateContrastRatio(lighterFg, background) >= targetRatio) { suggestions.push({ type: 'foreground', action: 'lighten', color: lighterFg, description: 'Lighten the text color' }); } return suggestions; } adjustBrightness(color, percent) { const rgb = this.parseColor(color); const factor = percent > 0 ? (100 + percent) / 100 : (100 + percent) / 100; const newRgb = { r: Math.min(255, Math.max(0, Math.round(rgb.r * factor))), g: Math.min(255, Math.max(0, Math.round(rgb.g * factor))), b: Math.min(255, Math.max(0, Math.round(rgb.b * factor))) }; return `rgb(${newRgb.r}, ${newRgb.g}, ${newRgb.b})`; } // Color Blindness Simulation and Testing simulateColorBlindness(color, type) { const rgb = this.parseColor(color); let r = rgb.r / 255; let g = rgb.g / 255; let b = rgb.b / 255; // Apply color blindness transformation matrices const transformations = { protanopia: [ [0.56667, 0.43333, 0], [0.55833, 0.44167, 0], [0, 0.24167, 0.75833] ], deuteranopia: [ [0.625, 0.375, 0], [0.7, 0.3, 0], [0, 0.3, 0.7] ], tritanopia: [ [0.95, 0.05, 0], [0, 0.43333, 0.56667], [0, 0.475, 0.525] ], achromatopsia: [ [0.299, 0.587, 0.114], [0.299, 0.587, 0.114], [0.299, 0.587, 0.114] ] }; const matrix = transformations[type]; if (!matrix) return color; const newR = matrix[0][0] * r + matrix[0][1] * g + matrix[0][2] * b; const newG = matrix[1][0] * r + matrix[1][1] * g + matrix[1][2] * b; const newB = matrix[2][0] * r + matrix[2][1] * g + matrix[2][2] * b; return `rgb(${Math.round(newR * 255)}, ${Math.round(newG * 255)}, ${Math.round(newB * 255)})`; } testColorBlindnessAccessibility(foreground, background) { const results = {}; this.config.colorBlindnessTypes.forEach(type => { const simulatedFg = this.simulateColorBlindness(foreground, type); const simulatedBg = this.simulateColorBlindness(background, type); const contrast = this.calculateContrastRatio(simulatedFg, simulatedBg); results[type] = { foreground: simulatedFg, background: simulatedBg, contrast: parseFloat(contrast.toFixed(2)), meetsAA: contrast >= 4.5, meetsAAA: contrast >= 7.0 }; }); return results; } // User Preference Detection and Management detectUserPreferences() { const preferences = { prefersReducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches, prefersHighContrast: window.matchMedia('(prefers-contrast: high)').matches, prefersDarkMode: window.matchMedia('(prefers-color-scheme: dark)').matches, prefersReducedTransparency: window.matchMedia('(prefers-reduced-transparency: reduce)').matches }; // Check for saved user preferences const saved = localStorage.getItem('accessibility-preferences'); if (saved) { try { Object.assign(preferences, JSON.parse(saved)); } catch (e) { console.warn('Failed to parse saved accessibility preferences'); } } return preferences; } setupUserPreferenceListeners() { const mediaQueries = { reducedMotion: '(prefers-reduced-motion: reduce)', highContrast: '(prefers-contrast: high)', darkMode: '(prefers-color-scheme: dark)', reducedTransparency: '(prefers-reduced-transparency: reduce)' }; Object.entries(mediaQueries).forEach(([key, query]) => { const mq = window.matchMedia(query); mq.addEventListener('change', (e) => { this.userPreferences[`prefers${key.charAt(0).toUpperCase() + key.slice(1)}`] = e.matches; this.applyUserPreferences(); }); }); } applyUserPreferences() { const body = document.body; // Apply high contrast mode if (this.userPreferences.prefersHighContrast) { body.classList.add('high-contrast'); this.enableHighContrastMode(); } else { body.classList.remove('high-contrast'); } // Apply dark mode if (this.userPreferences.prefersDarkMode) { body.classList.add('dark-mode'); this.enableDarkMode(); } else { body.classList.remove('dark-mode'); } // Apply reduced motion if (this.userPreferences.prefersReducedMotion) { body.classList.add('reduced-motion'); } else { body.classList.remove('reduced-motion'); } // Apply reduced transparency if (this.userPreferences.prefersReducedTransparency) { body.classList.add('reduced-transparency'); } else { body.classList.remove('reduced-transparency'); } // Save preferences localStorage.setItem('accessibility-preferences', JSON.stringify(this.userPreferences)); } // Color Scheme Management setupColorSchemes() { const defaultScheme = { name: 'default', colors: { primary: '#007bff', secondary: '#6c757d', success: '#28a745', danger: '#dc3545', warning: '#ffc107', info: '#17a2b8', light: '#f8f9fa', dark: '#343a40', background: '#ffffff', text: '#212529', textMuted: '#6c757d' } }; const highContrastScheme = { name: 'high-contrast', colors: { primary: '#000000', secondary: '#000000', success: '#000000', danger: '#000000', warning: '#000000', info: '#000000', light: '#ffffff', dark: '#000000', background: '#ffffff', text: '#000000', textMuted: '#000000' } }; const darkModeScheme = { name: 'dark-mode', colors: { primary: '#0d6efd', secondary: '#adb5bd', success: '#198754', danger: '#dc3545', warning: '#fd7e14', info: '#0dcaf0', light: '#495057', dark: '#f8f9fa', background: '#212529', text: '#f8f9fa', textMuted: '#adb5bd' } }; this.colorSchemes.set('default', defaultScheme); this.colorSchemes.set('high-contrast', highContrastScheme); this.colorSchemes.set('dark-mode', darkModeScheme); } enableHighContrastMode() { const scheme = this.colorSchemes.get('high-contrast'); this.applyColorScheme(scheme); // Add high contrast specific styles const style = document.createElement('style'); style.id = 'high-contrast-styles'; style.textContent = ` .high-contrast { filter: contrast(200%); } .high-contrast button, .high-contrast input, .high-contrast select, .high-contrast textarea { border: 2px solid #000000 !important; background: #ffffff !important; color: #000000 !important; } .high-contrast button:focus, .high-contrast input:focus, .high-contrast select:focus, .high-contrast textarea:focus { outline: 3px solid #000000 !important; outline-offset: 2px !important; } .high-contrast a { color: #000000 !important; text-decoration: underline !important; } .high-contrast a:visited { color: #666666 !important; } `; // Remove existing high contrast styles const existingStyle = document.getElementById('high-contrast-styles'); if (existingStyle) { existingStyle.remove(); } document.head.appendChild(style); } enableDarkMode() { const scheme = this.colorSchemes.get('dark-mode'); this.applyColorScheme(scheme); // Add dark mode specific styles const style = document.createElement('style'); style.id = 'dark-mode-styles'; style.textContent = ` .dark-mode { background-color: #212529; color: #f8f9fa; } .dark-mode button { background-color: #495057; color: #f8f9fa; border-color: #6c757d; } .dark-mode input, .dark-mode select, .dark-mode textarea { background-color: #495057; color: #f8f9fa; border-color: #6c757d; } .dark-mode input:focus, .dark-mode select:focus, .dark-mode textarea:focus { background-color: #6c757d; border-color: #adb5bd; box-shadow: 0 0 0 0.2rem rgba(173, 181, 189, 0.25); } `; // Remove existing dark mode styles const existingStyle = document.getElementById('dark-mode-styles'); if (existingStyle) { existingStyle.remove(); } document.head.appendChild(style); } applyColorScheme(scheme) { const root = document.documentElement; Object.entries(scheme.colors).forEach(([key, value]) => { root.style.setProperty(`--color-${key}`, value); }); } // Real-time Contrast Monitoring setupContrastMonitoring() { if (!this.config.showContrastRatios && !this.config.debugMode) return; const observer = new MutationObserver((mutations) => { mutations.forEach(mutation => { if (mutation.type === 'childList') { mutation.addedNodes.forEach(node => { if (node.nodeType === Node.ELEMENT_NODE) { this.analyzeElementContrast(node); } }); } }); }); observer.observe(document.body, { childList: true, subtree: true }); // Analyze existing elements this.analyzeElementContrast(document.body); } analyzeElementContrast(element) { // Find text elements const textElements = element.querySelectorAll('p, h1, h2, h3, h4, h5, h6, span, div, a, button, label, input, textarea'); textElements.forEach(el => { if (!el.textContent.trim()) return; const styles = window.getComputedStyle(el); const foreground = styles.color; const background = this.getEffectiveBackgroundColor(el); const validation = this.validateContrast(foreground, background, { fontSize: parseFloat(styles.fontSize), fontWeight: styles.fontWeight }); if (this.config.debugMode && !validation.meetsAA) { this.highlightContrastIssue(el, validation); } if (this.config.showContrastRatios) { this.showContrastRatio(el, validation); } }); } getEffectiveBackgroundColor(element) { let currentElement = element; let backgroundColor = 'transparent'; while (currentElement && currentElement !== document.body) { const styles = window.getComputedStyle(currentElement); const bgColor = styles.backgroundColor; if (bgColor !== 'transparent' && bgColor !== 'rgba(0, 0, 0, 0)') { backgroundColor = bgColor; break; } currentElement = currentElement.parentElement; } // Default to white if no background color found return backgroundColor === 'transparent' ? '#ffffff' : backgroundColor; } highlightContrastIssue(element, validation) { element.style.outline = '2px solid red'; element.title = `Contrast issue: ${validation.contrast}:1 (needs ${validation.requirements.AA}:1)`; // Add warning icon const warning = document.createElement('span'); warning.textContent = '⚠️'; warning.style.cssText = ` position: absolute; top: -10px; right: -10px; font-size: 12px; background: red; color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; z-index: 10000; `; element.style.position = 'relative'; element.appendChild(warning); } showContrastRatio(element, validation) { const indicator = document.createElement('div'); indicator.className = 'contrast-indicator'; indicator.textContent = `${validation.contrast}:1`; indicator.style.cssText = ` position: absolute; top: 0; right: 0; background: ${validation.meetsAA ? 'green' : 'red'}; color: white; padding: 2px 4px; font-size: 10px; z-index: 10000; border-radius: 2px; `; element.style.position = 'relative'; element.appendChild(indicator); } // Accessibility Control Panel setupAccessibilityControls() { const controlPanel = this.createAccessibilityControlPanel(); document.body.appendChild(controlPanel); } createAccessibilityControlPanel() { const panel = document.createElement('div'); panel.id = 'accessibility-control-panel'; panel.setAttribute('aria-label', 'Accessibility Controls'); panel.style.cssText = ` position: fixed; top: 10px; right: 10px; background: white; border: 1px solid #ccc; border-radius: 5px; padding: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 10000; max-width: 250px; font-family: system-ui, -apple-system, sans-serif; display: none; `; panel.innerHTML = `

Accessibility Options

High Contrast Mode Dark Mode Reduce Motion Font Size: 16px

Color Blindness Test

${this.config.colorBlindnessTypes.map(type => ` ${type} `).join('')} None

`; this.setupControlPanelEvents(panel); // Add toggle button const toggleButton = document.createElement('button'); toggleButton.id = 'accessibility-panel-toggle'; toggleButton.textContent = '♿'; toggleButton.setAttribute('aria-label', 'Toggle Accessibility Controls'); toggleButton.style.cssText = ` position: fixed; top: 10px; right: 10px; background: #007bff; color: white; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 20px; cursor: pointer; z-index: 10001; box-shadow: 0 2px 10px rgba(0,0,0,0.1); `; toggleButton.addEventListener('click', () => { const isVisible = panel.style.display !== 'none'; panel.style.display = isVisible ? 'none' : 'block'; toggleButton.style.right = isVisible ? '10px' : '270px'; }); document.body.appendChild(toggleButton); return panel; } setupControlPanelEvents(panel) { // High contrast toggle const highContrastToggle = panel.querySelector('#toggle-high-contrast'); highContrastToggle.addEventListener('change', (e) => { this.userPreferences.prefersHighContrast = e.target.checked; this.applyUserPreferences(); }); // Dark mode toggle const darkModeToggle = panel.querySelector('#toggle-dark-mode'); darkModeToggle.addEventListener('change', (e) => { this.userPreferences.prefersDarkMode = e.target.checked; this.applyUserPreferences(); }); // Reduced motion toggle const reducedMotionToggle = panel.querySelector('#toggle-reduced-motion'); reducedMotionToggle.addEventListener('change', (e) => { this.userPreferences.prefersReducedMotion = e.target.checked; this.applyUserPreferences(); }); // Font size slider const fontSizeSlider = panel.querySelector('#font-size-slider'); const fontSizeValue = panel.querySelector('#font-size-value'); fontSizeSlider.addEventListener('input', (e) => { const fontSize = e.target.value; fontSizeValue.textContent = `${fontSize}px`; document.documentElement.style.fontSize = `${fontSize}px`; }); // Reset button const resetButton = panel.querySelector('#reset-accessibility'); resetButton.addEventListener('click', () => { this.resetToDefaults(); this.updateControlPanelState(panel); }); // Color blindness simulation const colorBlindnessRadios = panel.querySelectorAll('input[name="color-blindness"]'); colorBlindnessRadios.forEach(radio => { radio.addEventListener('change', (e) => { if (e.target.checked) { this.applyColorBlindnessFilter(e.target.value); } }); }); this.updateControlPanelState(panel); } updateControlPanelState(panel) { panel.querySelector('#toggle-high-contrast').checked = this.userPreferences.prefersHighContrast; panel.querySelector('#toggle-dark-mode').checked = this.userPreferences.prefersDarkMode; panel.querySelector('#toggle-reduced-motion').checked = this.userPreferences.prefersReducedMotion; } applyColorBlindnessFilter(type) { // Remove existing filters this.activeFilters.forEach(filter => { document.body.style.filter = document.body.style.filter.replace(filter, '').trim(); }); this.activeFilters = []; if (type === 'none') return; // Apply color blindness filter const filters = { protanopia: 'url(#protanopia-filter)', deuteranopia: 'url(#deuteranopia-filter)', tritanopia: 'url(#tritanopia-filter)', achromatopsia: 'grayscale(100%)' }; if (filters[type]) { const filter = filters[type]; document.body.style.filter = (document.body.style.filter + ' ' + filter).trim(); this.activeFilters.push(filter); } // For SVG filters, we need to add the filter definitions if (type !== 'achromatopsia' && type !== 'none') { this.addColorBlindnessFilters(); } } addColorBlindnessFilters() { if (document.getElementById('color-blindness-filters')) return; const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.id = 'color-blindness-filters'; svg.style.display = 'none'; svg.innerHTML = ` `; document.body.appendChild(svg); } resetToDefaults() { // Reset user preferences this.userPreferences = { prefersReducedMotion: false, prefersHighContrast: false, prefersDarkMode: false, prefersReducedTransparency: false }; // Remove all applied classes and styles document.body.className = document.body.className.replace(/\b(high-contrast|dark-mode|reduced-motion|reduced-transparency)\b/g, ''); document.documentElement.style.fontSize = ''; document.body.style.filter = ''; // Remove custom stylesheets ['high-contrast-styles', 'dark-mode-styles'].forEach(id => { const element = document.getElementById(id); if (element) element.remove(); }); // Clear active filters this.activeFilters = []; // Reset color scheme const defaultScheme = this.colorSchemes.get('default'); this.applyColorScheme(defaultScheme); // Clear localStorage localStorage.removeItem('accessibility-preferences'); } // API Methods for External Use checkContrast(foreground, background, context = {}) { return this.validateContrast(foreground, background, context); } suggestBetterColors(foreground, background, targetLevel = 'AA') { const targetRatio = this.config.contrastLevels[targetLevel].normal; return this.generateContrastSuggestions(foreground, background, targetRatio); } testColorBlindness(foreground, background) { return this.testColorBlindnessAccessibility(foreground, background); } // Initialization check checkInitialContrast() { if (this.config.debugMode) { setTimeout(() => { this.analyzeElementContrast(document.body); }, 1000); } } } // Usage Example document.addEventListener('DOMContentLoaded', () => { const visualAccessibilityManager = new VisualAccessibilityManager({ debugMode: window.location.search.includes('debug=contrast'), showContrastRatios: window.location.search.includes('show=contrast'), respectUserPreferences: true, enableHighContrastMode: true, enableDarkMode: true }); // Example usage in a component const checkButtonContrast = () => { const button = document.querySelector('.primary-button'); if (button) { const styles = window.getComputedStyle(button); const result = visualAccessibilityManager.checkContrast( styles.color, styles.backgroundColor, { fontSize: parseFloat(styles.fontSize), fontWeight: styles.fontWeight } ); console.log('Button contrast check:', result); if (!result.meetsAA) { console.warn('Button fails AA contrast requirements'); const suggestions = visualAccessibilityManager.suggestBetterColors( styles.color, styles.backgroundColor ); console.log('Suggestions:', suggestions); } } }; // Run contrast check after page load setTimeout(checkButtonContrast, 100); // Test color blindness accessibility const testColorBlindnessForButton = () => { const button = document.querySelector('.primary-button'); if (button) { const styles = window.getComputedStyle(button); const results = visualAccessibilityManager.testColorBlindness( styles.color, styles.backgroundColor ); console.log('Color blindness test results:', results); } }; setTimeout(testColorBlindnessForButton, 200); });

Color Contrast and Visual Accessibility

Written by Rahul Aher