सुलभ रंग पैलेट जनरेटर

एक्सेसिबल कलर पैलेट जनरेटर क्या है?

एक एक्सेसिबल कलर पैलेट जनरेटर एक टूल है जो आपको एक वेबसाइट, ऐप, या प्रिंट डिज़ाइन के लिए रंगों का एक सेट इकट्ठा करने में मदद करता है जहाँ एक साथ प्रदर्शित करने के लिए बनाई गई प्रत्येक रंग जोड़ी (पृष्ठभूमि पर पाठ, कैनवस पर बटन, फ़ील्ड पर लेबल) WCAG कंट्रास्ट आवश्यकताओं को पूरा करती है। बिंदु है कि कम कंट्रास्ट संयोजनों को ऑडिट समय के बजाय डिज़ाइन समय पर पकड़ना। आप एक पैलेट में रंग जोड़ते हैं, टूल प्रत्येक जोड़ी के बीच कंट्रास्ट अनुपात की गणना करता है, और प्रत्येक जोड़ी को AAA पास, AA पास, या विफल लेबल करता है। आप तब तक पुनरावृत्ति करते हैं जब तक कि आप वास्तव में उपयोग करने का इरादा रखने वाली प्रत्येक जोड़ी पास नहीं हो जाती।

कंट्रास्ट अनुपात 1:1 (समान रंग, अदृश्य) और 21:1 (सफ़ेद पर काला) के बीच की एक संख्या है। WCAG 2.2 सफलता मानदंड 1.4.3 मानक आकार पर मुख्य पाठ के लिए 4.5:1 (स्तर AA), बड़े पाठ के लिए 3:1 (24px+ सामान्य या 18.66px+ बोल्ड), और ग्राफिकल तत्वों और UI नियंत्रणों के लिए 4.5:1 (SC 1.4.11) की आवश्यकता है। WCAG AAA मुख्य पाठ को 7:1 और बड़े पाठ को 4.5:1 तक बढ़ाता है। ADA, EAA, AODA, और समान कानूनों के अनुसार अधिकांश सार्वजनिक-सामना करने वाली वेबसाइटों को कम से कम AA को पूरा करना चाहिए; कई न्यायाधिकारों में सरकारी साइटों को AAA को पूरा करना चाहिए।

यह टूल आपके ब्राउज़र में चलता है। आप कलर पिकर के साथ रंग चुनते हैं, टूल WCAG-निर्दिष्ट सूत्र का उपयोग करके सापेक्ष चमक और कंट्रास्ट अनुपात की गणना करता है, और एक ग्रिड हर जोड़ी की स्थिति दिखाता है। आप अंतिम पैलेट को CSS कस्टम प्रॉपर्टी (var(--brand-primary)), HEX सूची, Tailwind कॉन्फ़िगरेशन स्निपेट, या डिज़ाइन टोकन के लिए JSON के रूप में निर्यात कर सकते हैं। कुछ भी अपलोड नहीं किया जाता है; पूरा पैलेट आपके डिवाइस पर रहता है।

टूल के अंदर क्या है

टूल का शीर्ष एक कलर पिकर प्लस एक एड-टू-पैलेट बटन है। एक रंग चुनें, इसे नाम दें (ब्रांड प्राइमरी, सरफेस, बॉडी टेक्स्ट, आदि), और जोड़ें। पैलेट बाईं ओर स्वैच सूची के रूप में बढ़ता है। आप किसी भी स्वैच को संपादित कर सकते हैं, इसे हटा सकते हैं, या पुन: व्यवस्थित करने के लिए खींच सकते हैं। पूर्वनिर्धारित सुलभ पैलेट प्रारंभिक बिंदुओं के रूप में उपलब्ध हैं (उच्च-कंट्रास्ट जोड़े, IBM Carbon शैली में डिज़ाइन किए गए पैलेट, मटीरियल डिज़ाइन 3 टोनल पैलेट); एक चुनें, फिर अनुकूलित करें।

कंट्रास्ट ग्रिड स्वैच के प्रत्येक जोड़े को लेता है और प्रत्येक WCAG स्तर के लिए कंट्रास्ट अनुपात प्लस पास/फेल बैज दिखाता है: AA-normal (4.5:1), AA-large (3:1), AAA-normal (7:1), AAA-large (4.5:1)। 4.7:1 के रूप में दिखाई गई जोड़ी AA-normal पास करती है लेकिन AAA-normal में विफल होती है; 2.1:1 के रूप में दिखाई गई जोड़ी सब कुछ विफल करती है। एक सेल को होवर करके जोड़ी को वास्तविक पाठ के रूप में देखें। ग्रिड को अनुपात के अनुसार क्रमबद्ध करें ताकि पहले सबसे खराब जोड़े का पता लगाया जा सके।

