मुफ़्त एक्सेसिबिलिटी टूल

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

यहीं किसी टेक्स्ट रंग की तुलना बैकग्राउंड रंग से WCAG 2.2 के हिसाब से करें, या किसी पेज का पता डालकर न्यूनतम कंट्रास्ट से कम वाला हर टेक्स्ट ढूँढें, उसके मापे गए रंगों और पास होने वाले सबसे नज़दीकी रंग के साथ।

कंट्रास्ट कैलकुलेटर

टेक्स्ट का रंग और बैकग्राउंड का रंग डालें। सारी गणना आपके ब्राउज़र में ही होती है।

16 पिक्सेल का सामान्य टेक्स्ट ऐसा दिखता है।

24 पिक्सेल का बड़ा टेक्स्ट

बटन की एक आउटलाइन

कंट्रास्ट अनुपात4.54:1

इन रंगों के लिए WCAG 2.2 नतीजे
सामान्य टेक्स्ट, AAWCAG 1.4.3, 4.5:1 चाहिएपास
बड़ा टेक्स्ट, AAWCAG 1.4.3, 3:1 चाहिएपास
सामान्य टेक्स्ट, AAAWCAG 1.4.6, 7:1 चाहिएफ़ेल
बड़ा टेक्स्ट, AAAWCAG 1.4.6, 4.5:1 चाहिएपास
आइकन, बॉर्डर और फ़ॉर्म फ़ील्डWCAG 1.4.11, 3:1 चाहिएपास

इस बैकग्राउंड पर पास होने वाले सबसे नज़दीकी टेक्स्ट रंग

बड़े टेक्स्ट का मतलब है कम से कम 24 पिक्सेल, या बोल्ड में 18.66 पिक्सेल। अनुपात नीचे की ओर राउंड किए जाते हैं, इसलिए 4.499:1 को 4.49:1 दिखाया जाता है और वह फ़ेल होता है, जैसा WCAG का इरादा है।

या कम कंट्रास्ट वाले टेक्स्ट के लिए कोई पेज स्कैन करें

मुफ़्त। आपके डाले गए पते को लगभग 20 सेकंड में जांचता है।

यह टूल क्या जांचता है

  • किन्हीं भी दो रंगों का WCAG अनुपात

    कैलकुलेटर WCAG 2.2 की परिभाषाओं में दिए गए relative luminance (सापेक्ष चमक) के फ़ॉर्मूले का इस्तेमाल करता है और सामान्य टेक्स्ट, बड़े टेक्स्ट और इंटरफ़ेस के हिस्सों के लिए AA और AAA पर नतीजा दिखाता है। यह आपके ब्राउज़र में चलता है।

  • पास होने वाला रंग, गणना करके

    जब कोई रंग-जोड़ा फ़ेल होता है, तो यह उसी रंगत (hue) का सबसे नज़दीकी टेक्स्ट रंग ढूँढता है जो 4.5:1 या 7:1 तक पहुँचे, ताकि आपको अपने डिज़ाइन में कम से कम बदलाव करना पड़े।

  • किसी पेज पर कम कंट्रास्ट वाला हर टेक्स्ट

    पेज स्कैन एक असली Chrome ब्राउज़र में axe-core का color-contrast नियम चलाता है और फ़ेल होने वाले हर एलिमेंट को उसके टेक्स्ट रंग, बैकग्राउंड रंग, फ़ॉन्ट साइज़ और अनुपात के साथ दिखाता है।

  • रंग-जोड़ों के हिसाब से समूह

    फ़ेल्योर टेक्स्ट और बैकग्राउंड रंग के हिसाब से समूहों में दिखाए जाते हैं, क्योंकि थीम के किसी रंग में एक बदलाव आमतौर पर उसे इस्तेमाल करने वाले हर एलिमेंट को ठीक कर देता है।

  • बड़े टेक्स्ट के लिए सही सीमा

    कम से कम 24 पिक्सेल, या बोल्ड में 18.66 पिक्सेल के टेक्स्ट को 4.5:1 की जगह 3:1 चाहिए। स्कैन हर एलिमेंट पर उसके कंप्यूटेड साइज़ और फ़ॉन्ट वेट के आधार पर सही सीमा लागू करता है।

  • जो यह माप नहीं सका, और क्यों

    इमेज, ग्रेडिएंट या एक-दूसरे पर चढ़े एलिमेंट के ऊपर के टेक्स्ट को वजह के साथ अलग से दिखाया जाता है, ताकि आपको ठीक-ठीक पता रहे कि आँख से क्या जाँचना है।

