रङ्गान्धता (Color Blindness) संसारभरि लगभग ३० करोड मानिसहरूलाई असर गर्छ — करिब ८% पुरुष र ०.५% महिला। तिनीहरूका लागि web मा अदृश्य जानकारी भरिएको हुन्छ: सेतो background मा रातो error messages, हरियो success र पहेँलो warning एउटै देखिने। एउटा रङ्गान्धता सिम्युलेटर ले designers र developers लाई color vision deficiency (CVD) भएका users को दृष्टिकोणबाट आफ्नो UI अनुभव गर्न दिन्छ।
नेपालको IT sector मा designers र developers को संख्या बढ्दो छ — Kathmandu, Pokhara र Butwal मा startups र digital agencies तेजीसँग बढिरहेका छन्। Accessible design नबनाउँदा प्रत्येक १२ पुरुष users मध्ये लगभग एक जना CVD भएका हुन सक्छन्। यो guide मा WCAG standards, safe palettes र testing workflow सहित सम्पूर्ण जानकारी छ।
आफ्नो Design अहिलेनै Color Blindness Test गर्नुहोस्
कुनै पनि UI screenshot upload गर्नुहोस् र ८ CVD types बाट हेर्नुहोस्। निःशुल्क, browser मा, कुनै data store हुँदैन। Designers र accessibility engineers को trusted tool।
रङ्गान्धता के हो: Types, Prevalence र Design मा Impact
Human color vision retina मा तीन प्रकारका cone cells मा निर्भर हुन्छ: S-cones (blue), M-cones (green) र L-cones (red)। रङ्गान्धता तब हुन्छ जब एक वा बढी cone types absent वा non-functional हुन्छन्।
Prevalence by Population
| Population | Red-Green CVD (Men) | Red-Green CVD (Women) |
|---|---|---|
| Northern European | 8% | 0.5% |
| Asian (East) | 5% | 0.4% |
| Global average | ~6% | ~0.4% |
Design मा सामान्य Failures
- रातो error र हरियो success states एउटै देखिन्छन्
- Charts मा केवल color बाट data series छुट्याइएको हुन्छ
- Form validation केवल रातो border देखाउँछ
- Dashboard मा traffic light status (red/yellow/green)
Color Vision Deficiency का ८ Types
| Type | Category | Prevalence (Men) | रातो कस्तो देखिन्छ | हरियो कस्तो देखिन्छ |
|---|---|---|---|---|
| Deuteranopia | Red-Green | 1% | Brownish-yellow | Brownish-yellow (एउटै!) |
| Deuteranomaly | Red-Green | 5% | Slightly muted | More yellow-green |
| Protanopia | Red-Green | 1% | Dark brownish | Normal जस्तै |
| Protanomaly | Red-Green | 1% | Darker | Slightly different |
| Tritanopia | Blue-Yellow | 0.001% | Normal | Normal |
| Tritanomaly | Blue-Yellow | 0.01% | Normal | Normal |
| Achromatopsia | Total | 0.003% | Grey | Grey |
| Achromatomaly | Total (partial) | Rare | Muted | Muted |
Normal Vision: ● रातो ● हरियो ← स्पष्ट फरक
Deuteranopia: ● Brown ● Brown ← एउटै! यही समस्या हो।
# Common web colors deuteranopia मा:
#FF0000 (red error) → olive/dark
#00FF00 (green ok) → olive/dark ← एउटै रङ!
#0000FF (blue info) → unchanged ← Blue सुरक्षित छ
Color Blindness Simulator कसरी काम गर्छ: Daltonization Algorithm
Color blindness simulators ले Brettel-Viénot-Mollon (1997) model मा आधारित mathematical transformations प्रयोग गर्छन्।
Pipeline: sRGB → LMS → Simulate → sRGB
// Step 1: sRGB → Linear RGB
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)
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 (M-cone absent)
function simulateDeuteranopia(L, M, S) {
return { L: L, M: 0.494207 * L + 1.24827 * S, S: S };
}
WCAG 2.2 Color Accessibility Guidelines 2026
WCAG 2.2 Contrast Requirements
| Criterion | Level | Requirement |
|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | Normal text: 4.5:1; Large text: 3:1 |
| 1.4.6 Contrast (Enhanced) | AAA | Normal text: 7:1; Large text: 4.5:1 |
| 1.4.11 Non-text Contrast | AA | UI components: 3:1 |
| 1.4.1 Use of Color | A | Color मात्रैले information convey गर्न नहुने |
// Contrast ratio calculation:
// Black on White: 21:1 (maximum)
// #767676 on White: 4.54:1 (AA pass)
// #0066CC on White: 4.88:1 (AA pass — blue link)
// #999999 on White: 2.85:1 (FAIL — too light)
Color-Blind Friendly Palettes र Safe Color Combinations
Golden Rules
- Color लाई single channel नबनाउनुहोस् — Color सँगै text labels, icons वा patterns प्रयोग गर्नुहोस्
- Sufficient luminance contrast ensure गर्नुहोस्
- Red-green combinations एक्लै नराख्नुहोस् — Blue र orange को primary pair प्रयोग गर्नुहोस्
/* सबभन्दा 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-red: #D55E00;
UI Component Guidelines
| Component | गलत तरिका | Accessible तरिका |
|---|---|---|
| Error state | केवल रातो border | रातो border + error icon (✗) + "Error:" text |
| Success state | केवल हरियो background | हरियो + checkmark + "Success" text |
| Line chart | केवल रातो र हरियो lines | Different line styles + color |
| Heatmap | Red-green gradient | Viridis sequential palette |
UI Color Blindness Testing: Step-by-Step Workflow
Phase 1: Design Tool मा (Figma/Sketch)
- Design पूर्णतः desaturate गर्नुहोस् — grayscale मा पनि जानकारी स्पष्ट हुनुपर्छ
- Figma को built-in accessibility checker बाट contrast ratios check गर्नुहोस्
- Stark plugin बाट CVD simulation apply गर्नुहोस्
Phase 2: ToolsArena Simulator बाट
1. UI screenshot लिनुहोस्
2. Color Blindness Simulator मा upload गर्नुहोस्
3. सबै 8 CVD types toggle गर्नुहोस्
4. प्रत्येक type को लागि check गर्नुहोस्:
- Error र success states distinguish हुन्छन्?
- Chart elements अलग देखिन्छन्?
- Buttons र links recognizable छन्?
5. Failing components note गर्नुहोस्
6. Fixes apply गर्नुहोस् (icons थप्नुहोस्, palettes बदल्नुहोस्)
7. Re-test गर्नुहोस्
Phase 3: Browser DevTools
Chrome DevTools → More tools → Rendering →
"Emulate vision deficiencies":
- Protanopia, Deuteranopia, Tritanopia, Achromatopsia
NoCoffee extension (free, Chrome/Firefox):
- सबै CVD types simulate गर्छ
प्रसिद्ध Products जसले Color Accessibility गलत गरे
Case 1: GitHub — Diff View (2021 मा Fix भयो)
GitHub को code diff view ले classic red (removed) र green (added) प्रयोग गर्थ्यो। Deuteranopia simulation मा दुवै similar dark grey देखिन्थे। 2021 मा "Colorblind themes" add भयो — orange/blue pair जुन सबै CVD types मा distinguishable छ।
/* GitHub colorblind-friendly diff */
.diff-removed { background-color: #ffd8b5; } /* Orange — not red */
.diff-added { background-color: #b3d3f4; } /* Blue — not green */
Case 2: Power BI — Default Chart Palette
Microsoft Power BI को default chart मा पहिलो दुई colors red र green थिए — सबभन्दा common CVD failure। C-suite decisions का लागि dashboards बनाइएका थिए जुन १२ मध्ये १ male executive को लागि illegible थिए। 2022 मा colorblind theme option release भयो।
Common Failure Patterns
| Failure Pattern | Common In | Fix |
|---|---|---|
| Red = error, Green = success only | Form validation | Icons (✗, ✓) + text labels थप्नुहोस् |
| Red/green data series | BI tools | Blue/orange palette + line styles |
| Red-green heatmap | Performance tools | Viridis/plasma palette |
| Color-only links | Blogs, news sites | Underline वा 3:1 contrast |
How to Use the Tool (Step by Step)
- 1
UI screenshot तयार गर्नुहोस्
आफ्नो design को screenshot लिनुहोस् वा Figma बाट PNG export गर्नुहोस्। Actual rendered UI screenshots सबभन्दा राम्रो काम गर्छ।
- 2
Image upload गर्नुहोस्
Color Blindness Simulator मा drag-and-drop वा click गरेर upload गर्नुहोस्। PNG, JPG, WebP, SVG supported छन्। कुनै image server मा store हुँदैन।
- 3
CVD type select गर्नुहोस्
पहिले Deuteranomaly (5% men, सबभन्दा common) बाट start गर्नुहोस्। त्यसपछि Deuteranopia, Protanopia र Tritanopia test गर्नुहोस्।
- 4
Side-by-side compare गर्नुहोस्
Original र simulated versions एकसाथ हेर्न side-by-side view प्रयोग गर्नुहोस्। Error states, success states, chart legends र form validation check गर्नुहोस्।
- 5
Failing elements identify गर्नुहोस्
नोट गर्नुहोस् कहाँ critical information lost हुन्छ — colors जुन distinct थिए अब identical देखिन्छन्।
- 6
Grayscale test apply गर्नुहोस्
Achromatopsia (full grayscale) simulation मा switch गर्नुहोस्। UI ले color बिना पनि सबै जानकारी communicate गर्न सक्छ भने accessible foundation बनेको छ।
- 7
Fix गरेर re-test गर्नुहोस्
Icons थप्नुहोस्, accessible palettes switch गर्नुहोस्, chart series मा text labels थप्नुहोस्। Re-upload गरेर fixes verify गर्नुहोस्।
Frequently Asked Questions
कति percent users color blind हुन्छन्?+−
लगभग ८% पुरुष र ०.५% महिलामा color vision deficiency हुन्छ। Global average ~६% पुरुष। सबभन्दा common type deuteranomaly हो (५% पुरुष)। १ लाख users भएको app मा statistically ~४,००० color blind users हुन्छन्।
WCAG 2.2 contrast ratio requirement के हो?+−
WCAG 2.2 Level AA मा: normal text को लागि minimum 4.5:1 contrast; large text (≥18pt वा ≥14pt bold) को लागि 3:1; UI components (buttons, form fields, icons) को लागि 3:1 (criterion 1.4.11)। र criterion 1.4.1: color मात्रैले NEVER information convey गर्नु हुँदैन।
Color blind users को लागि safe colors कुन हुन्?+−
सबभन्दा safe primary pair: blue (#0072B2) र orange (#E69F00) — सबै common CVD types मा distinguishable। Red-green combinations एक्लै avoid गर्नुहोस्। Multi-series charts को लागि Wong palette (Nature journals standard) वा Okabe-Ito palette प्रयोग गर्नुहोस्। Color सँगै text labels, icons वा patterns पनि थप्नुहोस्।
Color blindness simulator कति accurate हुन्छ?+−
Mathematical approximation हो — Brettel-Viénot-Mollon model मा आधारित। Dichromacy (complete cone absence — deuteranopia, protanopia) को लागि accurate। Anomalous trichromacy को लागि कम precise। High-stakes design decisions को लागि real CVD users सँग पनि validate गर्नुहोस्।
Accessibility improvement ले सबै users लाई benefit गर्छ?+−
हो — high contrast ले bright sunlight मा mobile screens मा मद्दत गर्छ। Non-color indicators (icons, labels) ले black-and-white print, documentation screenshots र elderly users (age-related contrast sensitivity reduction) लाई फाइदा पुर्याउँछ। WCAG compliance ले SEO, performance र overall usability पनि improve गर्छ।
आफ्नो Design अहिलेनै Color Blindness Test गर्नुहोस्
कुनै पनि UI screenshot upload गर्नुहोस् र ८ CVD types बाट हेर्नुहोस्। निःशुल्क, browser मा, कुनै data store हुँदैन। Designers र accessibility engineers को trusted tool।
Color Blindness Simulator खोल्नुहोस्Related Guides
रङ कोड पिकर — HEX RGB अनलाइन नेपाल (2026)
नेपाली web designers को लागि color formats, Nepal brand colors, र CSS guide।
Color Palette from Image — Nepali (2026)
Image बाट colors extract।
CSS Gradient Generator — Free Nepali (2026)
CSS gradient design, code copy।