एक्सपोर्ट पैनल पैलेट को उस तरीके से प्रारूपित करता है जिसकी आपकी टूलचेन उम्मीद करती है: आधुनिक CSS के लिए CSS कस्टम प्रॉपर्टी, पुरानी पाइपलाइन के लिए Sass वेरिएबल, Tailwind CSS के लिए Tailwind थीम कॉन्फ़िग, क्रॉस-प्लेटफ़ॉर्म डिज़ाइन सिस्टम के लिए JSON डिज़ाइन टोकन (Style Dictionary, W3C Design Tokens Community Group spec), या केवल Figma में पेस्ट करने के लिए HEX सूची। नामकरण परंपराएँ संरक्षित हैं; आप अपने कोडबेस में सीधे कॉपी और पेस्ट कर सकते हैं।

इतिहास और पृष्ठभूमि

CIE कलरमेट्री वैज्ञानिक रंग स्थापित करती है (1931)

इंटरनेशनल कमीशन ऑन इल्युमिनेशन (CIE) ने 1931 में CIE 1931 कलर स्पेस प्रकाशित किया, यह पहला औपचारिक गणितीय विवरण है कि मनुष्य विद्युत चुम्बकीय स्पेक्ट्रा से रंग को कैसे अनुभव करते हैं। हर आधुनिक रंग प्रणाली (RGB, HSL, OKLCH, Lab, XYZ) सीधे या व्युत्पन्न परिवर्तनों के माध्यम से CIE 1931 पर बनती है। कंट्रास्ट की गणना के लिए WCAG जो सापेक्ष चमक सूत्र का उपयोग करता है वह CIE-व्युत्पन्न गणना है: यह लाल, हरे, और नीले चैनलों को इस आधार पर भारित करता है कि मानव आँख प्रत्येक के लिए कितनी मजबूती से प्रतिक्रिया करती है (हरा सबसे अधिक, नीला सबसे कम)।

WCAG 1.0 कंट्रास्ट दिशानिर्देश पेश करता है (1999)

वेब कंटेंट एक्सेसिबिलिटी गाइडलाइन्स 1.0 (W3C, मई 1999) ने कंट्रास्ट को औपचारिक एक्सेसिबिलिटी मानदंड (चेकपॉइंट 2.2: सुनिश्चित करें कि अग्रभूमि और पृष्ठभूमि रंग संयोजन पर्याप्त कंट्रास्ट प्रदान करते हैं) के रूप में पेश किया। पहला संस्करण गुणात्मक था; सीमा अस्पष्ट थी। WCAG 2.0 (दिसंबर 2008) WCAG सापेक्ष चमक सूत्र का उपयोग करके संख्यात्मक कंट्रास्ट अनुपात निर्दिष्ट करने वाला पहला था। 2.0 में 4.5:1 और 7:1 सीमाएँ 2.1 (2018) और 2.2 (2023) के माध्यम से अपरिवर्तित रखी गई हैं क्योंकि वे अधिकांश विकलांगताओं (कम दृष्टि, उम्र-संबंधित कंट्रास्ट संवेदनशीलता हानि, रंग अंधापन) में पठनीयता को व्यावहारिक डिज़ाइन बाधाओं के साथ संतुलित करते हैं।

रंग-कोडित डिज़ाइन सिस्टम परिपक्व होते हैं (2014 के बाद)

Google के Material Design (2014), IBM के Carbon Design System (2015), और डिज़ाइन टोकन के व्यापक उदय (Salesforce 2014, Atlassian 2016) ने सिस्टम-स्तर की चिंता के रूप में सुलभ रंग को सबसे आगे रखा। मटीरियल डिज़ाइन 3 (2021) ने टोनल पैलेट (प्रति रंग 13-चरण चमक रैंप) पेश किए जो स्पष्ट रूप से डिज़ाइन किए गए थे ताकि चमक स्केल पर कोई भी टोन 600+ सफ़ेद पर 4.5:1 कंट्रास्ट पास करे। इस बदलाव ने डिफ़ॉल्ट रूप से सुलभ पैलेट को आधुनिक डिज़ाइन सिस्टम में मानक अभ्यास बना दिया, पुराने ब्रांड-पहले-एक्सेसिबिलिटी-दूसरे दृष्टिकोण की जगह।

APCA को अधिक सटीक विकल्प के रूप में प्रस्तावित किया गया (2019 के बाद)

