MCP Color Server

# Enhanced HTML Visualization Features ## Overview The MCP Color Server now includes enhanced HTML visualizations with interactive background controls, accessibility features, and comprehensive keyboard navigation support. These features make color visualizations more accessible and user-friendly across different viewing conditions. ## Background Controls ### Interactive Theme Toggle All HTML visualizations now include a background theme toggle that allows users to switch between light and dark backgrounds to better see how colors appear in different contexts. **Features:** - One-click toggle between light and dark themes - Automatic text color adjustment for optimal readability - Persistent theme preference using localStorage - Smooth transitions between themes **Usage:** - Click the sun/moon icon in the top-right corner - Use keyboard shortcut: `Alt + T` ### Custom Background Color Picker Users can set any custom background color to test how their color palettes look against specific backgrounds. **Features:** - Color picker widget for precise color selection - Preset color buttons for common backgrounds - Hex color input for exact color specification - Real-time preview of color changes - Automatic contrast calculation and warnings **Usage:** - Click the palette icon to open the color picker - Use keyboard shortcut: `Alt + C` - Select from preset colors or use the custom color input - Click "Apply" to set the background color - Click "Reset" to return to the default theme ## Accessibility Features ### WCAG Compliance All enhanced visualizations meet WCAG 2.1 AA accessibility standards: - **Color Contrast**: Minimum 4.5:1 contrast ratio for normal text - **Keyboard Navigation**: Full functionality available via keyboard - **Screen Reader Support**: Proper ARIA labels and semantic markup - **Focus Management**: Visible focus indicators and logical tab order ### Keyboard Navigation Complete keyboard support for all interactive elements: | Shortcut | Action | | --------------------- | ------------------------------------- | | `Alt + T` | Toggle background theme (light/dark) | | `Alt + C` | Open/close background color picker | | `Escape` | Close color picker or modal dialogs | | `Tab` / `Shift + Tab` | Navigate between interactive elements | | `Enter` / `Space` | Activate buttons and controls | | `Arrow Keys` | Navigate color grids and wheels | ### Screen Reader Support Enhanced visualizations include comprehensive screen reader support: - **Semantic HTML**: Proper heading hierarchy and landmark regions - **ARIA Labels**: Descriptive labels for all interactive elements - **Live Regions**: Announcements for dynamic content changes - **Alternative Text**: Descriptions for visual elements - **Role Attributes**: Clear indication of element purposes ### Accessibility Warnings The system automatically detects and warns about potential accessibility issues: - **Low Contrast**: Warnings when text may be hard to read - **Color Dependency**: Alerts when information relies solely on color - **Focus Issues**: Notifications about keyboard navigation problems - **Missing Labels**: Warnings for unlabeled form elements ## Enhanced Features by Visualization Type ### Color Palette Visualizations **New Features:** - Interactive color swatches with hover effects - Copy-to-clipboard functionality for individual colors - Export options in multiple formats (HEX, RGB, HSL, CSS) - Accessibility information for each color - Responsive grid layouts **Accessibility Enhancements:** - Color values announced to screen readers - Keyboard navigation through color swatches - High contrast mode support - Alternative text for color information ### Color Wheel Visualizations **New Features:** - Interactive color selection with click and keyboard - Harmony relationship visualization - Real-time color information display - Zoom and pan capabilities **Accessibility Enhancements:** - Keyboard navigation with arrow keys - Color position announcements - Alternative navigation methods - High contrast wheel rendering ### Gradient Visualizations **New Features:** - Multiple preview shapes (rectangle, circle, text, button, card) - CSS code display with syntax highlighting - Interactive gradient controls - Angle and position adjustments **Accessibility Enhancements:** - Gradient descriptions for screen readers - Keyboard control of gradient parameters - Alternative text for gradient previews - High contrast preview options ### Theme Preview Visualizations **New Features:** - Realistic UI mockups (website, mobile app, dashboard) - Interactive component previews - Responsive design demonstrations - Color accessibility testing in context **Accessibility Enhancements:** - Semantic markup for UI components - Keyboard navigation through preview elements - Screen reader descriptions of theme elements - Accessibility compliance indicators ## Technical Implementation ### File-Based Output System All enhanced visualizations are saved as self-contained HTML files: - **Environment Variable**: `COLOR_MCP_VISUALIZATIONS_DIR` sets the output directory - **Fallback Directory**: `/tmp/color-mcp/visualizations` if not configured - **File Naming**: Descriptive names with timestamps and unique IDs - **Cleanup**: Automatic removal of old files (24-hour retention by default) ### CSS Custom Properties Enhanced visualizations use CSS custom properties for dynamic theming: ```css :root { --dynamic-bg-color: #ffffff; --dynamic-text-color: #1e293b; --bg-controls-accent: #2563eb; --bg-controls-border: #e2e8f0; } ``` ### JavaScript Integration Background controls are implemented with vanilla JavaScript: - **No External Dependencies**: Self-contained functionality - **Progressive Enhancement**: Works without JavaScript - **Error Handling**: Graceful degradation on failures - **Performance Optimized**: Minimal resource usage ## Browser Compatibility Enhanced visualizations support modern browsers: - **Chrome/Chromium**: Full support for all features - **Firefox**: Full support with minor CSS differences - **Safari**: Full support with WebKit-specific optimizations - **Edge**: Full support for Chromium-based versions ### Fallback Support For older browsers or when JavaScript is disabled: - **Basic Functionality**: Core visualization features remain available - **Static Themes**: Default light theme without dynamic switching - **Keyboard Navigation**: Basic tab navigation still works - **Screen Readers**: Semantic HTML ensures accessibility ## Configuration Options ### Background Controls Configuration ```typescript interface BackgroundControlConfig { enableToggle: boolean; // Enable theme toggle button enableColorPicker: boolean; // Enable custom color picker defaultBackground: 'light' | 'dark' | 'auto'; customColors: string[]; // Preset color options position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'; accessibility: { keyboardNavigation: boolean; // Enable keyboard shortcuts screenReaderSupport: boolean; // Enable ARIA features highContrast: boolean; // Enable high contrast mode }; } ``` ### Tool Parameters Enhanced HTML tools accept additional parameters: ```typescript { enable_background_controls: boolean; // Enable interactive controls enable_accessibility_testing: boolean; // Enable automated testing include_keyboard_help: boolean; // Include keyboard shortcuts guide } ``` ## Performance Considerations ### Optimization Features - **Lazy Loading**: Heavy features loaded only when needed - **Efficient Rendering**: Optimized CSS and JavaScript - **Memory Management**: Automatic cleanup of resources - **Caching**: localStorage for user preferences ### Resource Usage - **File Size**: Enhanced HTML files typically under 2MB - **Load Time**: Sub-second loading on modern connections - **Memory**: Minimal JavaScript memory footprint - **CPU**: Efficient event handling and DOM manipulation ## Troubleshooting ### Common Issues **Background controls not appearing:** - Check that `enable_background_controls` is set to `true` - Verify JavaScript is enabled in the browser - Ensure the HTML file is complete and not truncated **Keyboard shortcuts not working:** - Confirm the visualization has focus - Check for conflicting browser shortcuts - Verify JavaScript is running without errors **Accessibility warnings showing incorrectly:** - Check color contrast calculations - Verify text elements have proper styling - Ensure background colors are applied correctly **localStorage not persisting:** - Check browser privacy settings - Verify localStorage is available - Ensure the domain allows local storage ### Debug Information Enhanced visualizations include debug information in the browser console: - Background controller initialization status - Theme change events and state updates - Accessibility test results and warnings - Keyboard shortcut registration and handling ## Best Practices ### For Developers 1. **Test with Multiple Themes**: Always test visualizations with both light and dark backgrounds 2. **Verify Keyboard Navigation**: Ensure all functionality is accessible via keyboard 3. **Check Contrast Ratios**: Use the built-in accessibility warnings to identify issues 4. **Test Screen Readers**: Verify that visualizations work with assistive technology ### For Users 1. **Use Keyboard Shortcuts**: Learn the keyboard shortcuts for faster navigation 2. **Customize Background**: Test your colors against different backgrounds 3. **Check Accessibility**: Pay attention to contrast warnings and recommendations 4. **Report Issues**: Provide feedback on accessibility or usability problems ## Future Enhancements ### Planned Features - **Voice Control**: Voice commands for navigation and control - **Touch Gestures**: Enhanced mobile interaction support - **Color Blindness Simulation**: Real-time color vision deficiency preview - **Advanced Themes**: More theme options and customization - **Collaborative Features**: Sharing and commenting on visualizations ### Accessibility Improvements - **Enhanced Screen Reader Support**: More detailed descriptions and navigation - **Motor Impairment Support**: Alternative input methods and larger targets - **Cognitive Accessibility**: Simplified interfaces and clear instructions - **Internationalization**: Multi-language support for accessibility features ## Resources ### Documentation Links - [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) - [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/) - [Color Contrast Guidelines](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) - [Keyboard Navigation Patterns](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/) ### Testing Tools - [axe DevTools](https://www.deque.com/axe/devtools/) - Browser extension for accessibility testing - [WAVE](https://wave.webaim.org/) - Web accessibility evaluation tool - [Lighthouse](https://developers.google.com/web/tools/lighthouse) - Performance and accessibility auditing - [Color Oracle](https://colororacle.org/) - Color blindness simulator ### Support For questions, issues, or feature requests related to enhanced visualization features: 1. Check the troubleshooting section above 2. Review the browser console for error messages 3. Test with different browsers and devices 4. Report issues with specific steps to reproduce 5. Include browser version and system information