रंग अंधापन सिमुलेटर
देखें कि रंग दृष्टि दोष वाले लोगों को छवियाँ और रंग कैसे दिखाई देते हैं।
कलर ब्लाइंडनेस के प्रकार
प्रोटानोपिया (~1% पुरुष) · कोई लाल शंकु नहीं। लाल गहरा दिखता है, हरे से अलग पहचानना कठिन।
ड्यूटेरानोपिया (~1% पुरुष) · कोई हरा शंकु नहीं। सबसे सामान्य रूप। हरा और लाल समान दिखते हैं।
ट्राइटानोपिया (~0.003%) · कोई नीला शंकु नहीं। नीला हरा सा दिखता है, पीला गुलाबी सा दिखता है।
एक्रोमैटॉप्सिया (~0.003%) · कोई रंग दृष्टि नहीं। सब कुछ ग्रेस्केल में दिखाई देता है।
प्रोटानोमैली / ड्यूटेरानोमैली / ट्राइटानोमैली · उपरोक्त के आंशिक संस्करण, जहाँ संबंधित रंगों के प्रति संवेदनशीलता कम हो।
लगभग 8% पुरुष और 0.5% महिलाओं में कलर विज़न की कोई कमी होती है।
Color Vision Deficiency के लिए Design करना क्यों Matters है
Color vision deficiency (CVD) common है। US National Eye Institute report करता है कि लगभग 12 में 1 पुरुषों में CVD का कोई न कोई form है; women बहुत कम rate पर affected होती हैं क्योंकि सबसे common forms X-linked recessive genes के माध्यम से inherited होती हैं। Combined, CVD के कुछ level वाली global population hundreds of millions में है। कोई भी user-facing design जो meaning convey करने के लिए red और green पर rely करती है (error vs success indicators, charts, status pills, validation messages) users के एक meaningful slice के लिए fail होगी जब तक colour को किसी अन्य cue के साथ pair न किया जाए।
यह एक formal accessibility requirement भी है। WCAG 2.2 Success Criterion 1.4.1 («Use of Color»), Level A, rule directly state करता है: «Color को information convey करने, action indicate करने, response prompt करने, या visual element distinguish करने के लिए एकमात्र visual means के रूप में use नहीं किया जाता।» Level A सबसे lowest WCAG conformance bar है, इसे fail करने का मतलब है कि site न केवल inaccessible है बल्कि उन jurisdictions में legally non-compliant है जो WCAG conformance mandate करती हैं (US Section 508, EU Accessibility Act, UK Equality Act)।
CVD के आठ Forms
Human colour vision तीन types के cone photoreceptors पर rely करती है: L-cones (long-wavelength, red के around peak), M-cones (medium-wavelength, green के around peak), और S-cones (short-wavelength, blue-violet के around peak)। CVD का हर form इन cones में से किसी एक के absent (-anopia) या sensitivity में shifted (-anomaly) होने से correspond करता है।
| प्रकार | प्रभावित cone | दृश्य प्रभाव |
|---|---|---|
| Protanopia | L-cone अनुपस्थित | Red dark दिखता है; red और green को confuse किया जा सकता है। |
| Protanomaly | L-cone स्थानांतरित | Red sensitivity कम; partial red-green confusion। |
| Deuteranopia | M-cone अनुपस्थित | Green और red similar दिखते हैं। |
| Deuteranomaly | M-cone स्थानांतरित | CVD का सबसे common form, reduced green sensitivity, mild-to-moderate red-green confusion। |
| Tritanopia | S-cone अनुपस्थित | Blue greenish दिखता है, yellow pinkish दिखता है। बहुत rare। |
| Tritanomaly | S-cone स्थानांतरित | Blue-yellow discrimination कम। |
| Achromatopsia | सभी cones अनुपस्थित | Colour vision की total absence; दुनिया greyscale में दिखती है। अक्सर light sensitivity और reduced visual acuity के साथ आती है। |
| Achromatomaly | सभी cones impaired | Spectrum में severely reduced colour discrimination। |
Deuteranomaly सबसे prevalent form है क्योंकि L- और M-cone photopigment genes X chromosome पर adjacent हैं और केवल कुछ amino acids में differ करती हैं। Small mutations easily M-cone के sensitivity peak को L-cone के closer shift कर देते हैं, brain की red और green के बीच discriminate करने की ability कम करते हुए।
Men अधिक Often क्यों Affected होते हैं
L-cone (OPN1LW) और M-cone (OPN1MW) photopigment genes दोनों X chromosome पर sit करती हैं। Men केवल एक X inherit करते हैं (अपनी mother से); women दो inherit करती हैं (हर parent से एक)। Recessive deficiency express होने के लिए, एक woman को दोनों X chromosomes पर deficient gene चाहिए, जबकि एक man को केवल अपने single X पर। यह arithmetic red-green CVD specifically के लिए men और women के बीच prevalence में roughly 10× difference produce करती है। S-cone gene chromosome 7 पर है और autosomal है, tritanopia और tritanomaly men और women को similar rates पर affect करते हैं, लेकिन दोनों forms शुरू से ही बहुत rare हैं।
WCAG Contrast Requirements भी Apply होती हैं
SC 1.4.1 से परे, WCAG text और UI components के लिए minimum contrast ratios भी impose करता है, सभी actual visible colour pairing के against measured:
- SC 1.4.3 Contrast (Minimum), Level AA: normal body text के लिए कम से कम 4.5:1, large या bold text के लिए 3:1।
- SC 1.4.6 Contrast (Enhanced), Level AAA: normal text के लिए 7:1, large के लिए 4.5:1।
- SC 1.4.11 Non-text Contrast, Level AA: UI components और graphical objects के लिए 3:1 (button borders, focus indicators, icon outlines)।
इस simulator को contrast checker के साथ use करें। दो colours का normal vision में perfectly fine 4.5:1 contrast ratio हो सकता है और फिर भी deuteranope को indistinguishable हो सकता है। Simulator उस second failure mode को catch करता है जिसे pure contrast checking miss करता है।
Common Design Pitfalls और उनके Fixes
- Success vs error के लिए Red / green status indicators। एक icon (✗ / ✓), एक text label, या distinct shapes के साथ pair करें। कभी भी केवल hue पर rely न करें।
- Underlines के बिना Coloured links। कई CVD users coloured link को surrounding body text से नहीं बता सकते। एक underline, एक font-weight change, या दोनों add करें।
- केवल category से coloured bar charts। Patterns, direct labels add करें, या colour-blind-safe palette use करें (Viridis, Cividis, Magma, Okabe-Ito, ColorBrewer के CVD-safe sets)।
- Red→green gradients वाले Heatmaps। Perceptually-uniform palettes पर switch करें, Matplotlib का Viridis (2017 से default) और Cividis (Nuñez et al, 2018, specifically CVD viewers के लिए designed) दोनों safe हैं।
- केवल red text से Form validation। Icon, explicit error message, और visible field outline change के साथ pair करें।
- «Click the green button» instructions। Position या label refer करें, colour नहीं।
- Similar hues वाले Map keys। Red-orange-yellow scales वाले Choropleth maps deuteranopia के under दो indistinguishable colours में collapse हो सकते हैं। Single-hue scale (light to dark blue) या CVD-safe diverging palette use करें।
- Game-design colour codes। Famously, early Pokémon Crystal Apricorns और original colour-coded PokéStops in Pokémon GO ने red-green decisions present किए जो कई CVD players के लिए unsolvable थे।
रंगान्ध-सुरक्षित Palettes
- Viridis: Matplotlib का default sequential palette 2017 से। Normal और CVD vision में perceptually uniform।
- Cividis: Specifically CVD viewers के लिए designed (Nuñez, Anderton & Renslow, PLOS ONE 2018)। Deuteranopia या protanopia simulated होने पर भी uniform perceptual distance maintain करता है।
- ColorBrewer: Cynthia Brewer के cartography के लिए palettes। Site explicitly CVD-safe variants को sequential, diverging, और qualitative data के लिए mark करती है।
- Okabe-Ito: Scientific publishing में accessibility के लिए Masataka Okabe और Kei Ito द्वारा designed एक eight-colour qualitative palette। Up to 8 categories वाले categorical data के लिए recommended go-to palette।
Browser DevTools में CVD Simulators भी हैं
Chrome और Edge DevTools दोनों में एक built-in «Emulate vision deficiencies» option है (Rendering tab में) जो पूरे viewport पर protanopia, deuteranopia, tritanopia, और achromatopsia simulate कर सकता है। Firefox का Accessibility Inspector एक similar simulator expose करता है। ये design reviews के दौरान whole-page audits के लिए great हैं, यह single-colour tool उन्हें complement करता है एक बार में एक swatch isolate करके ताकि आप बाकी page के comparison confuse किए बिना palette decision ले सकें।
Diagnostic Tests जिनके बारे में आपने सुना होगा
- Ishihara plates (Shinobu Ishihara, 1917), hidden numbers वाली famous coloured-dot plates। Red-green deficiencies के screening के लिए clinical settings में standard।
- Farnsworth-Munsell 100-Hue test: caps को continuous hue order में arrange करें। Subtle discrimination test करता है, न केवल CVD की yes/no presence।
- Anomaloscope: एक yellow reference से match करने के लिए red-green mix adjust करें। CVD type और severity की clinical classification के लिए use किया जाता है।
यह tool diagnostic नहीं है, यह simulate करता है कि CVD के various forms वाले किसी व्यक्ति को एक given colour कैसे appear करता है ताकि आप इसके around design कर सकें, न कि किसी की vision test करें।
सामान्य गलतियाँ
- CVD को niche concern मानना। 12 में 1 men किसी भी consumer product के user base का meaningful share है, और उनमें से अधिकांश इसे कभी report नहीं करते क्योंकि वे अपने पूरे जीवन इसके around work करते आए हैं।
- «Dark mode» या «high contrast» यह cover करती है यह assume करना। Contrast और CVD independent axes हैं। एक high-contrast palette अभी भी red-green distinctions पर rely कर सकती है जो fail होती हैं।
- केवल deuteranopia से testing। Deuteranopia सबसे common form है लेकिन केवल एक नहीं, protanopia, tritanopia, और partial -anomaly variants सभी different confusions produce करते हैं। उन सभी से cycle करें।
- केवल simulator use करना, contrast checker ignore करना। एक palette CVD-safe हो सकती है और फिर भी WCAG 1.4.3 contrast minimums fail कर सकती है। दोनों tools use करें।
- Colours को perceived distance के बजाय name से pick करना। «Red, green, and blue» well-separated sounds करता है; CVD में यह «dark, dark, blue.» तक collapse हो सकता है। Actual swatches test करें।
अक्सर पूछे जाने वाले प्रश्न
Simulation कितनी accurate है?
CVD simulation एक approximation है, perfect rendering नहीं। Standard algorithms (Brettel, Viénot & Mollon का 1997 method, Viénot 1999 और Machado et al 2009 द्वारा refined) एक colour को LMS colour space में missing या shifted cone के «line of confusion» पर project करते हैं। Result वह है जो average में full dichromacy वाला कोई व्यक्ति देखेगा, लेकिन real CVD users individually vary करते हैं, brain luminance, context, और prior experience से cues के साथ compensate करता है जिसे एक static simulation replicate नहीं कर सकता।
क्या मेरी image या colour कहीं भेजी जाती है?
नहीं। Simulation पूरी तरह आपके browser में एक canvas element का उपयोग करके per-pixel colour transform apply करके run होती है। कुछ भी upload, log, या store नहीं होता। यह important है जब जो image आप test कर रहे हैं वह एक unreleased design mock-up हो, confidential UI का screenshot हो, या कुछ और जो आप third party के साथ share नहीं करेंगे।
क्या मुझे CVD के सभी आठ forms के लिए design करना चाहिए?
Practice में, सबसे common forms (deuteranopia और deuteranomaly) के लिए design करने से vast majority of users cover होते हैं। Protanopia के against एक check add करने से बाकी अधिकांश cover होते हैं। Tritanopia और tritanomaly इतने rare हैं कि deutan / protan tests meet करना usually sufficient है, हालांकि एक properly accessible design जो hue पर बिल्कुल rely नहीं करती (icons, patterns, या labels के साथ paired) automatically सभी को cover करती है।
मेरे current palette के नाम में «CVD-safe» है। क्या मुझे अभी भी test करना चाहिए?
हां। «CVD-safe» का usually मतलब है palette के category colours simulation के under distinguishable हैं, लेकिन जैसे ही आप एक real interface compose करते हैं (coloured background पर text, fill पर icon, 5% lightness से shifted hover state) आप confusion re-introduce कर सकते हैं। अपने composed colour pairs test करें, न केवल source palette।
Protanopia और protanomaly में क्या अंतर है?
Protanopia L-cone (red) photopigment की absence है, affected person को बिल्कुल कोई functional red sensitivity नहीं होती। Protanomaly अपनी absence के बजाय L-cone की sensitivity peak में एक shift है, affected person को reduced लेकिन zero नहीं red discrimination होती। Same pattern deutera-/deuter- और trita-/triton- के लिए: -anopia strong form है, -anomaly partial form।
क्या colour-correcting glasses (EnChroma) actually काम करते हैं?
Red-green deficiency वाले कई लोगों के लिए, हां, वे L- और M-cones के बीच specific overlapping wavelengths filter करके certain reds और greens के बीच perceived gap को widen करते हैं। वे CVD «cure» नहीं करते या dichromat को normal colour see नहीं करवाते; photopigment situation unchanged है। Effectiveness individual और lighting condition के आधार पर vary करती है; outdoor daylight generally वह है जहां वे सबसे ज़्यादा help करते हैं।