रंग कंट्रास्ट जाँचकर्ता
WCAG 2.1 के AA और AAA मानकों के अनुसार टेक्स्ट और बैकग्राउंड रंग के कंट्रास्ट की जाँच करें — कंट्रास्ट अनुपात तुरंत, साथ में लाइव प्रीव्यू और पास/फेल बैज।
रंग
4.48:1जितना अधिक उतना बेहतर। WCAG सामान्य टेक्स्ट के लिए कम से कम 4.5:1 माँगता है।Aa सामान्य टेक्स्ट — उदाहरण के लिए नमूना पाठ
Aa बड़ा टेक्स्ट
इस टूल के बारे में
यह रंग कंट्रास्ट जाँचकर्ता WCAG 2.1 के कंट्रास्ट सूत्र का उपयोग करके मापता है कि टेक्स्ट अपने बैकग्राउंड पर कितना पठनीय है। टेक्स्ट रंग और बैकग्राउंड रंग को HEX मानों के रूप में डालें या दृश्य रूप से चुनें, और यह तुरंत कंट्रास्ट अनुपात (जैसे 4.52:1) के साथ वेब कंटेंट एक्सेसिबिलिटी गाइडलाइन्स के AA और AAA स्तरों के पास या फेल बैज दिखाता है। एक लाइव प्रीव्यू आपके चुने रंगों में नमूना टेक्स्ट दिखाता है ताकि आप परिणाम एक नज़र में परख सकें, और अदला-बदली बटन अग्रभूमि व बैकग्राउंड को पलट देता है। सब कुछ आपके ब्राउज़र में चलता है, इसलिए यह तेज़ और निजी है और लोड होने के बाद ऑफ़लाइन भी काम करता है — डिज़ाइनरों, डेवलपरों और सुगम्य इंटरफ़ेस बनाने वाले सभी लोगों के लिए आदर्श।
उपयोग कैसे करें
- 1 अपने टेक्स्ट (अग्रभूमि) रंग को HEX मान के रूप में डालें या पिकर से चुनें।
- 2 इसी तरह बैकग्राउंड रंग डालें; #rgb और #rrggbb दोनों समर्थित हैं।
- 3 कंट्रास्ट अनुपात और सामान्य व बड़े टेक्स्ट के लिए AA/AAA बैज पढ़ें।
- 4 अदला-बदली बटन से रंग पलटें और कम से कम 4.5:1 तक समायोजित करें।
यह कैसे काम करता है
हर रंग पहले sRGB से रैखिक प्रकाश में बदला जाता है: हर चैनल को 255 से भाग दिया जाता है, और 0.03928 से अधिक मानों पर गामा वक्र लागू होता है। फिर सापेक्ष चमक L = 0.2126·R + 0.7152·G + 0.0722·B होती है, जिसमें हरे को सबसे अधिक भार मिलता है क्योंकि आँख उसके प्रति सबसे संवेदनशील है। दो रंगों के बीच कंट्रास्ट अनुपात (L1 + 0.05) / (L2 + 0.05) है, जहाँ L1 हल्का रंग और L2 गहरा रंग है। इससे मान 1:1 (समान रंग) से लेकर 21:1 (शुद्ध काले पर शुद्ध सफेद) तक मिलता है। WCAG 2.1, AA स्तर पर सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 माँगता है, जो AAA पर 7:1 और 4.5:1 हो जाता है। बड़ा टेक्स्ट लगभग 18.66px मोटा या 24px सामान्य और उससे बड़ा होता है।
अक्सर पूछे जाने वाले प्रश्न
WCAG पास करने के लिए कितना कंट्रास्ट अनुपात चाहिए?
WCAG 2.1 के AA स्तर के लिए सामान्य टेक्स्ट हेतु कम से कम 4.5:1 और बड़े टेक्स्ट हेतु 3:1 चाहिए। AAA स्तर अधिक सख़्त है, जो सामान्य टेक्स्ट के लिए 7:1 और बड़े टेक्स्ट के लिए 4.5:1 माँगता है। अधिकांश साइटें कानूनी और व्यावहारिक आधार के रूप में AA का लक्ष्य रखती हैं।
बड़ा टेक्स्ट किसे माना जाता है?
WCAG बड़े टेक्स्ट को कम से कम 18.66px (लगभग 14pt) मोटा, या किसी भी मोटाई में कम से कम 24px (लगभग 18pt) के रूप में परिभाषित करता है। बड़ा टेक्स्ट पढ़ने में आसान होता है, इसलिए इसे कम कंट्रास्ट सीमा (AA के लिए 3:1, AAA के लिए 4.5:1) की अनुमति है।
कंट्रास्ट अनुपात कैसे निकाला जाता है?
हर रंग की सापेक्ष चमक उसके रैखिकीकृत लाल, हरे और नीले चैनलों से निकलती है (L = 0.2126R + 0.7152G + 0.0722B)। फिर अनुपात (हल्का + 0.05) / (गहरा + 0.05) होता है, जो सफेद पर काले के लिए 1:1 से 21:1 तक मान देता है।
शुद्ध काला सफेद पर 21:1 क्यों होता है?
काले की सापेक्ष चमक 0 और सफेद की 1 होती है। इन्हें (1 + 0.05) / (0 + 0.05) में रखने पर 21 मिलता है, जो अधिकतम संभव कंट्रास्ट अनुपात है। इसीलिए #ffffff पर #000000 हर WCAG स्तर पास करता है।
क्या रंग कंट्रास्ट SEO और सुगम्यता कानूनों को प्रभावित करता है?
हाँ। पर्याप्त कंट्रास्ट उन सुगम्यता मानकों का हिस्सा है जिन्हें ADA, सेक्शन 508 और यूरोपीय सुगम्यता अधिनियम जैसे कानून संदर्भित करते हैं, और अच्छी पठनीयता उपयोगिता मीट्रिक भी सुधारती है। WCAG AA पूरा करने से कानूनी जोखिम घटता है और आपकी सामग्री कम दृष्टि या रंग दोष वाले लोगों के लिए उपयोगी बनती है।
संबंधित टूल और उपयोग
सुगम्य वेब और ऐप डिज़ाइन के लिए कंट्रास्ट जाँचकर्ता अनिवार्य है। अपने पैलेट को समायोजित करते समय HEX, RGB और HSL के बीच जाने के लिए इसे रंग कन्वर्टर के साथ, और स्पेसिंग या अपारदर्शिता को स्केल करते समय प्रतिशत कैलकुलेटर के साथ इस्तेमाल करें। डिज़ाइनर, फ्रंट-एंड डेवलपर और कंटेंट निर्माता इसका उपयोग बटनों, लेबलों और मुख्य टेक्स्ट को सभी के लिए पठनीय रखने हेतु करते हैं।