यह टूल क्या करता है
रंग कंट्रास्ट चेकर बताता है कि वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस (WCAG 2.x) के अनुसार कोई टेक्स्ट रंग बैकग्राउंड रंग पर पढ़ने लायक है या नहीं। टेक्स्ट और बैकग्राउंड के लिए कोई भी CSS रंग डालें — HEX, rgb(), hsl(), रंग का नाम या पारदर्शी रंग — और आपको कंट्रास्ट अनुपात, हर AA और AAA मानदंड का पास/फ़ेल और लाइव प्रीव्यू दिखेगा। जोड़ी फ़ेल होने पर यह उसी ह्यू में सबसे नज़दीकी पास होने वाले टेक्स्ट और बैकग्राउंड रंग सुझाता है। सब कुछ आपके ब्राउज़र में चलता है।
उपयोग कैसे करें
- टेक्स्ट का रंग और बैकग्राउंड का रंग लिखें या चुनें। अदला-बदली दोनों को बदल देता है।
- कंट्रास्ट अनुपात और सामान्य टेक्स्ट, बड़े टेक्स्ट और UI कॉम्पोनेंट के लिए पास/फ़ेल सूची पढ़ें।
- कोई स्तर फ़ेल हो तो सबसे नज़दीकी पास होने वाले रंग देखें: हर सुझाव में नया रंग, उसका अनुपात, कॉपी बटन और लागू करने के लिए इस्तेमाल करें होता है।
- WCAG 3 ड्राफ़्ट का लाइटनेस कंट्रास्ट (Lc) भी देखने के लिए APCA चालू करें।
अर्ध-पारदर्शी रंग जाँच से पहले मिलाए जाते हैं: टेक्स्ट बैकग्राउंड पर, और बैकग्राउंड सफ़ेद पर।
उदाहरण
#767676 on #ffffff → 4.54:1 passes AA normal text
#777777 on #ffffff → 4.47:1 fails AA normal text, passes AA large text
#000000 on #ffffff → 21:1 the maximumअनुपात कैसे निकाला जाता है
हर रंग की सापेक्ष ल्यूमिनेंस उसके sRGB चैनलों से निकाली जाती है (रैखिक करके 21% लाल, 72% हरा और 7% नीला वज़न दिया जाता है)। अनुपात (हल्का + 0.05) / (गहरा + 0.05) होता है, जो एक जैसे रंगों के लिए 1:1 से सफ़ेद पर काले के लिए 21:1 तक जाता है। सिर्फ़ हल्कापन मायने रखता है, ह्यू नहीं: शुद्ध हरे पर शुद्ध लाल रंगीन दिखता है पर सिर्फ़ लगभग 1.3:1 देता है।
सुझाव सिर्फ़ रंग का हल्कापन (HSL में L) बदलते हैं और वह दिशा चुनते हैं — गहरा या हल्का — जिसमें कम बदलाव लगे। कभी-कभी कोई शेड काम नहीं करता: मध्यम ग्रे बैकग्राउंड पर कोई भी टेक्स्ट रंग 7:1 तक नहीं पहुँचता।
अक्सर पूछे जाने वाले सवाल
› मुझे कितना कंट्रास्ट अनुपात चाहिए?
WCAG 2.x का AA स्तर सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट तथा इनपुट बॉर्डर, आइकन और फ़ोकस रिंग जैसे UI कॉम्पोनेंट के लिए 3:1 माँगता है। AAA स्तर सामान्य टेक्स्ट के लिए 7:1 और बड़े टेक्स्ट के लिए 4.5:1 माँगता है। ज़्यादातर क़ानून और नीतियाँ AA स्तर को मानती हैं।
› बड़ा टेक्स्ट किसे माना जाता है?
सामान्य वज़न में कम से कम 24px (18pt), या बोल्ड में कम से कम 18.66px (14pt) का टेक्स्ट। इससे छोटा सब कुछ सामान्य टेक्स्ट है और उसे ऊँचा अनुपात चाहिए।
› 4.49:1 फ़ेल क्यों है?
WCAG की सीमाएँ सटीक हैं: 4.499 का अनुपात 4.5 तक नहीं पहुँचता। इसलिए यह चेकर दिखाए गए अनुपात को ऊपर राउंड करने के बजाय काट देता है और पास/फ़ेल सटीक मान से तय करता है।
› APCA क्या है?
APCA (Accessible Perceptual Contrast Algorithm) WCAG 3 ड्राफ़्ट के लिए प्रस्तावित कंट्रास्ट विधि है। यह लाइटनेस कंट्रास्ट मान Lc देती है जो इस पर निर्भर करता है कि कौन-सा रंग टेक्स्ट है, और डार्क मोड के लिए बेहतर है। यह अभी क़ानूनी मानक नहीं है, इसलिए यहाँ सिर्फ़ अतिरिक्त मार्गदर्शन के रूप में दिखाया जाता है।