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

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

रंग कंट्रास्ट चेकर डिज़ाइनरों, डेवलपरों और एक्सेसिबिलिटी टेस्टरों के लिए एक मुफ़्त ऑनलाइन WCAG कंट्रास्ट अनुपात चेकर है। यह एक फोरग्राउंड (टेक्स्ट) रंग और एक बैकग्राउंड रंग लेता है, प्रत्येक की सापेक्ष ल्यूमिनेंस की गणना करता है, और कंट्रास्ट अनुपात को 1:1 से 21:1 तक के मान के रूप में बताता है। फिर यह बताता है कि वह अनुपात WCAG 2.1 स्तर AA (सामान्य 4.5:1, बड़ा 3:1) और स्तर AAA (सामान्य 7:1, बड़ा 4.5:1) को पूरा करता है या नहीं, और दोनों रंगों को एक लाइव नमूना-टेक्स्ट प्रीव्यू के रूप में रेंडर करता है ताकि आप एक नज़र में पठनीयता आँक सकें। किसी डिज़ाइन को प्रकाशित करने से पहले बॉडी टेक्स्ट, बटन, लिंक और लेबल पठनीय हैं या नहीं, यह सत्यापित करने के लिए इसका उपयोग करें।

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

1. फोरग्राउंड (टेक्स्ट) रंग को HEX मान के रूप में टाइप या पेस्ट करें, या इसे दृश्य रूप से चुनने के लिए इसके नेटिव कलर पिकर पर क्लिक करें।
2. जिस बैकग्राउंड रंग पर टेक्स्ट टिका है, उसके लिए भी ऐसा ही करें।
3. कंट्रास्ट अनुपात आउटपुट पढ़ें, जो 4.5:1 जैसे मान के रूप में दिखाया जाता है (1:1 का अर्थ समान रंग, 21:1 का अर्थ सफ़ेद पर शुद्ध काला)।
4. यह देखने के लिए कि कौन-से स्तर पास होते हैं, सामान्य टेक्स्ट और बड़े टेक्स्ट (18pt / 14pt बोल्ड और अधिक) के AA व AAA बैज जाँचें।
5. अपने दोनों रंगों से रेंडर किए गए नमूना-टेक्स्ट प्रीव्यू को देखें ताकि पुष्टि हो सके कि टेक्स्ट आराम से पठनीय है।
6. जब तक आपके डिज़ाइन के लिए आवश्यक कंट्रास्ट स्तर तक न पहुँच जाएँ, तब तक किसी भी रंग को समायोजित करें।

उदाहरण

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

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

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

अनुपात 2.85:1 — AA सामान्य और AAA फेल, बॉडी टेक्स्ट के लिए आवश्यक कुछ भी पास नहीं करता

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

अनुपात 4.54:1 — AA सामान्य और AA बड़ा पास करता है, लेकिन AAA सामान्य फेल

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

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

WCAG 2.1 स्तर AA को सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 चाहिए। स्तर AAA सख़्त है: सामान्य टेक्स्ट के लिए 7:1 और बड़े टेक्स्ट के लिए 4.5:1। यह चेकर इन चारों सीमाओं में से प्रत्येक के लिए एक पास/फेल बैज दिखाता है।

बड़ा टेक्स्ट किसे माना जाता है?

WCAG बड़े टेक्स्ट को 18pt (लगभग 24px) और उससे अधिक, या बोल्ड होने पर 14pt (लगभग 18.66px) और उससे अधिक के रूप में परिभाषित करता है। बड़े टेक्स्ट की कंट्रास्ट आवश्यकता कम होती है क्योंकि बड़े ग्लिफ़ पढ़ने में आसान होते हैं, यही कारण है कि सामान्य टेक्स्ट के बैज फेल होने पर भी बड़े टेक्स्ट के बैज पास हो सकते हैं।

कंट्रास्ट अनुपात की गणना कैसे होती है?

यह आधिकारिक WCAG सूत्र का उपयोग करता है: प्रत्येक रंग की सापेक्ष ल्यूमिनेंस उसके रैखिकीकृत sRGB चैनलों से गणना की जाती है, और अनुपात (हल्का + 0.05) / (गहरा + 0.05) होता है। परिणाम 1:1 (समान रंग) से 21:1 (सफ़ेद पर काला) तक होता है।

क्या यह अल्फा, RGB या नामित रंगों का समर्थन करता है?

इनपुट केवल HEX है (#rgb संक्षिप्त या #rrggbb), प्रत्येक फ़ील्ड के लिए एक नेटिव कलर पिकर के साथ। यह अल्फा/अपारदर्शिता या आंशिक पारदर्शिता को ध्यान में नहीं रखता — पहले अर्ध-पारदर्शी परतों को एक ठोस रंग में मिला लें, फिर उसे जाँचें।

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

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