एक्सेसिबल परसेप्चुअल कंट्रास्ट एल्गोरिथम (APCA) को Andrew Somers द्वारा WCAG कंट्रास्ट सूत्र के अधिक अवधारणात्मक रूप से सटीक प्रतिस्थापन के रूप में 2019 से प्रस्तावित किया गया। WCAG कंट्रास्ट हल्के रंगों की पठनीयता को अधिक आंकता है और गहरे पृष्ठभूमियों पर गहरे पाठ को कम आंकता है; APCA इन्हें ठीक करता है। WCAG 3.0 (2.x का मसौदा उत्तराधिकारी, अब कई वर्षों से विकास में) से APCA या समान बेहतर एल्गोरिथम को अपनाने की उम्मीद है। जब तक WCAG 3 जारी नहीं किया जाता और कानून में अपनाया जाता, WCAG 2.x कंट्रास्ट अनुपात कानूनी और उद्योग मानक बना रहता है। यह टूल WCAG 2.x सूत्र का उपयोग करता है।

डिज़ाइन टोकन क्रॉस-प्लेटफ़ॉर्म मानक बनते हैं (2020 के बाद)

W3C डिज़ाइन टोकन कम्युनिटी ग्रुप 2020 में डिज़ाइन टोकन (नामित रंग, स्पेसिंग, टाइपोग्राफी मान जो CSS, iOS, Android, Figma और अन्य प्लेटफ़ॉर्म में अनुवादित होते हैं) को मानकीकृत करने के लिए बना। Style Dictionary, Tokens Studio, और उभरते W3C spec जैसे टूल सभी मशीन-पठनीय टोकन प्रारूपों पर भरोसा करते हैं। सुलभ रंग पैलेट तेजी से डिज़ाइन टोकन के रूप में भेजे जाते हैं ताकि वही सत्यापित पैलेट हर जगह उपयोग किया जाए, उस विफलता मोड को समाप्त करते हुए जहाँ वेबसाइट कंट्रास्ट पास करती है लेकिन मोबाइल ऐप नहीं।

OKLCH और अवधारणात्मक रूप से एकसमान रंग स्थान (2020 के बाद)

CSS कलर मॉड्यूल लेवल 4 (कैंडिडेट रिकमेंडेशन 2024) ने OKLCH, OKLab, Lab, LCH, और अन्य अवधारणात्मक रूप से एकसमान रंग स्थानों को मूल CSS में जोड़ा। OKLCH (Bjorn Ottosson द्वारा 2020 में पेश किया गया) सुलभ पैलेट उत्पन्न करने के लिए विशेष रूप से उपयोगी है क्योंकि समान चमक चरण आँख को समान दिखते हैं, HSL के विपरीत जहाँ चमक में चरण असमान दृश्य कूद उत्पन्न करते हैं। आधुनिक पैलेट जनरेटर (Adobe से Leonardo, Polychrom, यह टूल जब OKLCH इनपुट मोड पर सेट किया जाता है) इन स्थानों का लाभ उठाकर दृश्य रूप से अधिक सुसंगत पैलेट उत्पन्न करते हैं जो समान चमक स्तर पर कंट्रास्ट लक्ष्यों को पूरा करते हैं।

व्यावहारिक वर्कफ़्लो

एक नया ब्रांड पैलेट डिज़ाइन करना

उस ब्रांड रंग से शुरू करें जिसे आपको रखना चाहिए (लोगो रंग, मार्केटिंग-टीम-धन्य प्राथमिक)। इसे पैलेट में जोड़ें, फिर टिंट (हल्के संस्करण) और शेड (गहरे संस्करण) के साथ-साथ न्यूट्रल (सफ़ेद, सरफेस, सरफेस वेरिएंट, टेक्स्ट) का निर्माण करें। AA-normal के विरुद्ध प्रत्येक टेक्स्ट-ऑन-बैकग्राउंड जोड़ी की जाँच करें। यदि आपका प्राथमिक ब्रांड रंग सफ़ेद पर विफल होता है, तो आपके पास दो विकल्प हैं: इसका उपयोग केवल बड़े तत्वों (लोगो, सजावटी उच्चारण) के लिए करें और बॉडी टेक्स्ट को गहरे संस्करण के साथ जोड़ें, या ब्रांड रंग को थोड़ा समझौता करें। यह टूल डिज़ाइन समय पर उन विकल्पों को सतह पर लाता है।

मौजूदा साइट के रंग निर्णयों का ऑडिट करना

