रंग कंट्रास्ट चेकर

रंग कंट्रास्ट चेकर क्या है?

रंग कंट्रास्ट चेकर डिज़ाइनरों, डेवलपरों और एक्सेसिबिलिटी टेस्टरों के लिए एक मुफ़्त ऑनलाइन WCAG और APCA कंट्रास्ट चेकर है। यह रंगों को HEX (#rgb, #rrggbb और alpha सहित 8-अंकीय #rrggbbaa), rgb()/rgba() और hsl()/hsla() के रूप में स्वीकार करता है, मापने से पहले अर्ध-पारदर्शी फोरग्राउंड को बैकग्राउंड पर संयोजित करता है, और WCAG 2.1 अनुपात (1:1 से 21:1) तथा APCA Lc लाइटनेस-कंट्रास्ट स्कोर दोनों बताता है। यह WCAG 2.1 स्तर AA (सामान्य 4.5:1, बड़ा 3:1) और AAA (सामान्य 7:1, बड़ा 4.5:1) को चिह्नित करता है, गैर-टेक्स्ट UI घटकों और ग्राफ़िक्स के लिए 3:1 बैज जोड़ता है, और निकटतम पास होने वाला फोरग्राउंड सुझा सकता है — केवल इसकी लाइटनेस को AA या AAA पूरा होने तक समायोजित करते हुए — जिसे आप एक क्लिक में लागू करते हैं।

रंग कंट्रास्ट चेकर का उपयोग कैसे करें

1. फोरग्राउंड (टेक्स्ट) रंग को HEX, rgb() या hsl() के रूप में दर्ज करें — alpha सहित 8-अंकीय HEX या rgba स्वीकार्य है — या दृश्य रूप से चुनने के लिए कलर पिकर पर क्लिक करें।
2. बैकग्राउंड रंग को उसी तरह दर्ज करें; कंट्रास्ट मापने से पहले अर्ध-पारदर्शी फोरग्राउंड को उस पर (और बैकग्राउंड को सफ़ेद पर) संयोजित किया जाता है।
3. फोरग्राउंड और बैकग्राउंड को कभी भी पलटने के लिए अदला-बदली बटन का उपयोग करें।
4. WCAG 2.1 कंट्रास्ट अनुपात और उसके ठीक बगल में दिखाया गया APCA Lc स्कोर पढ़ें।
5. सामान्य और बड़े टेक्स्ट के लिए AA और AAA बैज, तथा UI घटकों और ग्राफ़िक्स के लिए 3:1 बैज जाँचें।
6. यदि कोई जोड़ी फेल हो, तो निकटतम AA या AAA पास रंग देखें और फोरग्राउंड अपडेट करने के लिए लागू करें पर क्लिक करें।

उदाहरण

फोरग्राउंड #595959, बैकग्राउंड #ffffff

अनुपात 7.00:1 और उच्च APCA Lc — सामान्य और बड़े टेक्स्ट के लिए AA और AAA पास

फोरग्राउंड #00000080 (50% काला) #ffffff पर

पहले एक ठोस धूसर में संयोजित, फिर WCAG अनुपात और APCA Lc की गणना

फोरग्राउंड #999999, #ffffff पर — 2.85:1, AA फेल

निकटतम AA रंग खोलें और उसी रंगत को बनाए रखते हुए 4.5:1 तक पहुँचने के लिए लागू करें पर क्लिक करें

अक्सर पूछे जाने वाले सवाल

WCAG किन कंट्रास्ट अनुपातों की माँग करता है?

WCAG 2.1 स्तर AA को सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े के लिए 3:1 चाहिए; स्तर AAA को 7:1 और 4.5:1 चाहिए। गैर-टेक्स्ट UI घटकों और ग्राफ़िक ऑब्जेक्ट (SC 1.4.11) को 3:1 चाहिए। यह चेकर इनमें से प्रत्येक सीमा के लिए एक पास/फेल बैज दिखाता है।

APCA Lc स्कोर क्या है?

APCA (एक्सेसिबल परसेप्चुअल कंट्रास्ट एल्गोरिद्म) WCAG 3 के लिए प्रस्तावित कंट्रास्ट विधि है। यह लगभग 0 से 108 तक एक लाइटनेस-कंट्रास्ट (Lc) मान देता है, जहाँ अधिक का अर्थ अधिक कंट्रास्ट है, और यह ध्रुवता (हल्के पर गहरा बनाम गहरे पर हल्का) को ध्यान में रखता है। यह WCAG 2.1 अनुपात के बगल में दिखता है और एकल पास/फेल के बजाय अपने स्तरों का उपयोग करता है।

निकटतम पास रंग सुझाव कैसे काम करता है?

यह फोरग्राउंड की रंगत और संतृप्ति बनाए रखता है और केवल उसकी लाइटनेस को हल्का या गहरा करता है जब तक बैकग्राउंड के सापेक्ष कंट्रास्ट AA (4.5:1) या AAA (7:1) पूरा न हो जाए, फिर आप इसे एक क्लिक में लागू कर सकते हैं। यदि बैकग्राउंड मध्यम-टोन का है और लक्ष्य तक नहीं पहुँचा जा सकता, तो यह इसके बजाय निकटतम संभव रंग दिखाता है।

मैं कौन-से रंग प्रारूप दर्ज कर सकता हूँ?

HEX (#rgb, #rrggbb, साथ ही #rgba और alpha सहित 8-अंकीय #rrggbbaa), rgb()/rgba() और hsl()/hsla(), प्रत्येक फ़ील्ड के लिए एक नेटिव कलर पिकर के साथ। अनुपात की गणना से पहले अर्ध-पारदर्शी फोरग्राउंड को बैकग्राउंड पर संयोजित किया जाता है — जो स्वयं पहले सफ़ेद पर समतल किया जाता है। नामित रंग समर्थित नहीं हैं।

क्या मेरे रंग किसी सर्वर पर भेजे जाते हैं?

नहीं। समस्त पार्सिंग, संयोजन और ल्यूमिनेंस, अनुपात व APCA गणना पूरी तरह आपके ब्राउज़र में JavaScript के साथ चलती है — कोई रंग अपलोड नहीं होता और सर्वर पर कुछ नहीं भेजा जाता, इसलिए यह निजी रूप से और पेज लोड होने के बाद ऑफ़लाइन भी काम करता है।