PixelPilot uiux-color-blindness.instructions.md

UI/UX Color Blindness Simulation & Fixes

Simulate color vision deficiencies and implement accessible alternatives. Ensures UI works for all users regardless of color perception.

---

OVERVIEW

Approximately 8% of men and 0.5% of women have some form of color vision deficiency. This skill covers:

1. SVG filter simulation
2. Testing tools and workflows
3. Accessible color palettes
4. Non-color indicators (icons, patterns, shapes)
5. Chart accessibility

---

COLOR BLINDNESS TYPES

Type	Affected	Population	What's Hard to See
Protanopia	Red cones	~1% men	Red-green distinction
Deuteranopia	Green cones	~6% men	Red-green distinction
Tritanopia	Blue cones	<1% all	Blue-yellow distinction
Achromatopsia	All cones	~0.003%	All color (grayscale)

---

SVG FILTER SIMULATION

CSS Filters (Quick Test)

/* Apply to body or container for testing */
.simulate-protanopia {
  filter: url('#protanopia-filter');
}

.simulate-deuteranopia {
  filter: url('#deuteranopia-filter');
}

.simulate-tritanopia {
  filter: url('#tritanopia-filter');
}

.simulate-achromatopsia {
  filter: grayscale(100%);
}

SVG Filter Definitions

Add this SVG to your HTML (can be hidden):

<svg class="sr-only" aria-hidden="true">
  <defs>
    <!-- Protanopia (Red-blind) -->
    <filter id="protanopia-filter">
      <feColorMatrix type="matrix" values="
        0.567, 0.433, 0,     0, 0
        0.558, 0.442, 0,     0, 0
        0,     0.242, 0.758, 0, 0
        0,     0,     0,     1, 0
      "/>
    </filter>
    
    <!-- Deuteranopia (Green-blind) -->
    <filter id="deuteranopia-filter">
      <feColorMatrix type="matrix" values="
        0.625, 0.375, 0,   0, 0
        0.7,   0.3,   0,   0, 0
        0,     0.3,   0.7, 0, 0
        0,     0,     0,   1, 0
      "/>
    </filter>
    
    <!-- Tritanopia (Blue-blind) -->
    <filter id="tritanopia-filter">
      <feColorMatrix type="matrix" values="
        0.95, 0.05,  0,     0, 0
        0,    0.433, 0.567, 0, 0
        0,    0.475, 0.525, 0, 0
        0,    0,     0,     1, 0
      "/>
    </filter>
    
    <!-- Achromatopsia (Total color blindness) -->
    <filter id="achromatopsia-filter">
      <feColorMatrix type="matrix" values="
        0.299, 0.587, 0.114, 0, 0
        0.299, 0.587, 0.114, 0, 0
        0.299, 0.587, 0.114, 0, 0
        0,     0,     0,     1, 0
      "/>
    </filter>
  </defs>
</svg>