Color Vision Simulator

A web application that simulates how images may appear to people with different types of color vision, designed to help evaluate the accessibility of visual content.

Features

• Multiple Colorblindness Types:

  • Protanopia (Common Red-Green Colorblindness)
  • Deutranopia (Rare Red-Green Colorblindness)
  • Tritanopia (Blue-Yellow Colorblindness)
  • Hybrid (Combination of Protanopia and Deutranopia)

• Adjustable Severity: Control the degree of colorblindness simulation from 0 (no effect) to 1 (full effect)

• Upload Methods:

  • Click to select a file from your computer
  • Drag and drop an image file
  • Paste an image from clipboard (Ctrl/Cmd+V)

• Side-by-side Comparison: View original and simulated images together

• Download Results: Save the simulated image to your device

Deployment

Deploy locally

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Deploy to Vercel

1. Install Vercel CLI: npm i -g vercel
2. Run: vercel
3. Follow the prompts

Or connect the GitHub repository to Vercel for automatic deployments.

Deploy to GitHub Pages

1. Enable GitHub Pages in the repository settings:

   • Go to Settings > Pages
   • Set Source to "GitHub Actions"

2. Push the code to the main branch

3. The GitHub Actions workflow will automatically build and deploy the site

The deployment workflow is configured in .github/workflows/deploy.yml.

References

The colorblindness simulation implementation is based on research in color vision deficiency modeling, which transforms color in LMS color space:

Lee, J., & dos Santos, W. P. (2011). An adaptive fuzzy-based system to simulate, quantify and compensate color blindness. Integrative Computer-Aided Engineering, 18(1), 29-40. IOS Press.