यह क्या नहीं जांच सकता

  • फ़ोटो, ग्रेडिएंट या वीडियो के ऊपर के टेक्स्ट को नहीं माप सकता। सॉफ़्टवेयर यह नहीं जान सकता कि हर अक्षर के पीछे इमेज का कौन-सा हिस्सा है, इसलिए ऐसा टेक्स्ट आपके जाँचने के लिए सूची में दिखाया जाता है।
  • hover, focus या दूसरी स्टेट की जाँच नहीं कर सकता। स्कैन पेज को वैसा ही देखता है जैसा वह लोड होता है; उन रंगों को कैलकुलेटर से जाँचें।
  • पेज पर आइकन, बॉर्डर और फ़ॉर्म फ़ील्ड को WCAG 1.4.11 के लिए स्कैन नहीं कर सकता। आप जो भी रंग-जोड़ा डालें, कैलकुलेटर उसके लिए 3:1 का नतीजा दिखाता है।
  • इमेज का हिस्सा बने टेक्स्ट को नहीं पढ़ सकता, जैसे ऐसा बैनर जिसमें शब्द इमेज में ही बने हों।
  • आपके डाले गए पेज के अलावा दूसरे पेज टेस्ट नहीं कर सकता। पूरा मुफ़्त स्कैन अधिकतम पाँच मुख्य पेज टेस्ट करता है।

यह क्यों ज़रूरी है

कम कंट्रास्ट वेब पर एक्सेसिबिलिटी की सबसे आम कमी है। WebAIM के 2026 के विश्लेषण में टॉप 10 लाख होम पेजों में से 83.9% पर कम कंट्रास्ट वाला टेक्स्ट मिला, औसतन प्रति पेज 34 मामले।

फीका टेक्स्ट कम दृष्टि वाले या रंग पहचानने में कठिनाई (color vision deficiency) वाले लोगों के लिए, और तेज़ धूप में फ़ोन इस्तेमाल करने वाले किसी भी व्यक्ति के लिए पढ़ना मुश्किल होता है। WCAG 2.2 का सफलता मानदंड 1.4.3, लेवल AA पर, सामान्य टेक्स्ट के लिए न्यूनतम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 तय करता है।

यह ठीक करने में सबसे सस्ती समस्याओं में से भी एक है: ज़्यादातर साइटों पर थीम के कुछ गिने-चुने रंग लगभग हर फ़ेल्योर की वजह होते हैं, और उन्हें बदलने से हर पेज एक साथ ठीक हो जाता है।

नतीजों को कैसे समझें

कंट्रास्ट अनुपात
1:1 (एक ही रंग दो बार) से 21:1 (सफ़ेद पर काला) तक। अनुपात नीचे की ओर राउंड किए जाते हैं, इसलिए जो रंग-जोड़ा 4.49:1 दिखाता है, वह 4.5:1 की न्यूनतम सीमा में फ़ेल होता है।
सामान्य टेक्स्ट, AA (4.5:1)
WCAG 1.4.3 के तहत बॉडी टेक्स्ट, लिंक, लेबल और बटन टेक्स्ट के लिए न्यूनतम सीमा।
बड़ा टेक्स्ट, AA (3:1)
कम से कम 24 पिक्सेल, या बोल्ड में 18.66 पिक्सेल के टेक्स्ट के लिए। WCAG बड़े टेक्स्ट को 18 पॉइंट, या बोल्ड में 14 पॉइंट के रूप में परिभाषित करता है।
AAA (7:1 और 4.5:1)
WCAG 1.4.6 का बढ़ा हुआ (enhanced) स्तर। AA के अनुरूप होने के लिए यह ज़रूरी नहीं है, लेकिन इससे ज़्यादा पाठकों को मदद मिलती है।
आइकन, बॉर्डर और फ़ॉर्म फ़ील्ड (3:1)
WCAG 1.4.11 कंट्रोल और ग्राफ़िक्स के उन हिस्सों के लिए आसपास के रंगों के मुकाबले 3:1 मांगता है, जिन्हें इस्तेमाल करने के लिए लोगों को देख पाना ज़रूरी होता है।
फ़ेल होने वाला टेक्स्ट
हर वह एलिमेंट जिसे स्कैन ने उसकी सीमा से कम मापा, उसके selector, रंगों, साइज़ और अनुपात के साथ। उसका मार्कअप और, जहाँ उपलब्ध हो, स्क्रीनशॉट देखने के लिए किसी एक को खोलें।
आँख से जाँचने लायक
वह टेक्स्ट जिसे axe-core माप नहीं सका, वजह के साथ, जैसे उसके पीछे कोई इमेज या ग्रेडिएंट होना।

