Check your UI hex codes with this online color blindness simulator. Visualize web designs for protanopia, deuteranopia, and tritanopia to improve accessibility.
AI Generation Prompt
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).
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
Why is testing for color blindness important in web design?
Testing for color blindness ensures your interface is inclusive for users with color vision deficiency, helps meet WCAG accessibility standards, and prevents critical UI information from being lost due to poor color contrast.
What color blindness types does this tool simulate?
The tool simulates Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), Achromatopsia (monochrome), and general low-contrast vision.
How does the color conversion work?
The simulator uses standard color transformation matrices based on LMS cone sensitivity models to accurately approximate how specific hex color values appear to users with different types of color vision deficiencies.
