Technical Specification: Free Online Color Blindness Simulator

Overview

A high-performance, single-file browser utility designed to help UI/UX designers and accessibility advocates test their visual assets for color blindness compliance. The app uses the HTML5 Canvas API to apply color-blindness simulation matrices to user-uploaded images in real-time.

Core Features

• Drag-and-Drop Image Upload: Seamless interface for dropping files or browsing local storage.
• Real-Time Simulation: Select from presets: Protanopia, Deuteranopia, Tritanopia, and Achromatopsia.
• Side-by-Side Comparison: View the original image alongside the filtered version for immediate contrast analysis.
• Export Functionality: Save the processed simulation as a high-quality PNG for accessibility reports.
• Responsive Controls: Intuitive toolbar for switching filters instantly without reloading the page.

UI/UX Design Strategy

• Aesthetic: Clean, professional "SaaS" aesthetic. Light mode only, utilizing a palette of off-whites (#F9FAFB), crisp grays (#374151), and a prominent primary brand blue (#2563EB) for interactive elements.
• Feedback: Use subtle CSS transitions (ease-in-out) for button interactions and loading states.
• Layout:
  • Header: Minimalist title and short functional description.
  • Main Stage: Left sidebar for controls/settings, central work area for the side-by-side image canvas.
  • No Footer: Explicitly excluded to maintain a focused workspace.

Technical Implementation

• Single File Architecture: All HTML, CSS (Tailwind CDN), and Vanilla JS contained in one .html file.
• Processing: Use CanvasRenderingContext2D to manipulate pixel arrays. The simulation is performed by applying a 3x3 color transformation matrix to the RGBA data of the image.
• Constraint Compliance:
  • Storage: No localStorage, sessionStorage, or cookies. The application relies entirely on volatile memory.
  • Iframe Safety: No blocking methods (alert, prompt). Custom modal UI components will be used for alerts/confirmations.
  • External Links: All external documentation links will use target="_blank" and rel="noopener noreferrer".

Developer Directives

1. Vanilla JS Only: Do not use heavy frameworks. Keep the logic modular within a single <script> block.
2. State Management: Use a simple JS object to manage the current image blob and the applied filter type.
3. Performance: Ensure the simulation runs under 100ms for standard web-resolution images to maintain a high-quality user experience.
4. Styling: Utilize Tailwind CSS via CDN for rapid, consistent styling. Do not implement a dark mode toggle; strictly enforce the light-mode theme.
5. Asset Handling: Images must be handled as blob: URLs in memory and cleaned up appropriately when replaced.