सबसे आम समस्याओं को कैसे ठीक करें

  • सफ़ेद पर ग्रे टेक्स्ट

    #767676 लगभग सबसे हल्का ग्रे है जो सफ़ेद पर 4.5:1 तक पहुँचता है (4.54:1)। #999999 (2.84:1) जैसे हल्के ग्रे फ़ुटर, कैप्शन, प्लेसहोल्डर और कीमतों में फ़ेल्योर की आम वजह होते हैं।

  • ब्रांड रंग वाले बटन पर सफ़ेद टेक्स्ट

    अगर आपके ब्रांड रंग पर सफ़ेद टेक्स्ट फ़ेल होता है, तो बटन के बैकग्राउंड को कुछ शेड गहरा करें या गहरे रंग का टेक्स्ट इस्तेमाल करें। hover और focus के रंग भी जाँचें, क्योंकि वे अक्सर ज़्यादा हल्के होते हैं।

  • फ़ॉर्म में प्लेसहोल्डर टेक्स्ट

    प्लेसहोल्डर टेक्स्ट भी टेक्स्ट ही है और उसे 4.5:1 चाहिए। इससे भी बेहतर है कि फ़ील्ड के ऊपर एक दिखने वाला लेबल इस्तेमाल करें, ताकि प्लेसहोल्डर ही इकलौता निर्देश न रहे।

  • इमेज और स्लाइडर के ऊपर टेक्स्ट

    टेक्स्ट को ठोस या अर्ध-पारदर्शी बैकड्रॉप पर रखें, या इमेज पर गहरा ओवरले जोड़ें, फिर इमेज के उस सबसे हल्के हिस्से को जाँचें जो टेक्स्ट के पीछे आता है।

  • सेल बैज और छोटे अक्षरों वाली जानकारी

    disabled कंट्रोल के टेक्स्ट को 1.4.3 से छूट है, लेकिन सेल बैज, कीमतों और छोटे अक्षरों में लिखी क़ानूनी जानकारी को नहीं। किसी स्टोर के पेजों पर अक्सर यही सबसे फीका टेक्स्ट होता है।

कम कलर कंट्रास्ट: यह क्यों ज़रूरी है और Shopify, WooCommerce या किसी भी साइट पर इसे कैसे ठीक करें

इस टूल के बारे में सवाल

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

लेवल AA के लिए सामान्य टेक्स्ट पर 4.5:1 और बड़े टेक्स्ट पर 3:1 (सफलता मानदंड 1.4.3), और इंटरफ़ेस कंपोनेंट व अर्थपूर्ण ग्राफ़िक्स के लिए 3:1 (1.4.11)। लेवल AAA 7:1 और 4.5:1 मांगता है (1.4.6)।

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

WCAG बड़े आकार (large-scale) के टेक्स्ट को कम से कम 18 पॉइंट, या बोल्ड में 14 पॉइंट के रूप में परिभाषित करता है। CSS पिक्सेल में यह लगभग 24px, या बोल्ड में 18.66px होता है।

क्या लोगो को न्यूनतम कंट्रास्ट पूरा करना होता है?

नहीं। WCAG 1.4.3 लोगो और किसी लोगो या ब्रांड नाम का हिस्सा बने टेक्स्ट को छूट देता है, और साथ ही पूरी तरह सजावटी टेक्स्ट और निष्क्रिय (inactive) कंट्रोल के टेक्स्ट को भी।

स्कैन इमेज के ऊपर के टेक्स्ट को समीक्षा के लिए क्यों दिखाता है?

axe-core सपाट रंग मापता है। जब टेक्स्ट के पीछे कोई इमेज, ग्रेडिएंट या दूसरा एलिमेंट होता है, तो वह नहीं बता सकता कि कौन-से रंग आपस में मिलते हैं, इसलिए अंदाज़ा लगाने के बजाय वह एलिमेंट को किसी व्यक्ति के जाँचने के लिए रिपोर्ट करता है।

क्या मुझे AAA कंट्रास्ट चाहिए?

लेवल AA के अनुरूप होने के लिए AAA ज़रूरी नहीं है, और W3C पूरी साइटों के लिए AAA की शर्त रखने की सलाह नहीं देता। फिर भी जहाँ आपका डिज़ाइन इजाज़त दे, वहाँ बॉडी टेक्स्ट के लिए 7:1 तक पहुँचना अच्छी प्रैक्टिस है।

क्या APCA, WCAG का हिस्सा है?

नहीं। APCA कंट्रास्ट मापने का एक अलग तरीक़ा है जिस पर WCAG 3 के लिए चर्चा हुई है, और WCAG 3 अभी ड्राफ़्ट है। आज अनुरूपता WCAG 2 के उसी अनुपात से मापी जाती है जिसकी गणना यह टूल करता है।

स्रोत

संबंधित टूल

एक्सेसिबिलिटी सुधार रिपोर्ट ($174, एक बार का भुगतान) पूरे मुफ़्त स्कैन से शुरू होती है और उसमें और पेज, हर नतीजे के लिए करने वाला बदलाव, एक PDF और आपके सुधारों की पुष्टि के लिए री-टेस्ट जोड़ती है।

एक्सेसिबिलिटी सुधार रिपोर्ट के बारे में