कलर ब्लाइंडनेस सिम्युलेटर — Complete Accessibility Guide (हिंदी)

Human color vision retina mein teen types ke cone cells par depend karta hai: S-cones (blue, ~420nm), M-cones (green, ~530nm) aur L-cones (red, ~560nm). Color blindness tab hoti hai jab ek ya zyada cone types absent, non-functional ya shifted hote hain.

Prevalence by Population

Design mein Common Failures

• Red error aur green success states jo same dikhte hain
• Charts jahan sirf color se data series distinguish ki jaati hai
• Form validation jo sirf red border se indicate hoti hai
• Traffic light status indicators (red/yellow/green) dashboards mein
• CTA buttons jo sirf color ki wajah se "pop" karte hain

Normal Vision:  ● Red   ● Green  ← Clearly different
Deuteranopia:   ● Brown ● Brown  ← SAME! Ye problem hai.

# Common web colors deuteranopia mein:
#FF0000 (red error)  → #8B8B00 (olive)
#00FF00 (green ok)   → #8B8B00 (olive) ← Ek jaise!
#0000FF (blue info)  → #0000FF        ← Blue safe hai

Color blindness simulators mathematical transformations use karte hain based on color-deficient vision ke physiological models par। Sabse widely used approach Brettel-Viénot-Mollon (1997) model par based hai।

Pipeline: sRGB → LMS → Simulate → sRGB

// Step 1: sRGB → Linear RGB (gamma correction remove karo)
function sRGBToLinear(c) {
  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
}

// Step 2: Linear RGB → LMS (cone response space)
function rgbToLMS(r, g, b) {
  return {
    L: 0.31399022 * r + 0.63951294 * g + 0.04649755 * b,
    M: 0.15537241 * r + 0.75789446 * g + 0.08670142 * b,
    S: 0.01775239 * r + 0.10944209 * g + 0.87256922 * b,
  };
}

// Step 3: Deuteranopia simulate karo (M-cone absent)
function simulateDeuteranopia(L, M, S) {
  return {
    L: L,
    M: 0.494207 * L + 1.24827 * S,  // M = L aur S se derive
    S: S,
  };
}

WCAG 2.2 Contrast Requirements

Contrast Ratio Calculate Karna

function getRelativeLuminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    const s = c / 255;
    return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

// Examples:
// Black on White: 21:1 (maximum)
// #767676 on White: 4.54:1 (just passes AA for normal text)
// #0066CC on White: 4.88:1 (passes AA — good blue link color)

Golden Rules

1. Color ko single channel mat banao — Color ke saath text labels, icons ya patterns hamesha use karo
2. Sufficient luminance contrast ensure karo — Same lightness ke colors CVD simulation mein identical ho jaate hain
3. Red-green combinations se bachao — Blue aur orange ka primary pair use karo

Scientifically Designed Accessible Palettes

/* Paul Tol's Bright palette — CVD safe */
--tol-blue:   #4477AA;
--tol-cyan:   #66CCEE;
--tol-green:  #228833;
--tol-yellow: #CCBB44;
--tol-red:    #EE6677;
--tol-purple: #AA3377;

/* Sabse safe 2-color pair: */
--safe-blue:   #0072B2;  /* Blue */
--safe-orange: #E69F00;  /* Orange */

/* Wong palette (Nature journals standard) */
--wong-orange:     #E69F00;
--wong-sky-blue:   #56B4E9;
--wong-green:      #009E73;
--wong-blue:       #0072B2;
--wong-vermillion: #D55E00;

UI Component Guidelines

Phase 1: Design Tool mein (Figma/Sketch)

1. Design ko completely desaturate karo — grayscale mein bhi information clear honi chahiye
2. Figma ki built-in accessibility checker se contrast ratios check karo
3. Stark plugin se per-layer CVD simulation apply karo

Phase 2: ToolsArena Simulator se

1. UI screenshot lo
2. Color Blindness Simulator mein upload karo
3. Sab 8 CVD types toggle karo
4. Har type ke liye check karo:
   - Error aur success states distinguish hote hain?
   - Chart elements alag dikhte hain?
   - Buttons aur links recognizable hain?
5. Failing components note karo
6. Fixes apply karo (icons add karo, palettes change karo)
7. Re-test karo

Phase 3: Browser DevTools

Chrome DevTools → More tools → Rendering →
"Emulate vision deficiencies" mein select karo:
- Protanopia, Deuteranopia, Tritanopia, Achromatopsia, Reduced contrast

NoCoffee extension (free):
- Sab CVD types simulate karta hai
- Glaucoma, cataract simulation bhi

Phase 4: CI/CD Automated Checks

# axe-core se color contrast automated testing
npm install axe-core @axe-core/playwright

# Playwright test example:
const results = await new AxeBuilder({ page })
  .withRules(['color-contrast'])
  .analyze();
expect(results.violations).toHaveLength(0);

Case 1: Pokémon GO — Team Colors (2016-2019)

Pokémon GO ke teen teams — Mystic (blue), Valor (red), Instinct (yellow) — primarily color se represent kiye gaye the। Protanopia users ke liye Valor ka red almost black dikhta tha। 2019 mein animal icons add kiye gaye — 3 saal baad।

Case 2: GitHub — Diff View (Fixed 2021)

GitHub ka code diff view classic red (removed) aur green (added) use karta tha। Deuteranopia simulation mein dono similar dark grey tone se dikhte the। 2021 mein "Colorblind themes" add kiye gaye — orange/blue aur orange/purple pairs jo sab CVD types mein distinguishable hain।

/* GitHub's colorblind-friendly diff (approximate) */
.diff-removed { background-color: #ffd8b5; } /* Orange — not red */
.diff-added   { background-color: #b3d3f4; } /* Blue — not green */

Case 3: Power BI — Default Chart Palette

Microsoft Power BI ke default chart mein pehle do colors red aur green the — literally sabse common CVD failure। C-suite decisions ke liye dashboards banaye jaate the jo 1 in 12 male executives ke liye illegible the। 2022 mein colorblind theme option release hua।

Common Failure Patterns