रंग कॉन्ट्रास्ट जाँचक
एक टेक्स्ट रंग और एक बैकग्राउंड रंग डालें और WCAG 2.2 कॉन्ट्रास्ट अनुपात पाएँ, सामान्य और बड़े टेक्स्ट आकारों तथा UI ग्राफ़िक्स के लिए AA और AAA पास या फ़ेल, और वे निकटतम रंग जो पास होते हैं। इसे स्लाइड, पोस्टर, आकृतियों और वेब पेजों के लिए उपयोग करें। यह आपके ब्राउज़र में चलता है — कुछ भी अपलोड नहीं होता। निःशुल्क, साइन-अप की ज़रूरत नहीं।
कॉन्ट्रास्ट परिणाम
4.47:1
कॉन्ट्रास्ट अनुपात
सामान्य टेक्स्ट — तेज़ भूरी लोमड़ी आलसी कुत्ते के ऊपर से कूदती है (16 px)।
बड़ा टेक्स्ट, 24 px (18 pt)
मोटा बड़ा टेक्स्ट, 18.7 px (14 pt)
बटन या आइकन
दो दशमलव तक नीचे की ओर गोल किया गया: WCAG निकट की चूक को पास में नहीं बदलता, इसलिए 4.499 का 4.5 में फ़ेल होना तय है।
| आवश्यकता | आवश्यक | परिणाम |
|---|---|---|
| सामान्य टेक्स्ट, AA (1.4.3) | 4.5:1 | फ़ेल |
| सामान्य टेक्स्ट, AAA (1.4.6) | 7:1 | फ़ेल |
| बड़ा टेक्स्ट, AA (1.4.3) | 3:1 | पास |
| बड़ा टेक्स्ट, AAA (1.4.6) | 4.5:1 | फ़ेल |
| UI कंपोनेंट और ग्राफ़िक्स, AA (1.4.11) | 3:1 | पास |
बड़े टेक्स्ट का अर्थ है कम से कम 18 पॉइंट (24 px) सामान्य वज़न या 14 पॉइंट (लगभग 18.7 px) मोटा। स्लाइड और पोस्टर पर मुख्य टेक्स्ट आम तौर पर बड़ा होता है; फ़ुटनोट और कैप्शन अक्सर नहीं।
पास होने वाले सुझाए गए रंग
टेक्स्ट का रंग बदलें
बैकग्राउंड बदलें
हर सुझाव ह्यू और सैचुरेशन रखता है और केवल लाइटनेस बदलता है, सबसे छोटे चरण में जो पास हो।
रंग कॉन्ट्रास्ट जाँचक का उपयोग कैसे करें
- 1. दोनों रंग डालें। हर एक को HEX (
#777777),rgb(),hsl()या CSS नाम के रूप में टाइप करें, या रंग-चयनकर्ता का उपयोग करें। अदला-बदली करें दोनों को आपस में बदल देता है, जो हल्के-पर-गहरे और गहरे-पर-हल्के संस्करणों की जाँच के लिए उपयोगी है। - 2. अनुपात और तालिका पढ़ें। अनुपात 1:1 (समान रंग) से 21:1 (काले पर सफ़ेद) तक होता है। तालिका इसे हर WCAG आवश्यकता से तुलना करती है और केवल रंग से नहीं, शब्दों में बताती है कि पास है या फ़ेल।
- 3. आकार तय करें। बड़े टेक्स्ट की आवश्यकताएँ कम होती हैं। पूर्वावलोकन सामान्य टेक्स्ट, बड़ा टेक्स्ट, मोटा बड़ा टेक्स्ट और एक बॉर्डर वाला कंट्रोल दिखाता है, ताकि आप अपने मामले का आकलन कर सकें।
- 4. विफल जोड़ी ठीक करें। वह स्तर चुनें जिसका आप लक्ष्य रखते हैं और सुझाया गया टेक्स्ट रंग या बैकग्राउंड उपयोग करें। टूल ह्यू बनाए रखता है और केवल लाइटनेस बदलता है, सबसे छोटे चरण में जो पास हो।
WCAG 2.2 क्या माँगता है
वेब कंटेंट एक्सेसिबिलिटी दिशानिर्देश (WCAG) 2.2 तीन सफलता मानदंडों में न्यूनतम कॉन्ट्रास्ट अनुपात तय करते हैं। अनुपात है (L₁ + 0.05) ÷ (L₂ + 0.05), जहाँ L₁ हल्के रंग की सापेक्ष ल्यूमिनेंस है और L₂ गहरे रंग की।
| मानदंड | स्तर | सामान्य टेक्स्ट | बड़ा टेक्स्ट |
|---|---|---|---|
| 1.4.3 कॉन्ट्रास्ट (न्यूनतम) | AA | 4.5:1 | 3:1 |
| 1.4.6 कॉन्ट्रास्ट (उन्नत) | AAA | 7:1 | 4.5:1 |
| 1.4.11 गैर-टेक्स्ट कॉन्ट्रास्ट | AA | UI कंपोनेंट और सार्थक ग्राफ़िक्स के लिए 3:1 | — |
बड़ा टेक्स्ट कम से कम 18 पॉइंट, या 14 पॉइंट मोटा होता है — स्क्रीन पर 96 dpi पर 24 px और लगभग 18.7 px। लोगो, केवल सजावटी टेक्स्ट और निष्क्रिय कंट्रोल 1.4.3 से छूट प्राप्त हैं। 1.4.11 का 3:1 नियम उन कंट्रोल के हिस्सों पर लागू होता है जिनके बिना उन्हें पहचाना नहीं जा सकता (बटन का बॉर्डर, चेकबॉक्स की रूपरेखा), उनकी अवस्थाओं जैसे फ़ोकस पर, और उन ग्राफ़िक्स पर जिन्हें पाठक सामग्री समझने के लिए चाहिए, जैसे चार्ट की रेखाएँ।
अनुपात कैसे निकाला जाता है
हर sRGB चैनल को 0–1 तक स्केल करके रैखिक बनाया जाता है: c ÷ 12.92 यदि c ≤ 0.04045, अन्यथा ((c + 0.055) ÷ 1.055)2.4। फिर सापेक्ष ल्यूमिनेंस 0.2126 R + 0.7152 G + 0.0722 B होती है। हरे को सबसे ज़्यादा महत्व मिलता है, क्योंकि आँख उसके प्रति सबसे संवेदनशील है।
0.03928 वाली गलती
WCAG 2.0 और 2.1 सीमा को 0.03928 लिखते हैं, जो sRGB मानक के एक प्रारंभिक ड्राफ़्ट का अवशेष है; मानक 0.04045 का उपयोग करता है। WCAG 2.2 ग्लॉसरी में इसे 0.04045 कर दिया गया और यह नोट किया गया कि इस अंतर से कोई व्यावहारिक परिणाम नहीं बदलता। यह जाँचक 0.04045 का उपयोग करता है।
एक जोड़ी जो थोड़े से फ़ेल होती है
#777777 सफ़ेद पर: 4.48:1 — सामान्य टेक्स्ट के लिए AA में फ़ेल (4.5:1 चाहिए), बड़े टेक्स्ट के लिए पास।
#767676 सफ़ेद पर: 4.54:1 — सफ़ेद पर AA पास करने वाला सबसे हल्का ग्रे।
#0000ff सफ़ेद पर: 8.59:1 — AAA पास। #ff0000 सफ़ेद पर: 4.0:1 — सामान्य टेक्स्ट के लिए AA में फ़ेल।
WCAG राउंड नहीं करता: 4.4999 का अनुपात 4.5 में फ़ेल होता है। इसलिए जाँचक अनुपात को दो दशमलव तक नीचे की ओर गोल करके दिखाता है, ताकि निकट की चूक कभी पास के रूप में न दिखे।
स्लाइड, पोस्टर और आकृतियाँ जाँचना
- स्लाइड और पोस्टर वेब पेज नहीं हैं, पर WCAG के अनुपात उनके लिए भी स्वीकृत मानदंड हैं। स्लाइड पर मुख्य टेक्स्ट आम तौर पर बड़ा होता है (24 px, 18 pt के बराबर); कैप्शन, फ़ुटनोट और एक्सिस लेबल बड़े नहीं होते, इसलिए उन्हें सामान्य टेक्स्ट की तरह जाँचें।
- प्रोजेक्शन के लिए न्यूनतम से ऊपर लक्ष्य रखें। रोशन कमरे में प्रोजेक्टर सभी के लिए कॉन्ट्रास्ट घटा देता है। जो स्लाइड उज्ज्वल कमरे में दिखाई जाएगी, उसके टेक्स्ट के लिए AAA (7:1) चुनें।
- फ़ोटो या ग्रेडिएंट पर टेक्स्ट की कोई एक बैकग्राउंड नहीं होती। टेक्स्ट के पीछे के सबसे हल्के और सबसे गहरे हिस्से जाँचें, या टेक्स्ट को ठोस पैनल पर रखें।
- चार्ट और आकृतियाँ 1.4.11 के अंतर्गत आती हैं: लाइनों, बार और मार्करों को बैकग्राउंड के मुकाबले 3:1 चाहिए। अर्थ अकेले रंग से नहीं देना चाहिए — देखें Color Blindness Simulator।
- पारदर्शी रंग मापने से पहले समतल किए जाते हैं: पहले बैकग्राउंड को सफ़ेद पर रखा जाता है, फिर टेक्स्ट को बैकग्राउंड पर। जिस पेज के पीछे कुछ और हो, वहाँ वह रंग सीधे दर्ज करना होगा।
APCA पर एक नोट
Accessible Perceptual Contrast Algorithm (APCA) WCAG 3 के वर्किंग ड्राफ़्ट में एक उम्मीदवार विधि है, जो टेक्स्ट के आकार, वज़न और ध्रुवीयता को ध्यान में रखती है। यह एक ड्राफ़्ट है, आवश्यकता नहीं, और अभी कोई कानून या मानक इसकी माँग नहीं करता। WCAG 2.x अनुपात — जो इस टूल में हैं — अनुपालन के दावों का आधार बने हुए हैं।
अक्सर पूछे जाने वाले प्रश्न
- अच्छा कॉन्ट्रास्ट अनुपात कौन-सा है?
- सामान्य टेक्स्ट के लिए 4.5:1 या अधिक WCAG AA को पूरा करता है, और 7:1 AAA को। बड़े टेक्स्ट के लिए AA में 3:1 और AAA में 4.5:1 चाहिए। काला-सफ़ेद अधिकतम है, 21:1। 3:1 से कम अनुपात कई लोगों के लिए, अच्छी दृष्टि होने पर भी, पढ़ने में कठिन है।
- WCAG में बड़ा टेक्स्ट किसे माना जाता है?
- वह टेक्स्ट जो सामान्य वज़न में कम से कम 18 पॉइंट (24 px) का हो, या मोटे वज़न में कम से कम 14 पॉइंट (लगभग 18.7 px) का। आकार प्रदर्शित रूप में नापा जाता है, इसलिए हैंडआउट पर छोटे दिखने वाले स्लाइड फ़ॉन्ट प्रोजेक्ट होने पर बड़े हो सकते हैं।
- क्या कॉन्ट्रास्ट नियम आइकन और चार्ट की लाइनों पर भी लागू होता है?
- हाँ, सफलता मानदंड 1.4.11 गैर-टेक्स्ट कॉन्ट्रास्ट के माध्यम से: सामग्री समझने के लिए ज़रूरी यूज़र-इंटरफ़ेस कंपोनेंट और ग्राफ़िक्स को आस-पास के रंगों के मुकाबले कम से कम 3:1 चाहिए। सजावटी ग्राफ़िक्स और निष्क्रिय कंपोनेंट छूट प्राप्त हैं।
- मेरा रंग 4.49 क्यों दिखाता है, जबकि अनुपात लगभग 4.5 है?
- क्योंकि WCAG सटीक अनुपात की तुलना करता है और राउंडिंग का कोई लाभ नहीं देता। 4.4999:1 वाली जोड़ी 4.5:1 की आवश्यकता में फ़ेल होती है, इसलिए टूल 4.50 की बजाय मान को दो दशमलव तक नीचे गोल करके दिखाता है।
- सुझाए गए रंग कैसे काम करते हैं?
- टूल आपके रंग का ह्यू और सैचुरेशन रखता है और उसकी HSL लाइटनेस को छोटे चरणों में ऊपर या नीचे करता है, और लक्ष्य अनुपात तक पहुँचने वाला निकटतम मान 8-बिट HEX कोड के रूप में लौटाता है। यदि कोई लाइटनेस उस तक नहीं पहुँचती — जैसे मध्यम ग्रे के मुकाबले 7:1 — तो टूल यह बताता है और दूसरा रंग बदलने का सुझाव देता है।
- क्या APCA, WCAG अनुपात से बेहतर है?
- APCA धारणा को अधिक निकटता से मॉडल करता है, खासकर डार्क मोड और पतले टेक्स्ट के लिए, पर वह WCAG 3 के ड्राफ़्ट का हिस्सा है, स्वीकृत आवश्यकता का नहीं। WCAG 2.x का हवाला देने वाले एक्सेसिबिलिटी कानून और खरीद मानक यहाँ गणना किया गया अनुपात उपयोग करते हैं।