रंग कंट्रास्ट जांचक (WCAG)
टेक्स्ट, बड़े टेक्स्ट और UI घटकों के लिए WCAG 2.1 AA/AAA रंग कंट्रास्ट अनुपात जांचें। लाइव प्रीव्यू, APCA संदर्भ, सुलभ जोड़ी खोजक और पसंदीदा।
अपडेट किया गया
Color Contrast Checker (WCAG)
Check color contrast ratios against WCAG 2.1 AA/AAA guidelines. Pick foreground and background colors, preview live text samples, and find accessible pairs.
ForegroundText
BackgroundSurface
Contrast ratio
14.68:1
APCA Lc 101.5 (reference)
AA Normal text
Requires 4.5:1
AA Large text
Requires 3:1
AAA Normal text
Requires 7:1
AAA Large text
Requires 4.5:1
AA UI Components
Requires 3:1
अक्सर पूछे जाने वाले प्रश्न
मुझे किस अनुपात की ज़रूरत है?
WCAG 2.1 AA के लिए सामान्य टेक्स्ट हेतु 4.5:1 और बड़े टेक्स्ट (18pt या 14pt bold) हेतु 3:1 आवश्यक है। AAA के लिए 7:1 और 4.5:1 आवश्यक है। UI घटकों के लिए >= 3:1 चाहिए।
अनुपात की गणना कैसे की जाती है?
sRGB को गामा-सुधार करके लीनियर में बदला जाता है, फिर सापेक्ष ल्यूमिनेंस = 0.2126R + 0.7152G + 0.0722B। अनुपात = (L1 + 0.05) / (L2 + 0.05), जहाँ L1 अधिक हल्का रंग है।
APCA क्या है?
Accessible Perceptual Contrast Algorithm (WCAG 3 के लिए) — यह टेक्स्ट की मोटाई, ध्रुवता और स्थानिक आवृत्ति को ध्यान में रखता है। इसे संदर्भ के रूप में दिखाया जाता है; WCAG 2 के अनुपात आज भी मानक नियामक हैं।
क्या Color Contrast Checker (WCAG) उपयोग करने के लिए मुफ़्त है?
हाँ, Color Contrast Checker (WCAG) 100% मुफ़्त है — बिना पंजीकरण, बिना छिपे शुल्क और बिना उपयोग सीमा के। पूरी प्रोसेसिंग आपके ब्राउज़र में स्थानीय रूप से होती है, जिससे पूर्ण गोपनीयता सुनिश्चित होती है।
क्या इस टूल के साथ मेरा डेटा सुरक्षित है?
बिल्कुल। Color Contrast Checker (WCAG) सब कुछ आपके ब्राउज़र में क्लाइंट-साइड पर प्रोसेस करता है। कोई भी डेटा किसी सर्वर पर अपलोड या स्टोर नहीं किया जाता। आपकी सामग्री हर समय आपके डिवाइस पर निजी रहती है।
क्या Color Contrast Checker (WCAG) मोबाइल डिवाइस पर काम करता है?
हाँ, Color Contrast Checker (WCAG) पूरी तरह रिस्पॉन्सिव है और स्मार्टफ़ोन व टैबलेट पर काम करता है। आप इसे आधुनिक वेब ब्राउज़र वाले किसी भी डिवाइस पर इस्तेमाल कर सकते हैं — किसी ऐप को डाउनलोड करने की ज़रूरत नहीं।
क्या इस टूल का उपयोग करने के लिए मुझे खाता बनाना होगा?
किसी खाते या पंजीकरण की ज़रूरत नहीं है। बस अपने ब्राउज़र में Color Contrast Checker (WCAG) खोलें और तुरंत इस्तेमाल शुरू करें। कोई साइन-अप रुकावट या उपयोग की सीमा नहीं है।
यह टूल किन प्रोग्रामिंग भाषाओं या फ़ॉर्मैट का समर्थन करता है?
Color Contrast Checker (WCAG) लोकप्रिय फ़ॉर्मैट और भाषाओं की एक विस्तृत श्रृंखला का समर्थन करता है। समर्थित विकल्पों की पूरी सूची के लिए टूल का इंटरफ़ेस देखें।
मैं Color Contrast Checker (WCAG) का उपयोग कैसे करूँ?
बस दिए गए फ़ील्ड में अपना इनपुट दर्ज करें, अपनी पसंद के अनुसार सेटिंग्स समायोजित करें, और टूल इसे तुरंत प्रोसेस कर देगा। फिर आप परिणाम को अपने क्लिपबोर्ड पर कॉपी कर सकते हैं या डाउनलोड कर सकते हैं।
कौन-से ब्राउज़र समर्थित हैं?
Color Contrast Checker (WCAG) सभी आधुनिक ब्राउज़रों में काम करता है, जिनमें Chrome, Firefox, Safari, Edge और Opera शामिल हैं। सर्वोत्तम अनुभव के लिए अपने पसंदीदा ब्राउज़र के नवीनतम संस्करण का उपयोग करें।
WCAG कॉन्ट्रास्ट नियमों के तहत लार्ज टेक्स्ट किसे माना जाता है?
WCAG 2.1 के तहत, लार्ज टेक्स्ट वह है जो 18pt और उससे ऊपर हो, या बोल्ड होने पर 14pt और उससे ऊपर हो। चूंकि डिज़ाइन टूल्स पिक्सल में काम करते हैं, इसका मतलब है लगभग 24px रेगुलर या करीब 18.66px (जिसे आमतौर पर 18.5px या 19px तक राउंड किया जाता है) बोल्ड। लार्ज टेक्स्ट को AA के लिए सिर्फ 3:1 और AAA के लिए 4.5:1 कॉन्ट्रास्ट रेशियो चाहिए होता है, जबकि नॉर्मल बॉडी टेक्स्ट को ज़्यादा सख्त 4.5:1 और 7:1 चाहिए होता है। तर्क सीधा है: बड़े, मोटे अक्षरों की स्ट्रोक मोटी होती है, इसलिए वे कम कॉन्ट्रास्ट पर भी पढ़ने लायक बने रहते हैं। यह फर्क इसलिए मायने रखता है क्योंकि जो हेडिंग कलर 24px पर पास हो जाता है, वह 16px बॉडी कॉपी में साफ फेल हो सकता है। यह चेकर एक साथ हर थ्रेशोल्ड के खिलाफ रेशियो दिखाता है, ताकि आप देख सकें कि आपकी जोड़ी नॉर्मल-टेक्स्ट बार पार करती है या सिर्फ लार्ज टेक्स्ट के तौर पर क्वालिफाई करती है।
एक ही रंग हेडिंग पर पास क्यों होता है लेकिन बॉडी टेक्स्ट पर फेल क्यों हो जाता है?
यह इस बात पर निर्भर करता है कि हर फॉन्ट साइज़ पर कौन सा WCAG थ्रेशोल्ड लागू होता है। 24px या उससे बड़े (या 18.66px बोल्ड) में रेंडर की गई हेडिंग को लार्ज टेक्स्ट माना जाता है और उसे सिर्फ 3:1 रेशियो चाहिए, जबकि उससे छोटा बॉडी कॉपी नॉर्मल टेक्स्ट है और उसे 4.5:1 तक पहुंचना ही होगा। तो एक फोरग्राउंड और बैकग्राउंड जो मान लीजिए 3.5:1 रेशियो देते हैं, वह हेडिंग के लिए Pass बैज कमाएगा लेकिन उन्हीं रंगों का इस्तेमाल करने वाले पैराग्राफ के लिए साफ Fail होगा। रेशियो खुद फॉन्ट साइज़ के साथ कभी नहीं बदलता, सिर्फ उसे पार करने वाला बार बदलता है। यही वजह है कि कोई कलर स्कीम आपके हीरो सेक्शन में स्वीकृत दिख सकती है, फिर भी कैप्शन और लेबल में चुपचाप फेल हो सकती है। यह टूल Preview टैब में 16px और 24px दोनों सैंपल रेंडर करता है और हर थ्रेशोल्ड लिस्ट करता है, ताकि आप तुरंत देख सकें कि जोड़ी कहां टिकती है और कहां टूटती है।
पूरे डिज़ाइन को बदले बिना कॉन्ट्रास्ट चेक में फेल हो रहे टेक्स्ट को कैसे ठीक करूं?
आमतौर पर आपको पूरे पैलेट को दोबारा बनाने के बजाय सिर्फ एक रंग की लाइटनेस को थोड़ा एडजस्ट करने की ज़रूरत होती है। सबसे तेज़ तरीका है टेक्स्ट को गहरा करना या बैकग्राउंड को हल्का करना (या इसका उल्टा), छोटे-छोटे स्टेप्स में, जब तक रेशियो 4.5:1 पार न कर जाए, और साथ ही मूल ह्यू को बरकरार रखते हुए ताकि ब्रांड का फील बना रहे। इस चेकर में डेडिकेटेड Darken और Lighten बटन हैं जो किसी रंग की लाइटनेस को उसका ह्यू बनाए रखते हुए धीरे-धीरे बदलते हैं, और रेशियो लाइव अपडेट होता है ताकि जैसे ही Pass दिखे आप रुक सकें। एक Swap बटन फोरग्राउंड और बैकग्राउंड को पलटकर उल्टी जोड़ी टेस्ट करता है, जो कभी-कभी तब पास हो जाती है जब मूल जोड़ी नहीं होती। अगर आप बिल्कुल नए सिरे से शुरू करना चाहें, तो Random accessible pair बटन एक ऐसा कॉम्बिनेशन जनरेट करता है जो पहले से ही 4.5:1 पार करता है, जिससे आपको आगे एडजस्ट करने के लिए एक कंप्लायंट बेसलाइन मिल जाती है।
क्या मैं HEX, RGB, और HSL में रंग एंटर कर सकता हूं, और क्या वे आपस में सिंक रहते हैं?
हां। आप 3 या 6 अंकों की HEX वैल्यू टाइप कर सकते हैं, 0 से 255 के बीच अलग-अलग RGB चैनल सेट कर सकते हैं, HSL ह्यू, सैचुरेशन, और लाइटनेस एडजस्ट कर सकते हैं, या नेटिव कलर पिकर इस्तेमाल कर सकते हैं, और ये चारों रिप्रेजेंटेशन अपने-आप साथ में अपडेट होते हैं। किसी भी एक इनपुट को बदलने पर बाकी दोबारा कैलकुलेट हो जाते हैं, इसलिए एक RGB चैनल में की गई मामूली सी तब्दीली तुरंत HEX और HSL फील्ड्स में और लाइव कॉन्ट्रास्ट रेशियो में दिख जाती है। यह इसलिए मायने रखता है क्योंकि डिज़ाइन स्पेक्स और कोड मिले-जुले फॉर्मैट में आते हैं: किसी ब्रांड गाइड में HEX लिखा हो सकता है, किसी CSS फाइल में rgb() इस्तेमाल हो सकता है, और किसी डिज़ाइन टूल में HSL स्लाइडर्स हो सकते हैं। इन्हें सिंक रखने का मतलब है कोई मैनुअल कन्वर्जन या कॉपी-पेस्ट गलती नहीं। जब कोई जोड़ी काम कर जाए, Copy as CSS vars बटन आपको एक तैयार-टू-पेस्ट :root ब्लॉक देता है जिसमें आपकी स्टाइलशीट के लिए फोरग्राउंड और बैकग्राउंड कस्टम प्रॉपर्टीज़ होती हैं।
क्या आइकॉन, बटन, और इनपुट बॉर्डर को भी टेक्स्ट जितना ही कॉन्ट्रास्ट रेशियो पूरा करना होता है?
नहीं, वे एक अलग, कम सख्त थ्रेशोल्ड फॉलो करते हैं। WCAG 2.1 का सक्सेस क्राइटेरिया 1.4.11, Non-text Contrast, यूज़र इंटरफेस कंपोनेंट्स और महत्वपूर्ण ग्राफिक्स के लिए सिर्फ 3:1 कॉन्ट्रास्ट की मांग करता है, जिसमें इनपुट बॉर्डर, आइकॉन, टॉगल स्टेट्स, और फोकस इंडिकेटर शामिल हैं, और यह उनके आस-पास के रंगों के मुकाबले मापा जाता है। यह वही बार है जो लार्ज टेक्स्ट के लिए है, नॉर्मल टेक्स्ट के लिए ज़रूरी 4.5:1 नहीं। सोच यह है कि किसी बटन की आउटलाइन या किसी आइकॉन को किसी पैराग्राफ जितना क्रिस्प होने की ज़रूरत नहीं, लेकिन फिर भी उसे पहचाने जाने लायक होना चाहिए। एक आम गलती है एक हल्के ग्रे रंग का इनपुट बॉर्डर जो सफेद फॉर्म पर गायब हो जाता है। यह चेकर टेक्स्ट लेवल्स के साथ-साथ UI components and graphics थ्रेशोल्ड भी लिस्ट करता है और Preview टैब में एक बटन व एक बॉर्डर वाला कार्ड रेंडर करता है, ताकि आप पुष्टि कर सकें कि इंटरैक्टिव एलिमेंट्स भी दिखते हैं, सिर्फ शब्द ही नहीं।
Embed This Tool
Add a free, live version of this widget to your own website or blog post — it runs entirely in your visitors' browsers, with a credit link back to The Toolbox.
<iframe src="https://getthetoolbox.com/embed/color-contrast" title="Color Contrast Checker (WCAG) — The Toolbox" width="100%" height="280" style="max-width:480px;border:1px solid #e2e8f0;border-radius:12px" loading="lazy"></iframe>
<p style="font-size:12px;margin:4px 0 0"><a href="https://getthetoolbox.com/developer-tools/color-contrast?utm_source=embed&utm_medium=widget" target="_blank" rel="noopener">Free Color Contrast Checker (WCAG)</a> by The Toolbox</p>संबंधित टूल
मुफ़्त API टेस्टर ऑनलाइन
GET, POST, PUT, DELETE अनुरोधों के साथ REST API का परीक्षण करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त cURL से कोड कन्वर्टर
cURL कमांड को JavaScript, Python, PHP कोड में बदलें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त JSON Schema जनरेटर
अपने JSON डेटा से स्वचालित रूप से JSON Schema बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त HTTP हेडर पार्सर
अनुरोधों और प्रतिक्रियाओं के HTTP हेडर पार्स और विश्लेषण करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
Color Contrast Checker के बारे में
Color Contrast Checker किसी टेक्स्ट (फोरग्राउंड) रंग और उसके बैकग्राउंड के बीच के कॉन्ट्रास्ट रेशियो को मापता है, और फिर आपको बताता है कि वह जोड़ी WCAG 2.1 एक्सेसिबिलिटी गाइडलाइंस को पूरा करती है या नहीं। एक फोरग्राउंड और एक बैकग्राउंड चुनें, और टूल तुरंत रेशियो और हर कॉन्फ़ॉर्मेंस लेवल के लिए पास/फेल नतीजा दिखाता है। यह डिज़ाइनर्स, फ्रंट-एंड डेवलपर्स, और एक्सेसिबिलिटी रिव्यूअर्स के लिए बनाया गया है, जिन्हें लॉन्च करने से पहले यह जानना होता है कि उनके रंग कम दृष्टि या कलर डेफिशिएंसी वाले लोगों के लिए पढ़ने लायक हैं या नहीं।
सब कुछ आपके ब्राउज़र में लोकली चलता है। कोई भी रंग सर्वर पर अपलोड नहीं होता, कोई साइन-अप नहीं है, और कोई यूसेज लिमिट नहीं है। यहां तक कि आपके सेव किए गए फेवरेट भी सर्वर पर नहीं बल्कि आपके ब्राउज़र के लोकल स्टोरेज में रखे जाते हैं।
कॉन्ट्रास्ट रेशियो कैसे मापा जाता है
कॉन्ट्रास्ट रेशियो 1:1 (एक जैसे रंग) से लेकर 21:1 (सफेद पर शुद्ध काला) तक की एक संख्या है। यह टूल WCAG 2.1 फॉर्मूला को बिल्कुल सही तरीके से फॉलो करता है: हर sRGB रंग को गामा-करेक्ट करके लीनियर लाइट में बदला जाता है, इसकी रिलेटिव ल्यूमिनेंस 0.2126·R + 0.7152·G + 0.0722·B के रूप में निकाली जाती है, और रेशियो (L1 + 0.05) / (L2 + 0.05) होता है, जहां L1 दोनों ल्यूमिनेंस में से हल्का वाला है। नतीजा लाइव अपडेट होता है और दो दशमलव अंकों तक दिखाया जाता है, जिससे 4.48:1 जैसी करीबी चूक भी आसानी से पकड़ में आ जाती है।
आप जिस भी फॉर्मैट में रंग रखते हों, उसी में एंटर कर सकते हैं। HEX वैल्यू (3 या 6 अंकों की) टाइप करें, 0–255 के बीच अलग-अलग RGB चैनल एडजस्ट करें, HSL ह्यू/सैचुरेशन/लाइटनेस बदलें, या नेटिव कलर पिकर इस्तेमाल करें। ये चारों हमेशा सिंक में रहते हैं।
आपको कौन से WCAG लेवल पूरे करने चाहिए
यह चेकर आपकी जोड़ी को उन पांच थ्रेशोल्ड के खिलाफ टेस्ट करता है, जो गाइडलाइंस में असल में परिभाषित किए गए हैं:
- AA नॉर्मल टेक्स्ट — कम से कम 4.5:1। यह बॉडी कॉपी के लिए बेसलाइन है और ज़्यादातर एक्सेसिबिलिटी ऑडिट व कानूनी आवश्यकताएं इसी लेवल का हवाला देती हैं।
- AA लार्ज टेक्स्ट — कम से कम 3:1। "लार्ज" का मतलब है 18pt (24px) या 14pt (लगभग 18.66px) बोल्ड और उससे ऊपर।
- AAA नॉर्मल टेक्स्ट — कम से कम 7:1, यह एनहांस्ड स्टैंडर्ड है।
- AAA लार्ज टेक्स्ट — कम से कम 4.5:1।
- UI कंपोनेंट्स और ग्राफिक्स — इनपुट बॉर्डर, आइकॉन, और फोकस इंडिकेटर जैसी चीज़ों के लिए कम से कम 3:1।
हर रो में एक साफ Pass या Fail बैज दिखता है, और एक हेडलाइन लेबल यह बताता है कि जोड़ी सबसे बेहतर कौन सा लेवल हासिल करती है (AAA, AA, AA Large, या Fail)। यह टूल एक रेफरेंस के तौर पर APCA Lc वैल्यू भी दिखाता है। APCA (एक्सेसिबल परसेप्चुअल कॉन्ट्रास्ट अल्गोरिद्म) वह कॉन्ट्रास्ट तरीका है जिसे आने वाले WCAG 3 के लिए विकसित किया जा रहा है, और यह टेक्स्ट के वेट व पोलैरिटी को उन तरीकों से ध्यान में रखता है जो रेशियो फॉर्मूला नहीं रखता — लेकिन आज के लिए कंप्लायंस का आधिकारिक मानक अब भी WCAG 2 रेशियो ही हैं।
फेल हो रही जोड़ी को जल्दी ठीक करना
जब कोई कॉम्बिनेशन कम पड़ जाए, तो शायद ही कभी आपको पूरा फिर से शुरू करने की ज़रूरत पड़े। Darken और Lighten बटन किसी रंग की लाइटनेस को छोटे-छोटे स्टेप्स में बदलते हैं, ताकि आप ह्यू को वैसा ही रखते हुए उसे थ्रेशोल्ड से थोड़ा आगे धकेल सकें। Swap फोरग्राउंड और बैकग्राउंड को पलटकर उल्टा टेस्ट करता है, और Random accessible pair एक नया कॉम्बिनेशन जनरेट करता है जो पहले से ही 4.5:1 पार करता है, जब आपको एक झटपट एक्सेसिबल शुरुआती बिंदु चाहिए हो।
एक लाइव Preview टैब आपके रंगों को असली सैंपल्स पर दिखाता है — 16px बॉडी टेक्स्ट, 24px लार्ज टेक्स्ट, 18px बोल्ड, छोटा 12px टेक्स्ट, एक बटन, और एक बॉर्डर वाला कार्ड — साथ ही एक इनवर्टेड वर्शन भी, ताकि आप सिर्फ नंबर पर भरोसा करने के बजाय अपनी आंखों से पठनीयता जांच सकें। जब कोई जोड़ी काम कर जाए, Copy as CSS vars आपके क्लिपबोर्ड पर एक तैयार :root { --fg; --bg; } ब्लॉक रख देता है, और Save favorite उस जोड़ी को (उसके रेशियो के साथ) एक लिस्ट में रखता है जिसे आप बाद में दोबारा लोड कर सकते हैं।
यह क्यों मायने रखता है
कम कॉन्ट्रास्ट वेब पर सबसे आम और सबसे आसानी से ठीक होने वाली एक्सेसिबिलिटी खामियों में से एक है। कम-कॉन्ट्रास्ट टेक्स्ट सबकी आंखों पर ज़ोर डालता है, लेकिन यह कम दृष्टि या कलर ब्लाइंडनेस वाले लोगों के लिए कंटेंट को सचमुच अपठनीय बना सकता है, और यह WCAG ऑडिट व प्रोक्योरमेंट चेकलिस्ट में अक्सर उठाया जाने वाला मुद्दा है। यहां एक जोड़ी जांचने में कुछ ही सेकंड लगते हैं; लॉन्च के बाद पूरे डिज़ाइन सिस्टम में इसे ठीक करने में कहीं ज़्यादा समय लगता है।