सुलभ रंग कंट्रास्ट: WCAG बिना धुंधलेपन के
अपने ब्रांड को नीरस बनाए बिना WCAG 2.2 कंट्रास्ट के लिए डिज़ाइन कैसे करें। अनुपात, APCA, वास्तविक डिज़ाइन सिस्टम के उदाहरण और एक टोकनाइज़्ड टेस्टिंग वर्कफ़्लो।
अभिगम्यता और डिज़ाइन व्यक्तित्व परस्पर विरोधी नहीं हैं। यही वह भ्रम है जो अधिकांश ब्रांड टीमें खुद को तब देती हैं जब वे कंट्रास्ट पर चर्चा से बचती हैं, और यही कारण है कि कई "अभिगम्य" रीब्रांडिंग अंततः हवाई अड्डे के साइनबोर्ड की तरह दिखने लगते हैं।
अभिगम्य रंग कंट्रास्ट एक मापन समस्या है। आधुनिक डिज़ाइन प्रणालियों ने इसे पहले ही टोकन स्तर पर हल कर लिया है, जिसका अर्थ है कि आपको डब्लुसीएजी तक पहुँचने और ब्रांड को आकर्षक बनाए रखने के बीच चुनाव नहीं करना है। आपको बस नियमों को जानना है, यह जानना है कि नियम कहाँ गलत हैं, और यह जानना है कि वास्तव में काम कहाँ होता है।
कंट्रास्ट वह नियम क्यों है जिसे आप नज़रअंदाज़ नहीं कर सकते
लगभग 3 करोड़ लोग रंगों को आपके मूल पैलेट से अलग तरह से देखते हैं, और इससे भी अधिक लोग कम रोशनी में, खराब स्क्रीन पर, या आंशिक दृष्टि हानि के साथ इंटरफेस का उपयोग करते हैं जिसके बारे में किसी ने शिकायत दर्ज नहीं की है।
कम कंट्रास्ट वेब पर अभिगम्यता की सबसे आम विफलता है। इसे ठीक करना भी सबसे आसान है। दृष्टिबाधित स्थान, रंग की कमियाँ, चकाचौंध, बढ़ती उम्र के साथ आँखों की रोशनी कम होना, सस्ते मॉनिटर, फ़ोन स्क्रीन पर सीधी धूप - इन सभी समस्याओं का एक ही समाधान है: टेक्स्ट और बैकग्राउंड के बीच पर्याप्त कंट्रास्ट होना चाहिए ताकि संदेश हर परिस्थिति में स्पष्ट रूप से दिखाई दे, न कि केवल डिज़ाइनर के रेटिना डिस्प्ले पर।
इसमें गलती करने का नुकसान केवल बहिष्कार ही नहीं है, बल्कि अनुपालन संबंधी जोखिम भी है। यूरोपीय संघ का यूरोपीय अभिगम्यता अधिनियम, अमेरिका का धारा 508, ओंटारियो का AODA और कई अन्य राष्ट्रीय कानून WCAG को अपने कानूनी संदर्भ के रूप में उपयोग करते हैं। कंट्रास्ट ऑडिट में जाँची जाने वाली पहली चीज़ों में से एक है क्योंकि यह उन पहली चीज़ों में से एक है जो अक्सर त्रुटिपूर्ण पाई जाती हैं।
WCAG 2.2 कंट्रास्ट नियम सरल भाषा में
WCAG आपको तीन संख्याएँ देता है: 4.5:1, 3:1 और 3:1, और प्रत्येक एक विशिष्ट प्रकार के UI तत्व पर लागू होती है।
| तत्व | AA न्यूनतम | AAA न्यूनतम | नोट्स |
|---------|-----------|-------------|-------|
| बॉडी टेक्स्ट | 4.5:1 | 7:1 | 18pt रेगुलर या 14pt बोल्ड से छोटा कोई भी टेक्स्ट |
| बड़ा टेक्स्ट | 3:1 | 4.5:1 | 18pt+ रेगुलर या 14pt+ बोल्ड |
| UI कंपोनेंट्स और ग्राफिक्स | 3:1 | निर्दिष्ट नहीं | बटन, आइकन, फॉर्म बॉर्डर, फोकस रिंग |
| लोगो या सजावटी छवियों में टेक्स्ट | छूट प्राप्त | छूट प्राप्त | ब्रांड एलिमेंट्स और आकस्मिक टेक्स्ट शामिल नहीं हैं |
AA वह स्तर है जिसके लिए अधिकांश व्यावसायिक उत्पाद प्रयास करते हैं और अधिकांश अभिगम्यता कानून इसकी आवश्यकता रखते हैं। AAA एक सख्त लक्ष्य है, जिसका उपयोग मुख्य रूप से सरकार, स्वास्थ्य सेवा और शिक्षा क्षेत्र में किया जाता है। जब तक कोई आपको AAA प्रमाणित करने वाला अनुपालन दस्तावेज़ नहीं देता, तब तक AA न्यूनतम मानक है।
अधिकांश डिज़ाइनर 3:1 गैर-टेक्स्ट नियम को भूल जाते हैं। पेज बैकग्राउंड के सापेक्ष 2:1 अनुपात में फॉर्म फ़ील्ड बॉर्डर भी विफल हो जाता है, भले ही उसके अंदर का लेबल सही हो।
अपर्याप्त कंट्रास्ट वाला फोकस रिंग विफल हो जाता है। 2.5:1 के अनुपात में रंग पर निर्भर अर्थ वाला आइकन विफल हो जाता है। गैर-पाठ कंट्रास्ट अनिवार्य है।
WCAG गणित अक्सर गलत क्यों होता है
WCAG कंट्रास्ट अनुपात एक 30 साल पुराना फॉर्मूला है जो दृश्य दृष्टि को अनदेखा करता है, यही कारण है कि यह कभी-कभी खराब दिखने वाले रंगों को पास कर देता है और अच्छे दिखने वाले रंगों को विफल कर देता है।
WCAG 2 फॉर्मूला केवल चमक पर आधारित है। यह पृष्ठभूमि पर पाठ को दो रंगों की सापेक्ष चमक के बीच एक रेखीय संबंध के रूप में मानता है। मानव दृश्य प्रणाली वास्तव में कंट्रास्ट को इस तरह नहीं पढ़ती है।
चार डिज़ाइन सिस्टम जो अंतर को टोकनाइज़ करते हैं
ये सिस्टम पहले से ही टोकन लेयर में एक्सेसिबिलिटी को एनकोड करते हैं, इसलिए डिज़ाइनर अनुपात की गणना करने के बजाय एक भूमिका चुनते हैं।
रेडिक्स कलर्स
इसे radix-ui.com पर लाइव देखें
रेडिक्स कलर्स में 12-चरणीय स्केल शामिल हैं, जिनमें से प्रत्येक चरण को एक भूमिका सौंपी गई है। चरण 11 और 12 उच्च-कंट्रास्ट टेक्स्ट चरण हैं, जो निचले चरणों के मुकाबले WCAG AA मानकों को पूरा करने की गारंटी देते हैं। भूमिका टोकन (text, textContrast, solid, solidHover) का अर्थ है कि डिज़ाइनर कभी भी अनुपात की गणना नहीं करते हैं। वे एक भूमिका चुनते हैं।
क्या उपयोगी है: क्रमांकित कंट्रास्ट-बाय-रोल मॉडल। चरण 11 तक पहुँचने वाला कोई भी डिज़ाइनर जानता है कि यह उसी स्केल के हल्के चरणों के मुकाबले खरा उतरता है। अनुपात चरण संख्या में ही निहित है।
क्या उपयोगी है: ### मटेरियल डिज़ाइन 3
इसे m3.material.io पर लाइव देखें
मटेरियल 3 प्रत्येक रंग भूमिका को एक on- समकक्ष (on-primary, on-surface, on-error) के साथ जोड़ता है, जो अपने मूल रंग के साथ 4.5:1 के अनुपात को पूरा करने की गारंटी देता है। युग्मित टोकन अभिगम्यता परत हैं, जो सीधे सिस्टम में निर्मित हैं।
क्या उपयोगी है: on- पैटर्न। जब कोई डिज़ाइनर टेक्स्ट के लिए on-primary का उपयोग करता है, तो अभिगम्यता स्वतः ही प्राप्त हो जाती है। इसमें गलती की कोई गुंजाइश नहीं है।
दो और: अनुपात और अवधारणात्मक प्रणालियाँ
रेडिक्स और मटेरियल भूमिकाओं के युग्मन के माध्यम से कंट्रास्ट की समस्या का समाधान करते हैं। अगले दो इसे प्रलेखित अनुपातों और अवधारणात्मक रूप से एकसमान पैमानों के माध्यम से हल करते हैं। दोनों दृष्टिकोण कारगर हैं। दोनों से कुछ न कुछ सीखा जा सकता है।
GitHub प्राइमर
इसे primer.style पर लाइव देखें
प्राइमर, फोरग्राउंड, बैकग्राउंड और बॉर्डर टोकन को दस्तावेजित कंट्रास्ट अनुपात के साथ स्पष्ट श्रेणियों में विभाजित करता है। उनके fg.default और bg.default सटीक अनुपातों के साथ प्रकाशित किए गए हैं, और प्रत्येक भूमिका-आधारित सिमेंटिक टोकन के साथ समान व्यवहार किया गया है।
क्या सीखें: टोकन के बगल में अनुपात प्रकाशित करना। जब प्रत्येक टोकन का प्रत्येक प्रासंगिक पृष्ठभूमि के साथ कंट्रास्ट दस्तावेजित होता है, तो डिज़ाइनर और डेवलपर चेकर को पूरी तरह से छोड़ सकते हैं।
Adobe स्पेक्ट्रम
इसे spectrum.adobe.com पर लाइव देखें
स्पेक्ट्रम अवधारणात्मक रूप से एकसमान रंग पैमानों का उपयोग करता है ताकि समान चरण संख्या वाले दो टोकन का सभी रंगों में समान दृश्य भार हो। इसका अर्थ है कि एक थीम के भीतर रंगों को बदलने से कंट्रास्ट संबंध संरक्षित रहते हैं। अब और नहीं, "नीले रंग में पास हो गया लेकिन नारंगी रंग में फेल हो गया।"
क्या सीखें: अवधारणात्मक एकरूपता। अवधारणात्मक मॉडलों पर आधारित स्केल (जैसे HSLuv, OKLCH, या Spectrum का विशेष दृष्टिकोण) ब्रांड थीम में सुलभता को सुगम बनाते हैं।
व्यक्तित्व खोए बिना सुलभता कैसे बनाए रखें
सुलभता का मतलब सफेद बैकग्राउंड पर काला टेक्स्ट और एक फीका ब्रांड नहीं है, और सबसे समावेशी उत्पाद बनाने वाली टीमें वही हैं जिन्होंने यह बात समझ ली है।
असली बात यह है कि सुलभता किस स्तर पर है। यदि यह टोकन स्तर पर है, तो ब्रांड जीवंत बना रहता है और डिज़ाइनरों को सुलभ आउटपुट मिलते हैं। यदि यह अंतिम समीक्षा के रूप में है, तो हर ब्रांड रंग एक ऐसी समस्या बन जाता है जो ऑडिट में फेल होने के लिए तैयार रहती है।
तीन तकनीकें व्यक्तित्व और सुगमता को एक ही स्थान पर बनाए रखती हैं:
-
एक्सेंट टियर को ब्रांड रंग और सुगम क्रिया रंग में विभाजित करें। Linear ब्रांड से जुड़े महत्वपूर्ण क्षणों के लिए एक विशिष्ट बैंगनी रंग और इंटरैक्टिव तत्वों के लिए थोड़ा भिन्न बैंगनी रंग का उपयोग करता है। दोनों ही ब्रांड की पहचान हैं। प्रत्येक सतह पर केवल एक ही रंग की गारंटी है।
-
दृश्यमान रूप से एकसमान स्केल का उपयोग करें। OKLCH और HSLuv रंग मानों को बोधगम्य चमक से मैप करते हैं, जिससे आप कंट्रास्ट को बाधित किए बिना रंगों को बदल सकते हैं। Radix, Spectrum और Material 3 सभी इसके विभिन्न रूप प्रदान करते हैं।
-
डार्क मोड को एक समानांतर टोकन सेट के रूप में शामिल करें, न कि बाद में जोड़े गए फीचर के रूप में। जो टोकन डार्क मोड में विफल रहता है, वह डार्क मोड के लिए तैयार नहीं है। यदि आपका सिस्टम
text-defaultको प्रकाश में एक रंग और अंधेरे में एक अलग रंग के रूप में प्रदर्शित करता है, तो दोनों मानों को उनकी संबंधित सतह पर सही होना चाहिए।
सबसे बुरा परिणाम वह समझौता है जिसकी किसी ने मांग नहीं की थी: एक फीका ब्रांड जो अभी भी अभिगम्य नहीं है। ऐसा तब होता है जब टीमें रंगों के संयोजन को ठीक करने के बजाय कंट्रास्ट फीडबैक पर प्रतिक्रिया करते हुए हर रंग को मंद कर देती हैं। मंद करना अभिगम्यता के समान नहीं है। संबंध ही अभिगम्य हैं।
अभिगम्यता परीक्षण कार्यप्रवाह
कंट्रास्ट परीक्षण सस्ता, स्वचालित और पूरी तरह से व्यर्थ है यदि आप इसे डिज़ाइन समीक्षा तक छोड़ देते हैं।
प्रभावी कार्यप्रवाह एक नहीं, बल्कि चार बिंदुओं पर कंट्रास्ट जांच करता है।
-
टोकन परिभाषा के समय। जब एक टोकन बनाया जाता है, तो उसकी अनुमत सतहें भी परिभाषित की जाती हैं।
text-defaultकेवलbg-default,bg-subtleऔरbg-raisedपर ही मान्य है। प्रत्येक टोकन के साथ टोकन की तुलना एक बार जाँची जाती है और फिर उसे लॉक कर दिया जाता है। -
कंपोनेंट कमिट के समय स्टोरीबुक और एक्स-कोर या pa11y इंटीग्रेशन, CI के हिस्से के रूप में प्रत्येक कंपोनेंट वेरिएंट पर एक्सेसिबिलिटी जाँच करते हैं। कोई भी नया वेरिएंट जो विफल होता है, उसे मर्ज से पहले रोक दिया जाता है।
-
डिज़ाइन फ़ाइल हैंडऑफ़ के समय स्टार्क या बिल्ट-इन WCAG चेकर जैसे Figma प्लगइन्स डिज़ाइन टूल के अंदर समस्याओं को चिह्नित करते हैं। इसे डिज़ाइन के समय ही पकड़ें, समीक्षा के समय नहीं।
-
पेज स्तर पर लाइटहाउस, एक्स डेवटूल्स या pa11y स्टेजिंग या प्रोडक्शन में लाइव पेजों पर चलते हैं। यह वास्तविक दुनिया की उन त्रुटियों (तृतीय-पक्ष एम्बेड, उपयोगकर्ता-जनित सामग्री, गतिशील थीम) को पकड़ लेता है जिन्हें घटक परीक्षण पकड़ नहीं पाते।
उद्देश्य अधिक टूल चलाना नहीं है। उद्देश्य जांच को पहले करना है। CI पाइपलाइन द्वारा पाई गई कंट्रास्ट त्रुटि को ठीक करने में केवल पाँच मिनट लगते हैं। लॉन्च से पहले के ऑडिट में पकड़ी गई यही त्रुटि टीम को एक सप्ताह का समय बर्बाद कर देती है।
इस स्तरित दृष्टिकोण के काम करने के संरचनात्मक कारण के लिए, डिजाइन सिस्टम गाइड में बताया गया है कि टोकन-स्तर की सोच क्यों बेहतर है। और 60-30-10 का नियम टूट गया है में समझाया गया है कि भूमिका-आधारित रंग (जिस पर अभिगम्यता निर्भर करती है) ने अनुपात-आधारित सोच की जगह क्यों ले ली।
अक्सर पूछे जाने वाले प्रश्न
क्या WCAG AA पर्याप्त है या मुझे AAA की आवश्यकता है?
AA अधिकांश व्यावसायिक उत्पादों और अधिकांश अभिगम्यता कानूनों का मानक है। AAA केवल विशिष्ट संदर्भों (सरकार, स्वास्थ्य सेवा, शिक्षा) में कानूनी रूप से आवश्यक है और पैलेट को समतल किए बिना इसे प्राप्त करना महंगा है। न्यूनतम कंट्रास्ट अनुपात AA और अधिकतम APCA होना चाहिए।
क्या हर गैर-पाठ तत्व को कंट्रास्ट अनुपात का पालन करना आवश्यक है?
WCAG 2.2 के अनुसार, अर्थ व्यक्त करने वाले गैर-पाठ UI घटकों के लिए न्यूनतम 3:1 कंट्रास्ट अनुपात आवश्यक है। इसमें बटन, फॉर्म बॉर्डर, फोकस रिंग, अर्थपूर्ण आइकन और ग्राफिकल तत्व शामिल हैं। केवल सजावट (पृष्ठभूमि पैटर्न, परिवेशी ग्रेडिएंट) को छूट दी गई है। आकस्मिक पाठ (लोगो, फोटो कैप्शन ओवरले) को भी छूट दी गई है।
WCAG और APCA में क्या अंतर है?
WCAG 2 वर्तमान कानूनी मानक है, जो 30 साल पुराने ल्यूमिनेंस सूत्र पर आधारित है। WCAG 3 के मसौदे में APCA को इसके प्रतिस्थापन के रूप में प्रस्तावित किया गया है, जो मानव धारणा की वास्तविक कार्यप्रणाली पर आधारित है। APCA स्कोर वास्तविक पठनीयता के साथ बेहतर सहसंबंध स्थापित करते हैं, लेकिन अभी तक कानूनी रूप से अनिवार्य नहीं हैं। शिपिंग उत्पादों में दोनों का उपयोग किया जाता है: अनुपालन के लिए WCAG 2 और गुणवत्ता के लिए APCA।
टोकन में अभिगम्यता को शामिल करें
अभिगम्य रंग कंट्रास्ट कोई शैलीगत विकल्प नहीं है। यह एक सिस्टम विशेषता है।
सबसे समावेशी और ब्रांड-केंद्रित उत्पाद लॉन्च करने वाली टीमें वे हैं जिन्होंने अभिगम्यता को गौण मानकर इसे रंगो की पटिया की एक अभिन्न विशेषता के रूप में मानना शुरू कर दिया है।
टोकन अनुपातों को एन्कोड करते हैं। स्केल युग्मों को एन्कोड करते हैं। वर्कफ़्लो में चार चरणों में परीक्षण होता है। लॉन्च से पहले कोई भी स्क्रीन पर कंट्रास्ट चेकर नहीं लगाता।
यदि आपकी वर्तमान प्रक्रिया में डिज़ाइनर द्वारा पैलेट को देखकर यह तय करना शामिल है कि वह "पठनीय दिखता है या नहीं", तो आप ऑडिट में असफल हो जाएंगे। यदि आपकी प्रक्रिया में चेकर टूल और मैन्युअल समीक्षा दोनों शामिल हैं, तो आप व्यापक स्तर पर असफल हो जाएंगे। यदि आपकी प्रक्रिया में भूमिका-आधारित टोकन शामिल हैं जो परिभाषा स्तर पर अभिगम्यता को एन्कोड करते हैं, तो आप उत्पाद लॉन्च करने में सफल होंगे।
टोकन बनाएं। अनुपात प्रकाशित करें। जांच को स्वचालित करें। ब्रांड जीवंत बना रहता है, इंटरफ़ेस सुगम रहता है, और ऑडिट पुनर्निर्माण की बजाय एक औपचारिकता बनकर रह जाता है।
Need a color system that hits WCAG without flattening the brand? Brainy builds token-layer accessibility into every palette.
Get Started
