सुलभ रंग संयोजन कैसे चुनें
रंग के चुनाव सौंदर्यपरक निर्णय जैसे दिखते हैं और क़ानूनी निर्णय की तरह काम करते हैं। 2021 के बाद से अमेरिकी प्रतिवादियों पर हर साल लगभग 4,000 वेब-सुलभता मुक़दमे आते हैं, और अपर्याप्त रंग कंट्रास्ट WCAG-आधारित दायरों में सबसे ज़्यादा उद्धृत तीन समस्याओं में से एक है (दूसरे हैं: ग़ायब alt टेक्स्ट और बिना लेबल के फ़ॉर्म फ़ील्ड)। अच्छी ख़बर: कंट्रास्ट तीनों में सबसे सरल है ठीक करने के लिए। बुरी ख़बर: «सुलभ» हेडलाइन अनुपात से आगे जाता है, रंग अंधापन, फ़ोकस संकेतक, डार्क मोड और टोकनीकरण सभी मायने रखते हैं।
डिजिटल रंग सुलभता का संक्षिप्त इतिहास
लिखित मानक के रूप में रंग कंट्रास्ट W3C के Web Accessibility Initiative के 1997 के पहले काम तक जाता है। मूल Web Content Accessibility Guidelines 1.0 (मई 1999) ने पर्याप्त कंट्रास्ट को गुणात्मक शब्दों में अनुशंसित किया, बिना ठोस संख्या के। WCAG 2.0 (दिसंबर 2008) ने अब परिचित सापेक्ष चमक सूत्र और AA स्तर पर 4.5:1 अनुपात पेश किया, जो Lighthouse International के शोध से लिया गया था कि चश्मा-पहनने वाले बुज़ुर्ग उपयोगकर्ता स्क्रीन पर क्या आराम से पढ़ सकते हैं।
क़ानूनी वज़न बाद में आया। US Rehabilitation Act की धारा 508 ने 2018 में WCAG 2.0 का संदर्भ दिया; ADA, Ninth Circuit के Robles v. Domino's फ़ैसले (15 जनवरी 2019; सुप्रीम कोर्ट ने अक्टूबर 2019 में अपील सुनने से इनकार किया) के बाद, अब अमेरिकी न्यायालयों द्वारा Title III के तहत डिजिटल सुलभता को कवर करने वाला माना जाता है। European Accessibility Act 28 जून 2025 को प्रभावी हुआ, जिसमें सार्वजनिक क्षेत्र और कई निजी कंपनियों के लिए उपभोक्ता-सामना डिजिटल सेवाओं पर WCAG 2.1 AA अनिवार्य है। व्यवहार में, 4.5:1 सामान्य पाठ + 3:1 बड़ा पाठ + 3:1 UI घटक आज बनाई जा रही किसी भी सार्वजनिक वेबसाइट का वास्तविक तल है।
विज्ञान विकसित होता रहा है। WCAG 2.1 (2018) ने 3:1 ग़ैर-पाठ कंट्रास्ट नियम जोड़ा। Andrew Somers द्वारा WCAG 3 के लिए विकसित APCA एल्गोरिथ्म चमक धारणा को अधिक सटीक रूप से मॉडल करता है; यह 2026 में एक Editor's Draft है, मानक नहीं। Bjorn Ottosson के OKLAB और OKLCH (2020) ने डिज़ाइनरों को एक धारणात्मक-समान रंग स्थान दिया जो HSL या RGB में काम करने की तुलना में सुलभ रंग पैमाने बनाना बहुत आसान करता है।
«सुलभ रंग» का वास्तव में क्या अर्थ है
चार चीज़ें मायने रखती हैं, सिर्फ़ अनुपात नहीं:
- अग्रभूमि बनाम पृष्ठभूमि कंट्रास्ट। मुख्य संख्या। शरीर पाठ को 4.5:1, बड़े पाठ को 3:1, UI नियंत्रण और फ़ोकस संकेतकों को आसन्न रंगों के विरुद्ध 3:1 चाहिए।
- रंग अंधापन। लगभग 8 % पुरुष और 0.5 % महिलाएँ डिज़ाइन की कल्पना से कम रंग देखते हैं। तीन मुख्य प्रकार protanopia और deuteranopia (लाल-हरा, सबसे आम), और tritanopia (नीला-पीला) हैं।
- रंग कभी एकमात्र संकेत नहीं। WCAG 1.4.1 अर्थ बताने के लिए अकेले रंग पर निर्भर रहने पर रोक लगाता है। लाल «त्रुटि» सीमा को आइकन या लेबल की भी ज़रूरत होती है।
- फ़ोकस संकेतक। कीबोर्ड उपयोगकर्ताओं को देखना चाहिए कि फ़ोकस कहाँ है। WCAG 2.4.7 दृश्यमान फ़ोकस संकेतक की माँग करता है, और 2.4.11 अपडेट (WCAG 2.2) कम-से-कम 2 CSS पिक्सेल मोटाई और आसन्न रंग के विरुद्ध 3:1 कंट्रास्ट की माँग करता है।
सुलभ रंग कैसे चुनें, क़दम-दर-क़दम
- शब्दार्थिक tokens से शुरू करें, कच्चे रंगों से नहीं।
text-primary,text-secondary,surface-default,surface-elevated,border-default,accent-primary,accent-danger, आदि परिभाषित करें। - चमक पैमाना चुनें। OKLCH चमक मानों का उपयोग करके 5-9 चरणों का पैमाना बनाएँ, जहाँ हर चरण की अगले से एक स्थिर धारणात्मक अंतर हो।
- हर चमक स्तर पर रंग चुनें। ब्रांड रंग चुनें, फिर समान chroma बनाए रखने वाले पूरक या उच्चारण रंग चुनें।
- कंट्रास्ट अनुपात की गणना करें। स्पर्श करने वाले हर token जोड़े को सही अनुपात चाहिए।
- रंग अंधापन सिम्युलेटर चलाएँ। एक मुख्य स्क्रीन लें और protanopia, deuteranopia, tritanopia सिम्युलेटरों के माध्यम से फिर से रेंडर करें।
- वास्तविक सहायक तकनीक के साथ परीक्षण करें। Mac VoiceOver, NVDA, JAWS और TalkBack सभी को रंग संकेतों पर निर्भर हुए बिना नेविगेट करने में सक्षम होना चाहिए।
- हर जगह ग़ैर-रंग संकेत जोड़ें जहाँ रंग अर्थ ले जाता है। त्रुटि/सफलता/चेतावनी के लिए आइकन, शरीर में लिंक के लिए रेखांकन, चार्ट श्रृंखला के लिए पैटर्न।
- tokens का दस्तावेज़ीकरण करें। एक Figma लाइब्रेरी, Storybook पृष्ठ, या स्थिर डिज़ाइन-सिस्टम साइट।
कंट्रास्ट अनुपात संदर्भ
| जोड़ी | WCAG 2.1 न्यूनतम | स्तर AA | स्तर AAA |
|---|---|---|---|
| शरीर पाठ (18 pt regular या 14 pt bold से नीचे) | 4.5:1 | 4.5:1 | 7:1 |
| बड़ा पाठ (18 pt regular या 14 pt bold) | 3:1 | 3:1 | 4.5:1 |
| UI घटक (फ़ॉर्म सीमाएँ, टॉगल स्थितियाँ, फ़ोकस) | 3:1 | 3:1 | लागू नहीं |
| ग्राफ़िकल वस्तुएँ (अर्थ वाले आइकन) | 3:1 | 3:1 | लागू नहीं |
| लोगो के अंदर का पाठ | छूट | छूट | छूट |
| निष्क्रिय नियंत्रण | छूट | छूट | लागू नहीं |
| सजावटी पाठ | छूट | छूट | छूट |
रंग अंधापन के प्रकार और कैसे जाँचें
| प्रकार | व्यापकता | कम देखता है | आम विफलता |
|---|---|---|---|
| Protanopia | ~1 % पुरुष | लाल | लाल त्रुटि बनाम हरी सफलता अप्रभेद्य |
| Deuteranopia | ~5 % पुरुष | हरा | वही: लाल-हरा भ्रम |
| Tritanopia | ~0.005 % | नीला | नीला बनाम पीला अप्रभेद्य |
| Achromatopsia | ~0.003 % | सभी रंग | केवल ग्रेस्केल चमक देखता है |
| विसंगत त्रिवर्णता | ~5 % | एक चैनल में कम संवेदनशीलता | सूक्ष्म रंग अंतर मिलते हैं |
आम जाल
- HSL या RGB में डिज़ाइन करना। HSL में समान संख्यात्मक क़दम असमान धारणा वाले क़दम पैदा करते हैं। OKLCH ठीक करता है।
- स्थिति के लिए अकेले रंग पर भरोसा। त्रुटि और सफलता के लिए लाल और हरा: 8 % उपयोगकर्ता उन्हें अलग नहीं कर सकते। आइकन या लेबल जोड़ें।
- शुद्ध सफ़ेद पर शुद्ध काला।
#000पर#FFF21:1 देता है पर लंबे पढ़ने के लिए कड़ा है। निकट-काले और निकट-सफ़ेद पर उतरें। - ब्रांड-रंग तानाशाही। ब्रांड लाल को पवित्र मानना और इसे 2.1:1 पर इस्तेमाल करना «क्योंकि यह ब्रांड है»। ब्रांड पैलेट को ताज़ा करें।
- अंधेरे पृष्ठभूमियों पर ग़ायब फ़ोकस संकेतक। गहरे नीले बटन पर 2-पिक्सेल नीला छल्ला अदृश्य हो सकता है। फ़ोकस छल्ले को हर सतह के विरुद्ध परखें।
- Placeholder पाठ जो कंट्रास्ट विफल करता है।
placeholder=पाठ ब्राउज़र द्वारा ~40 % अपारदर्शिता पर रेंडर होता है। सफ़ेद इनपुट पर यह आसानी से 4.5:1 से नीचे गिर जाता है। - फ़ॉर्म फ़ील्ड की रूपरेखाएँ बहुत धुंधली। सफ़ेद पर 1px ग्रे सीमा 1.2:1 पर WCAG 1.4.11 विफल होती है। 3:1 या मोटा बढ़ाएँ।
- केवल रंग बदलने वाले Hover स्थिति। कुछ पॉइंटर डिवाइस hover नहीं देते। सूक्ष्म छाया या रूपांतर के साथ संयोजित करें।
- साधारण उलटाव द्वारा डार्क मोड। उलटना कठोर संतृप्त गहरे रंग पैदा करता है। डार्क मोड को अपना डिज़ाइन पास चाहिए।
- छवियों पर ऑटो-जनरेटेड पाठ। उपयोगकर्ता-अपलोडेड छवि पर रेंडर किया गया पाठ कंट्रास्ट की गारंटी नहीं दे सकता। पारभासी पृष्ठभूमि या text-shadow जोड़ें।
वैकल्पिक एल्गोरिथ्म और मानक
| एल्गोरिथ्म | वर्ष | स्थिति | ताक़त |
|---|---|---|---|
| WCAG 2.x कंट्रास्ट अनुपात | 2008 | अधिकांश विनियमन द्वारा आवश्यक | सरल गणित, व्यापक उपकरण |
| APCA | 2020 | WCAG 3 Editor's Draft | धारणात्मक चमक में बेहतर |
| ISO 9241-302 | 2008 | वर्कस्टेशन एर्गोनॉमिक्स मानक | हार्डवेयर उन्मुख, बहुत सख़्त |
| Lighthouse कंट्रास्ट चेतावनियाँ | 2018 | Chrome DevTools | मुफ्त, ब्राउज़र में |
| axe-core | 2015 | ओपन-सोर्स लाइब्रेरी | स्वचालित परीक्षण के लिए उद्योग मानक |
आज के विनियमित काम के लिए, WCAG 2.1 AA तल है। APCA WCAG 3 के परिपक्व होने के साथ देखने योग्य है; कई डिज़ाइन-सिस्टम टीमें पहले से ही दोनों संख्याएँ रिपोर्ट करती हैं।
सुलभ रंग चुनने के लिए उपकरण
| उपकरण | उद्देश्य | ताक़त |
|---|---|---|
| रंग कंट्रास्ट चेकर (ब्राउज़र) | अग्रभूमि/पृष्ठभूमि जोड़ी स्कोर करें | तत्काल, बिना अपलोड |
| सुलभ पैलेट जनरेटर | स्थिर chroma पर पूरा चमक पैमाना बनाएँ | धारणात्मक एकरूपता के लिए OKLCH |
| रंग अंधापन सिम्युलेटर | एक रंग-अंधे दर्शक के दिखने जैसा स्क्रीन फिर से रेंडर करें | लॉन्च से पहले लाल-हरे मुद्दे पकड़ता है |
| Chrome DevTools Lens | कंट्रास्ट और रंग अंधापन को जगह पर निरीक्षण | ब्राउज़र में निर्मित |
| WebAIM Contrast Checker | क्लासिक WCAG 2 संदर्भ | विश्वसनीय, व्यापक उद्धृत |
| Stark (Figma प्लगइन) | Figma डिज़ाइनों का ऑडिट | डिज़ाइन समय पर मुद्दे पकड़ता है |
| axe DevTools (ब्राउज़र) | स्वचालित WCAG स्कैन | उद्योग मानक |
| Tailwind, Radix, Open Props रंग पैमाने | पूर्व-परीक्षित OKLCH पैलेट | डिज़ाइन टीमों द्वारा क्यूरेट सुलभता |
गोपनीयता और उपकरण
रंग कंट्रास्ट चेकर, सुलभ पैलेट जनरेटर और रंग अंधापन सिम्युलेटर सभी पूरी तरह आपके ब्राउज़र में चलते हैं। आप जो रंग चुनते या चिपकाते हैं उन्हें आपके डिवाइस पर JavaScript प्रोसेस करता है, परिणाम पृष्ठ पर रेंडर होते हैं, और कुछ भी सर्वर पर नहीं भेजा जाता। कोई टेलीमेट्री नहीं, इनपुट पर कोई एनालिटिक्स नहीं, कोई तृतीय-पक्ष स्क्रिप्ट नहीं। ऐसे ब्रांड रंगों के लिए जो अभी सार्वजनिक नहीं हैं, आंतरिक उत्पाद पैलेट, या एम्बार्गो के तहत डिज़ाइन के लिए, यह सख़्ती से स्थानीय प्रवाह आपकी अप्रकाशित ब्रांड संपत्ति किसी अजनबी के डिज़ाइन उपकरण को सौंपने और न सौंपने के बीच का अंतर है। उपकरण पृष्ठ लोड होने के बाद ऑफ़लाइन चल सकते हैं, जिसे आप नेटवर्क बंद करके और एक जोड़ी की फिर से जाँच करके सत्यापित कर सकते हैं।
अक्सर पूछे जाने वाले प्रश्न
What contrast ratio does WCAG require?
WCAG 2.1 Level AA requires at least 4.5:1 for normal body text and 3:1 for large text (18 pt regular or 14 pt bold). Level AAA raises that to 7:1 for normal text and 4.5:1 for large text. Non-text UI components and graphical objects need 3:1 against adjacent colors.
Are WCAG contrast ratios scientifically accurate?
They are based on the WCAG 2.0 algorithm from 2008, which compares the relative luminance of two colors using the sRGB color space. The formula is imperfect for very dark and very light combinations and for some color hues; the APCA (Accessible Perceptual Contrast Algorithm) being developed for WCAG 3 produces more perceptually accurate results. For 2026 work, WCAG 2.x is still the standard most regulations cite.
How do I check whether my colors work for color-blind users?
Run them through a color-blindness simulator that converts your palette to what someone with protanopia, deuteranopia, or tritanopia sees. About 8% of men and 0.5% of women have some form of color vision deficiency, so this matters.
Should I use the same color palette for light and dark mode?
Usually not. Dark mode needs slightly desaturated colors at the same hue, otherwise vivid colors that look fine on white become eye-strain on black. Define semantic tokens (text-primary, surface-secondary) and map them to different physical colors per mode.
What does OKLCH have to do with accessibility?
OKLCH is a perceptually uniform color space (Bjorn Ottosson, 2020) where equal numerical changes produce equal perceptual changes. That makes it much easier to generate accessible color scales because you can step the lightness in equal increments and the perceived brightness step is consistent, which is hard to do in HSL or RGB. CSS supports OKLCH directly since 2023 in all major browsers.