रंग कंट्रास्ट चेकर (WCAG)
टेक्स्ट और बैकग्राउंड रंग के कंट्रास्ट अनुपात को WCAG 2.2 AA और AAA के अनुसार सामान्य टेक्स्ट, बड़े टेक्स्ट और UI तत्वों के लिए जांचें, और पास होने वाले सबसे नज़दीकी रंग पाएं
टूल लोड हो रहा है…
टेक्स्ट का रंग और बैकग्राउंड का रंग चुनें और WCAG 2.2 कंट्रास्ट अनुपात के साथ AA और AAA के परिणाम एक साथ देखें। जब कोई स्तर पास नहीं होता, तो पेज केवल लाइटनेस बदलकर पास होने वाला सबसे नज़दीकी रंग सुझाता है। वेबसाइट, ऐप या प्रेज़ेंटेशन का टेक्स्ट ठीक से पढ़ा जा सकता है या नहीं, यह जांचने के लिए उपयोगी है।
इस्तेमाल का तरीका
- "दो रंग जांचें" में, पिकर से या HEX, rgb() या hsl() टाइप करके "टेक्स्ट का रंग" और "बैकग्राउंड का रंग" सेट करें।
- "पूर्वावलोकन वाक्य" में अपना टेक्स्ट लिखें और उसे सामान्य, बड़े और बोल्ड टेक्स्ट के रूप में तथा बॉर्डर और आइकन के रूप में देखें।
- "पास होने वाले सबसे नज़दीकी रंग" के नीचे, "टेक्स्ट का रंग बदलें" या "बैकग्राउंड बदलें" के बगल में "लागू करें" दबाएं। किसी HEX मान को कॉपी करने के लिए उस पर दबाएं।
- "पैलेट जांचें" में 2 से 12 रंग दर्ज करें; सभी संयोजनों की तालिका और "स्तर तक पहुंचने वाले जोड़े" की सूची मिलती है।
यह कैसे काम करता है
- कंट्रास्ट अनुपात = (L1 + 0.05) ÷ (L2 + 0.05), जहां L1 और L2 दोनों रंगों की सापेक्ष चमक हैं। यह 1:1 से 21:1 तक होता है और दो दशमलव तक नीचे की ओर पूर्णांकित किया जाता है।
- स्तर WCAG 2.2 के मानदंड 1.4.3 (AA: सामान्य टेक्स्ट 4.5:1, बड़ा टेक्स्ट 3:1), 1.4.6 (AAA: 7:1 और 4.5:1) और 1.4.11 (UI तत्वों के लिए 3:1) के अनुसार हैं। बड़ा टेक्स्ट 24px, या बोल्ड 18.66px, या उससे अधिक होता है।
- सुझाव में OKLCH में ह्यू और क्रोमा वैसे ही रखे जाते हैं और स्तर तक पहुंचने के लिए केवल लाइटनेस बदली जाती है। जब किसी भी लाइटनेस से वहां नहीं पहुंचा जा सकता, तो पेज यह बता देता है।
- पिछले रंग, वाक्य और पैलेट की सूची इसी ब्राउज़र में सहेजी रहती है।
अक्सर पूछे जाने वाले सवाल
- 4.5:1 के कंट्रास्ट अनुपात का क्या मतलब है?
- हल्के रंग की सापेक्ष चमक में 0.05 जोड़ने पर वह गहरे रंग की सापेक्ष चमक में 0.05 जोड़ने के 4.5 गुना होती है। सामान्य आकार के टेक्स्ट के लिए AA पर यह न्यूनतम है।
- क्या सफ़ेद पर ग्रे टेक्स्ट #777777 पास होता है?
- इसका अनुपात 4.47:1 है, जो 4.5:1 से थोड़ा कम है, इसलिए केवल बड़े टेक्स्ट का स्तर पास होता है। एक कदम गहरा #767676 4.54:1 देता है और AA पास करता है।
- AA और AAA में क्या अंतर है?
- AA को सामान्य टेक्स्ट के लिए 4.5:1 चाहिए, AAA को 7:1। अधिकतर साइटें AA का लक्ष्य रखती हैं; AAA लंबे पढ़ने वाले टेक्स्ट के लिए उपयुक्त है।
- क्या बटन के बॉर्डर और आइकन को भी कंट्रास्ट चाहिए?
- हां। WCAG 1.4.11 के अनुसार, अर्थ बताने वाले UI तत्वों और ग्राफ़िक्स को अपने आस-पास के मुकाबले कम से कम 3:1 चाहिए; "UI तत्व और ग्राफ़िक्स" पंक्ति यही जांचती है।