Online Color Blindness Simulator for UI Hex Codes

Project Overview

An interactive, browser-based Color Blindness Simulator designed for UI/UX designers and front-end developers. The application allows users to input hexadecimal color values and immediately see how those colors appear under different types of color vision deficiency. It focuses on accessibility compliance and visual testing.

Core Features

• Live Simulation Workspace: A centralized viewport that renders a mock UI component (e.g., button, card, or navigation bar) and applies real-time color filters based on the selected blindness type.
• Multiple Blindness Modes: Dropdown or toggle selection for Protanopia, Deuteranopia, Tritanopia, Achromatopsia, and Protanomaly/Deuteranomaly.
• Hex Input & Picker: Support for manual hex code entry and an integrated system-native color picker.
• Accessibility Contrast Audit: Integrated WCAG 2.1/2.2 contrast ratio checker that warns if the chosen colors fail 'AA' or 'AAA' readability standards.
• Palette Simulation: Ability to add multiple colors (e.g., a primary, secondary, and background color) to check if the color palette remains distinguishable as a set.
• CSS Snippet Generator: An 'Export' feature that provides the CSS code for the primary and secondary colors, ensuring developers can immediately implement validated accessible colors.

Visual Design & Layout

• Layout Structure:
  • Left Sidebar: Input fields for color values, selection controls for blindness modes, and the contrast ratio results.
  • Main Stage: A split-screen comparison or a switchable toggle view (Original vs. Simulated) demonstrating the colors in a practical UI context.
  • Bottom Panel: Detailed breakdown of the luminance and color differences.
• Aesthetic: Minimalist, high-contrast UI using neutral grays (e.g., #F5F5F5) to ensure the interface does not distract from the colors being tested. Clean typography using system fonts.
• Animations: Subtle CSS transitions when switching between blindness modes (e.g., a smooth fade effect on the preview card) to maintain focus.

Technical Implementation

• Color Transformation: Use JavaScript-based color transformation matrices to adjust the RGB values in real-time. The application will convert Hex to RGB, then apply the transformation matrix for the selected filter, and re-render the preview.
• Performance: Optimized for instant updates on input changes, ensuring no lag when modifying colors.
• Responsiveness: Fully responsive design that works on desktop, tablet, and mobile browsers.
• State Management: URL-based state management, allowing users to share specific color tests via a direct link (e.g., ?colors=FF0000,00FF00&mode=protanopia).