अपने मौजूदा डिज़ाइन टोकन (CSS कस्टम प्रॉपर्टी, Tailwind कॉन्फ़िग, Sass वेरिएबल) से रंग मान खींचें, उन्हें इस टूल में दर्ज करें, और कंट्रास्ट ग्रिड की समीक्षा करें। आम विफलताएँ: सफ़ेद पर मौन ग्रे टेक्स्ट (अक्सर #999 या #aaa, जो 2.8:1 या 2.5:1 देता है), सफ़ेद टेक्स्ट के साथ ब्रांड-कलर बटन जहाँ बटन मध्य-टोन है, व्यस्त पृष्ठभूमियों पर लिंक रंग। विफलताओं को उनके अनुपात और किस WCAG मानदंड का उल्लंघन करते हैं उसके साथ दस्तावेज़ करें; वह दस्तावेज़ीकरण उपचार योजना की शुरुआत है।

चार्ट और डेटा विज़ के लिए उच्चारण रंग चुनना

डेटा विज़ुअलाइज़ेशन के लिए, आपको उच्चारण रंगों की आवश्यकता है जो चार्ट पृष्ठभूमि के विरुद्ध कंट्रास्ट पास करते हैं और जो रंग दृष्टि की कमी वाले उपयोगकर्ताओं के लिए भी एक-दूसरे से अलग पहचाने जा सकते हैं। इस टूल को ColorBrewer (Cynthia Brewer, Penn State, 2002) के साथ जोड़ें जो रंग अंधापन सिमुलेशन के तहत अलग पहचाने जाने योग्य रहने के लिए डिज़ाइन किए गए पैलेट प्रकाशित करता है। दोनों टूल के माध्यम से उम्मीदवार पैलेट चलाएँ: पृष्ठभूमि के विरुद्ध कंट्रास्ट (यह टूल), पैलेट रंगों के बीच विशिष्टता (ColorBrewer या Viz Palette)।

हल्के पैलेट के लिए डार्क-मोड पूरक बनाना

डार्क मोड केवल उल्टा प्रकाश मोड नहीं है; कंट्रास्ट आवश्यकताएँ अभी भी लागू होती हैं लेकिन आँख गहरे पर हल्के टेक्स्ट को हल्के पर गहरे टेक्स्ट से अलग तरह से अनुभव करती है (APCA बहस मुख्यतः इसी के बारे में है)। डार्क पैलेट को नामित टोकन के समानांतर सेट (सरफेस-डार्क, टेक्स्ट-डार्क, एक्सेंट-डार्क) के रूप में बनाएँ और प्रत्येक डार्क-मोड जोड़ी को AA के विरुद्ध जाँचें। आम डार्क-मोड विफलताएँ: शुद्ध काले (#000) पर शुद्ध सफ़ेद (#fff) हलेशन (प्रकाश ब्लीडिंग) का कारण बनता है, इसलिए डिज़ाइनर अक्सर #121212 पर #e5e5e5 का उपयोग करते हैं; यह अभी भी AA पास करता है लेकिन पढ़ने में अधिक आरामदायक है।

विभिन्न सतहों के लिए पैलेट संस्करण उत्पन्न करना

आधुनिक UI के कई सतह स्तर हैं (पृष्ठभूमि, कार्ड, कार्ड-ऊंचा, मोडल, पॉपओवर)। प्रत्येक सतह को उसके ऊपर उपयोग किए जाने वाले प्रत्येक टेक्स्ट और उच्चारण रंग के साथ सही ढंग से जोड़ी बनानी चाहिए। प्रत्येक सतह को पैलेट स्वैच के रूप में जोड़ें और प्रत्येक सतह के विरुद्ध प्रत्येक टेक्स्ट रंग की जाँच करें। कंट्रास्ट ग्रिड जल्दी से दिखाता है कि क्या टेक्स्ट-ऑन-कार्ड जोड़ी पास करते समय आपकी टेक्स्ट-ऑन-मोडल जोड़ी विफल होती है (मोडल में आमतौर पर ऊंचाई को इंगित करने के लिए थोड़ा अलग पृष्ठभूमि टिंट होता है, जो आपको ध्यान दिए बिना कंट्रास्ट को AA से नीचे गिरा सकता है)।

कानूनी या ऑडिट सबमिशन के लिए अनुपालन दस्तावेज़

ADA या EAA अनुपालन दस्तावेज़ के लिए, आपको आमतौर पर यह दिखाने की आवश्यकता होती है कि आपके डिज़ाइन सिस्टम में प्रत्येक रंग संयोजन प्रासंगिक WCAG स्तर को पास करता है। पैलेट प्लस कंट्रास्ट ग्रिड को अपने उत्पाद के लिए अभिगम्यता विवरण या VPAT (Voluntary Product Accessibility Template) के हिस्से के रूप में निर्यात करें। निर्यात किया गया JSON स्वचालित अनुपालन रिपोर्ट को फ़ीड करने के लिए पर्याप्त संरचित है; दृश्य ग्रिड मानवीय समीक्षा के लिए अच्छा है।

सामान्य त्रुटियाँ

ब्रांड रंग को अछूत मानना

सबसे आम पैटर्न: मार्केटिंग कॉर्पोरेट प्राथमिक रंग पर जोर देता है, लेकिन यह सफ़ेद पर AA कंट्रास्ट में विफल होता है। विकल्प: ब्रांड रंग का उपयोग केवल बड़े या सजावटी तत्वों के लिए करें (अधिक उदार 3:1 बड़ा-टेक्स्ट बार पास करता है), टेक्स्ट उपयोग के लिए रंग को थोड़ा गहरा करें (अधिकांश ब्रांडों में गहरे संस्करण के लिए लचीलापन है), या बॉडी टेक्स्ट रंग को काले से कम कठोर गहरे ग्रे में बदलें ताकि ब्रांड रंग एक उच्चारण के रूप में पढ़ा जाए। Leonardo (Adobe से) जैसे टूल ब्रांड रंग के सुलभ संस्करण स्वचालित रूप से उत्पन्न करते हैं; सत्यापन के लिए इस टूल के साथ जोड़ें।

कंट्रास्ट को एकमात्र अभिगम्यता जाँच के रूप में उपयोग करना

कंट्रास्ट पास करना पठनीयता की गारंटी नहीं देता। 4.5:1 अनुपात फ़र्श है; कुछ उपयोगकर्ता (कम दृष्टि, उम्र-संबंधित कंट्रास्ट संवेदनशीलता हानि, डिस्लेक्सिया) उच्च अनुपातों से लाभान्वित होते हैं। WCAG SC 1.4.6 (बढ़ा हुआ कंट्रास्ट, AAA) बॉडी टेक्स्ट के लिए 7:1 की सिफारिश करता है ठीक इसलिए क्योंकि 4.5:1 न्यूनतम है, लक्ष्य नहीं। उच्च कंट्रास्ट को पर्याप्त फ़ॉन्ट आकार (बॉडी के लिए 16px+), पर्याप्त लाइन ऊंचाई (1.5x फ़ॉन्ट आकार) के साथ संयोजित करें, और फ़ॉन्ट विकल्प जो अक्षर आकार को संरक्षित करते हैं (बॉडी टेक्स्ट के लिए अल्ट्रा-थिन वज़न से बचें)।

गैर-टेक्स्ट कंट्रास्ट को भूलना (SC 1.4.11)

WCAG 1.4.11 (WCAG 2.1 में जोड़ा गया, 2018) UI घटकों और ग्राफिकल तत्वों के लिए 3:1 कंट्रास्ट की आवश्यकता है: फ़ॉर्म फ़ील्ड बॉर्डर, बटन रूपरेखा, आइकन, फ़ोकस इंडिकेटर। यह छूटना आसान है क्योंकि डिज़ाइनर सोचते हैं कि कंट्रास्ट केवल टेक्स्ट पर लागू होता है। सफ़ेद पर सूक्ष्म ग्रे फ़ील्ड बॉर्डर वाला साफ़ फ़ॉर्म 1.4.11 में विफल हो सकता है भले ही सभी टेक्स्ट 1.4.3 पास करते हों। प्रत्येक दृश्य तत्व का ऑडिट करें जो अर्थ या स्थिति बताता है, केवल पृष्ठभूमि पर टेक्स्ट नहीं।

बड़े-टेक्स्ट नियमों को गलत समझना

WCAG की बड़ी-टेक्स्ट सीमा (4.5:1 के बजाय 3:1) उस टेक्स्ट पर लागू होती है जो 18pt या बड़ा है (लगभग 24px), या 14pt बोल्ड (लगभग 18.66px बोल्ड)। कुछ भी छोटा सामान्य टेक्स्ट है और 4.5:1 की आवश्यकता है। डिज़ाइनर कभी-कभी 3:1 बड़ा-टेक्स्ट नियम सभी हेडिंग स्तरों पर लागू करते हैं, लेकिन 16px पर h5 WCAG की परिभाषा के अनुसार सामान्य टेक्स्ट है। प्रदर्शित आकार की जाँच करें, हेडिंग स्तर की नहीं। बोल्ड संशोधक मायने रखता है: 18px बोल्ड बड़े टेक्स्ट के रूप में पास होता है; 18px सामान्य नहीं।

जानकारी देने के लिए केवल रंग पर भरोसा करना

WCAG 1.4.1 (रंग का उपयोग, स्तर A) कंट्रास्ट से अलग है। यहाँ तक कि सही कंट्रास्ट अनुपात के साथ, आप रंग को स्थिति के एकमात्र संकेतक के रूप में उपयोग नहीं कर सकते (लाल मतलब अमान्य, हरा मतलब वैध, नीला मतलब लिंक)। रंग को दूसरे संकेत के साथ जोड़ें: आइकन (त्रुटियों के लिए चेतावनी त्रिकोण), पैटर्न (लिंक के लिए रेखांकित), या टेक्स्ट लेबल (अनिवार्य फ़ील्ड के पास आवश्यक)। रंग-अंधे उपयोगकर्ता (पुरुषों का लगभग 8%, महिलाओं का 0.5%) और ग्रेस्केल मोनोक्रोम स्क्रीन पर उपयोगकर्ता इन माध्यमिक संकेतों पर निर्भर करते हैं।

hover, focus, और active स्थितियों को भूलना

एक बटन अपनी डिफ़ॉल्ट स्थिति में कंट्रास्ट पास करता है लेकिन :hover स्टाइल इसे सीमा से नीचे हल्का करती है; :focus रूपरेखा एक सूक्ष्म ग्रे है जो बटन पृष्ठभूमि के विरुद्ध 3:1 विफल होती है; :active स्थिति रंगों को उल्टा करती है और नया संयोजन विफल होता है। केवल डिफ़ॉल्ट नहीं, अपने कंट्रास्ट ग्रिड में प्रत्येक इंटरैक्टिव स्थिति का परीक्षण करें। फ़ोकस इंडिकेटर विशेष रूप से महत्वपूर्ण है (SC 2.4.7 फ़ोकस विज़िबल, AA): यदि फ़ोकस स्पष्ट रूप से दिखाई नहीं देता, तो केवल-कीबोर्ड उपयोगकर्ता पृष्ठ पर अपना स्थान खो देते हैं।

गोपनीयता और डेटा हैंडलिंग

आप जो रंग जोड़ते हैं, पैलेट नाम, और निर्यात किए गए टोकन सभी आपके ब्राउज़र में रहते हैं। कंट्रास्ट गणना आपकी मशीन पर JavaScript में चलती है; कुछ भी अपलोड नहीं किया जाता। यह दस्तावेज़ों की तुलना में रंग पैलेट के लिए कम मायने रखता है लेकिन तब भी मायने रखता है जब पैलेट एक अघोषित ब्रांड रिफ्रेश या एक गोपनीय क्लाइंट प्रोजेक्ट का हिस्सा है: आप नहीं चाहते कि यह लॉन्च से पहले तीसरे पक्ष के SaaS वैलिडेटर पर लीक हो।

एक बार पृष्ठ लोड हो जाने के बाद, टूल ऑफ़लाइन काम करता है। आप इंटरनेट से डिस्कनेक्ट कर सकते हैं, पैलेट बना सकते हैं, जाँच चला सकते हैं, और निर्यात कर सकते हैं। निर्यात किए गए टोकन ब्राउज़र के सामान्य सेव डायलॉग के माध्यम से सीधे डाउनलोड किए जाते हैं। कई क्लाउड रंग टूल (Coolors, Adobe Color, यहाँ तक कि कुछ अभिगम्यता चेकर) पैलेट को सर्वर-साइड स्टोर करते हैं और उन्हें विश्लेषण या प्रशिक्षण के लिए उपयोग कर सकते हैं; गोपनीय कार्य के लिए, क्लाइंट-साइड टूल को प्राथमिकता दें।

इस टूल का उपयोग कब न करें

पूर्ण रंग-अंधापन सिमुलेशन के लिए (एक समर्पित टूल का उपयोग करें)

कंट्रास्ट रंग-अंधापन संगतता के समान नहीं है। एक पैलेट सभी कंट्रास्ट जाँच पास कर सकता है और फिर भी एक रंग-अंधे उपयोगकर्ता को भ्रमित कर सकता है (समान चमक पर लाल और हरा एक ड्यूटेरानोप के लिए समान दिखता है)। रंग-अंधापन सिमुलेशन के लिए, Absolutool रंग अंधापन सिम्युलेटर या Adobe Color के एक्सेसिबिलिटी व्यू का उपयोग करें, दोनों वास्तविक ड्यूटेरानोपिया, प्रोटैनोपिया, और ट्रिटैनोपिया रंग परिवर्तन लागू करते हैं। इस टूल और एक सिम्युलेटर दोनों के माध्यम से उम्मीदवार पैलेट चलाएँ।

शून्य से रंग योजनाएँ उत्पन्न करने के लिए (Leonardo या Coolors का उपयोग करें)

यह टूल पैलेट की जाँच और ऑडिट करता है; यह उन्हें एक एकल बीज रंग से उत्पन्न नहीं करता है। शून्य से पैलेट उत्पादन (अनुरूप, पूरक, त्रिक, विभाजित-पूरक योजनाएँ) के लिए, Adobe Color, Coolors, या Leonardo (जो ब्रांड रंग के सुलभ संस्करण उत्पन्न करता है) का उपयोग करें। उन टूल के साथ उत्पन्न करें, फिर इस के साथ सत्यापित करें। Leonardo विशेष रूप से विशिष्ट कंट्रास्ट अनुपातों पर लक्षित रंग उत्पन्न करता है, जो इस टूल के सत्यापन चरण के लिए प्राकृतिक इनपुट प्रारूप है।

APCA-आधारित कंट्रास्ट के लिए (जब WCAG 3 शिप होगा)

यह टूल WCAG 2.x कंट्रास्ट सूत्र का उपयोग करता है, जो वर्तमान कानूनी और उद्योग मानक है। यदि आपको विशेष रूप से APCA (प्रस्तावित WCAG 3 एल्गोरिथम) के लिए डिज़ाइन करने की आवश्यकता है, तो Myndex Research से APCA कंट्रास्ट कैलकुलेटर का उपयोग करें। APCA अलग (और तर्कसंगत रूप से अधिक अवधारणात्मक रूप से सटीक) रेटिंग्स उत्पन्न करता है, विशेष रूप से डार्क-ऑन-डार्क और लाइट-ऑन-लाइट टेक्स्ट के लिए। जब तक WCAG 3 अनुमोदित और कानून में अपनाया नहीं जाता (संभवतः कई वर्ष भविष्य में), WCAG 2.x वही है जो अनुपालन ऑडिटर जाँचेंगे।

पूर्ण WCAG ऑडिट के लिए (एक व्यापक टूल का उपयोग करें)

कंट्रास्ट दर्जनों मानदंडों में से एक है। पूर्ण अभिगम्यता ऑडिट के लिए, axe DevTools, Lighthouse, WAVE, या Tenon या PowerMapper जैसे भुगतान समाधान का उपयोग करें। ये एक ही पास में कंट्रास्ट, alt टेक्स्ट, ARIA, फ़ॉर्म लेबल, फ़ोकस ऑर्डर, हेडिंग संरचना, और कई और जाँच करते हैं। पैलेट डिज़ाइन के दौरान इस टूल का उपयोग करें, और एकीकरण परीक्षण के दौरान व्यापक टूल का उपयोग करें।

अधिक प्रश्न

AA और AAA कंट्रास्ट के बीच क्या अंतर है?

AA मानक है, अधिकांश अभिगम्यता कानूनों (ADA, EAA, AODA, आदि) द्वारा कानूनी रूप से आवश्यक और हर सार्वजनिक-सामना करने वाली साइट को पूरा करना चाहिए। AAA अधिक कड़ा है: बॉडी टेक्स्ट के लिए 7:1, बड़े टेक्स्ट के लिए 4.5:1। AAA आम तौर पर केवल उच्च-दांव सामग्री (कुछ न्यायाधिकारों में सरकारी वेबसाइट, चिकित्सा और कानूनी जानकारी, प्राथमिक दर्शकों के रूप में कम दृष्टि वाले उपयोगकर्ताओं के लिए सामग्री) के लिए आवश्यक है। AAA के लिए डिज़ाइन करना प्रतिबंधात्मक है; कम ब्रांड महत्वपूर्ण रंग सीमाओं के बिना इसे पूरा कर सकते हैं। डिफ़ॉल्ट रूप से AA का लक्ष्य रखें और जहाँ सामग्री दर्शक इसे उचित ठहराते हैं वहाँ AAA।

WCAG विशेष रूप से 4.5:1 का उपयोग क्यों करता है?

4.5:1 सीमा को इसलिए चुना गया ताकि टेक्स्ट 20/40 दृष्टि वाले उपयोगकर्ताओं (कई न्यायाधिकारों में कानूनी अंधेपन की सीमा) के लिए सहायक आवर्धन के बिना पठनीय बना रहे। यह वह कंट्रास्ट अनुपात भी है जिस पर रंग-दृष्टि-घाटे वाले उपयोगकर्ता पृष्ठभूमि से अग्रभूमि को विश्वसनीय रूप से अलग कर सकते हैं। संख्या दृष्टि अनुसंधान से प्रायोगिक रूप से कैलिब्रेट की गई है; यह मनमानी नहीं है। AAA का 7:1 लगभग 20/80 दृष्टि के अनुरूप है, काफी अधिक विकलांगता को समायोजित करता है।

कंट्रास्ट सूत्र कैसे काम करता है?

प्रत्येक रंग को sRGB से सापेक्ष चमक में सूत्र का उपयोग करके परिवर्तित करें: एक खंडित फलन लागू करके प्रत्येक चैनल (R, G, B) को गामा-सही करें (निम्न मानों के लिए रैखिक, उच्च के लिए घातांकीय), फिर 0.2126 R + 0.7152 G + 0.0722 B (प्रत्येक चैनल के लिए सापेक्ष मानव-नेत्र संवेदनशीलता) से भारित करें। दो रंगों के बीच कंट्रास्ट अनुपात (L1 + 0.05) / (L2 + 0.05) है जहाँ L1 हल्की चमक और L2 गहरी है। 0.05 ऑफ़सेट परिवेशी स्क्रीन प्रतिबिंब को ध्यान में रखता है। परिणाम 1 (समान) और 21 (अधिकतम) के बीच की संख्या है।

क्या मुझे फ़ॉर्म फ़ील्ड में प्लेसहोल्डर टेक्स्ट के कंट्रास्ट के बारे में चिंता करनी चाहिए?

हाँ। प्लेसहोल्डर टेक्स्ट WCAG के तहत टेक्स्ट के रूप में गिना जाता है और 4.5:1 कंट्रास्ट को पूरा करना चाहिए। प्लेसहोल्डर के लिए ब्राउज़र डिफ़ॉल्ट हल्का ग्रे (अधिकांश ब्राउज़र में #a9a9a9) है, जो सफ़ेद पर विफल होता है। CSS के साथ ओवरराइड करें: ::placeholder { color: #595959; } या समान जो AA पास करता है। इससे भी बेहतर, महत्वपूर्ण फ़ील्ड के लिए प्लेसहोल्डर से पूरी तरह बचें; फ़ील्ड के ऊपर दृश्य लेबल का उपयोग करें और प्लेसहोल्डर को उदाहरण स्वरूपण के लिए आरक्षित रखें। फ़्लोटिंग-लेबल पैटर्न दृश्य लेबल और उदाहरण स्पष्टता को जोड़ते हैं।

क्या कंट्रास्ट अक्षम बटन और फ़ॉर्म फ़ील्ड पर लागू होता है?

नहीं। WCAG SC 1.4.3 स्पष्ट रूप से अक्षम नियंत्रणों को छूट देता है क्योंकि मौन उपस्थिति स्वयं एक दृश्य संकेत है कि नियंत्रण अनुपलब्ध है। अक्षम बटन आमतौर पर लगभग 38% अपारदर्शिता तक फीके होते हैं और डिज़ाइन द्वारा अपनी अक्षम स्थिति में कंट्रास्ट विफल होते हैं। हालाँकि, अक्षम स्थिति अभी भी सक्षम स्थिति से स्पष्ट रूप से अलग होनी चाहिए, इसलिए सिर्फ़ सभी दृश्य उपचार न हटाएँ; एक स्पष्ट दृश्य अंतर के साथ-साथ एक स्क्रीन-रीडर-सुलभ अक्षम विशेषता का उपयोग करें।

चार्ट और आइकन जैसी ग्राफिकल सामग्री के लिए कंट्रास्ट के बारे में क्या?

WCAG 1.4.11 गैर-टेक्स्ट कंट्रास्ट (2.1 में जोड़ा गया) UI घटकों (बटन, फ़ॉर्म बॉर्डर, फ़ोकस इंडिकेटर) और सार्थक ग्राफिकल तत्वों (आइकन जो स्थिति बताते हैं, चार्ट तत्व जो डेटा श्रृंखला को अलग करते हैं) के लिए 3:1 कंट्रास्ट की आवश्यकता है। 3:1 सीमा टेक्स्ट के लिए 4.5:1 से कम है क्योंकि ग्राफिक्स में आम तौर पर बड़े दृश्य क्षेत्र होते हैं। सजावटी ग्राफिक्स जो अर्थ नहीं बताते वे छूट दिए गए हैं। प्रत्येक आइकन पर 3:1 लागू करें जो स्थिति बताता है (दृश्य के लिए खुली आँख, हटाने के लिए X, चयनित के लिए चेकमार्क) और प्रत्येक चार्ट खंड जिसे अलग पहचाना जा सके।