ऑनलाइन मुफ़्त में एक्सेसिबिलिटी के लिए टेक्स्ट कंट्रास्ट कैसे जाँचें (2026 गाइड)

सुंदर रंग जोड़ी, अपठनीय टेक्स्ट। यह वेब पर सबसे आम डिज़ाइन विफलताओं में से एक है — सफ़ेद पृष्ठभूमि पर हल्का ग्रे टेक्स्ट, सफ़ेद अक्षरों वाला ट्रेंडी पेस्टल बटन — और यह वास्तविक लोगों को बाहर कर देता है: कम दृष्टि वाले उपयोगकर्ता, रंग-अंधता वाले लोग, या तेज़ धूप में फ़ोन स्क्रीन वाले कोई भी व्यक्ति। इसका समाधान मापने योग्य है, स्वाद का मामला नहीं। यह गाइड WCAG कंट्रास्ट नियम समझाती है, आपको दिखाती है कि हमारे मुफ़्त कंट्रास्ट चेकर से किसी भी रंग जोड़ी को कैसे परखें, और विफल होने वाले संयोजनों को ठीक करने के ठोस तरीके देती है।

मुफ़्त कंट्रास्ट चेकर क्या करता है

कंट्रास्ट चेकर दो रंग लेता है — आपका टेक्स्ट रंग और आपकी पृष्ठभूमि रंग — और उनके कंट्रास्ट अनुपात की गणना करता है, फिर बताता है कि क्या वह जोड़ी WCAG एक्सेसिबिलिटी मानकों को पास करती है। यह पूरी तरह आपके ब्राउज़र में चलता है: बिना साइन-अप, बिना इंस्टॉल, तुरंत परिणाम।

WCAG कंट्रास्ट नियम (वास्तविक संख्याएँ)

वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस (WCAG) कंट्रास्ट आवश्यकताओं को अनुपात के रूप में परिभाषित करती हैं, जहाँ 1:1 का अर्थ है कोई कंट्रास्ट नहीं (समान रंग) और 21:1 अधिकतम है (सफ़ेद पर काला)। जो सीमाएँ मायने रखती हैं:

• 4.5:1 — सामान्य टेक्स्ट (WCAG AA)। बॉडी कॉपी, पैराग्राफ़, सूची आइटम और UI लेबल को अपनी पृष्ठभूमि के विरुद्ध कम से कम 4.5:1 तक पहुँचना चाहिए। यह सुलभ टेक्स्ट की आधार रेखा है।
• 3:1 — बड़ा टेक्स्ट (WCAG AA)। कम से कम 18pt (24px), या 14pt (18.66px) बोल्ड टेक्स्ट को केवल 3:1 चाहिए — बड़े अक्षर स्वाभाविक रूप से पढ़ने में आसान होते हैं।
• 7:1 — सामान्य टेक्स्ट (WCAG AAA)। सख्त उन्नत स्तर। महत्वपूर्ण सामग्री के लिए जब संभव हो, इसका लक्ष्य रखें।
• 3:1 — UI घटक। आइकन, फ़ॉर्म बॉर्डर और फ़ोकस संकेतकों को आसन्न रंगों के विरुद्ध कम से कम 3:1 चाहिए ताकि उपयोगकर्ता इंटरैक्टिव तत्वों को समझ सकें।

ध्यान दें कि ये नियम क्या कवर नहीं करते: वे चमक कंट्रास्ट (हल्का बनाम गहरा) मापते हैं, रंग अंतर नहीं। हरे पृष्ठभूमि पर लाल टेक्स्ट संख्याओं से उच्च-कंट्रास्ट हो सकता है फिर भी लाल-हरे रंग-अंधता वाले उपयोगकर्ताओं के लिए अपठनीय हो सकता है — इसलिए अर्थ बताने के लिए कभी केवल रंग पर निर्भर न रहें।

चरण-दर-चरण: अपनी रंग जोड़ी परखें

1. कंट्रास्ट चेकर खोलें। बिना साइन-अप, किसी भी आधुनिक ब्राउज़र में चलता है।
2. अपना टेक्स्ट (अग्रभूमि) रंग डालें। अपने डिज़ाइन से वास्तविक टेक्स्ट रंग का HEX या RGB कोड उपयोग करें।
3. अपनी पृष्ठभूमि रंग डालें। वह वास्तविक पृष्ठभूमि उपयोग करें जिस पर टेक्स्ट बैठता है — तीन परत नीचे वाली पेज पृष्ठभूमि नहीं, टेक्स्ट के ठीक पीछे वाली।
4. अनुपात और फ़ैसला पढ़ें। टूल गणना किया कंट्रास्ट अनुपात दिखाता है और क्या वह जोड़ी सामान्य टेक्स्ट के लिए AA, बड़े टेक्स्ट के लिए AA और AAA पास करती है।
5. हर वास्तविक संयोजन परखें। पेज पृष्ठभूमि पर बॉडी टेक्स्ट, बटन रंग पर बटन टेक्स्ट, पृष्ठभूमि पर लिंक रंग, इनपुट में प्लेसहोल्डर टेक्स्ट — हर जोड़ी की अलग जाँच चाहिए।
6. विफलताएँ ठीक करें (नीचे देखें) और जोड़ी पास होने तक दोबारा परखें।

विफल होने वाला संयोजन कैसे ठीक करें

विफल जोड़ी का अर्थ अपना पैलेट छोड़ना नहीं है। छोटे, लक्षित समायोजन आमतौर पर इसे ठीक कर देते हैं:

• टेक्स्ट गहरा करें या पृष्ठभूमि हल्की करें। सबसे विश्वसनीय समाधान। एक कदम गहरा/हल्का होने से अक्सर डिज़ाइन का चरित्र बदले बिना 4.5:1 रेखा पार हो जाती है। समायोजित शेड खोजने के लिए कलर पिकर का उपयोग करें।
• फ़ॉन्ट वज़न या आकार बढ़ाएँ। बोल्ड टेक्स्ट या बड़े हेडिंग आसान 3:1 बड़े-टेक्स्ट सीमा के लिए योग्य होते हैं। यह कोई चाल नहीं, वैध रणनीति है — बड़ा, बोल्ड टेक्स्ट वास्तव में अधिक पठनीय होता है।
• एक बैकिंग आकार जोड़ें। तस्वीर पर सफ़ेद टेक्स्ट विफल हो रहा है? पहले उसे अर्ध-पारदर्शी गहरे ओवरले पर रखें, फिर टेक्स्ट को ओवरले रंग के विरुद्ध जाँचें।
• बदलें कि कौन सा रंग टेक्स्ट है। कभी-कभी जोड़ी उल्टी काम करती है — उस पर हल्का टेक्स्ट के बजाय हल्के ब्रांड रंग पर गहरा टेक्स्ट।
• कम-कंट्रास्ट जोड़ियों को केवल सजावट के लिए रखें। बड़े सजावटी हेडिंग, निष्क्रिय स्थितियाँ और वॉटरमार्क नरम संयोजन उपयोग कर सकते हैं — जब तक उन पर कोई आवश्यक जानकारी पढ़ना निर्भर न हो।

आम संदिग्ध: संयोजन जो लगभग हमेशा विफल होते हैं

• सफ़ेद पर हल्का ग्रे टेक्स्ट (#999 और हल्का) — क्लासिक अपराधी, विशेष रूप से द्वितीयक टेक्स्ट और प्लेसहोल्डर में।
• पेस्टल पर सफ़ेद टेक्स्ट — सफ़ेद लेबल वाले हल्के गुलाबी, आसमानी नीले या पुदीने के बटन नियमित रूप से 4.5:1 से नीचे गिरते हैं।
• ब्रांड पृष्ठभूमि पर ब्रांड रंग का टेक्स्ट — साथ-साथ बैठने के लिए डिज़ाइन किए गए दो ब्रांड रंगों में अक्सर टेक्स्ट को चाहिए चमक अंतर नहीं होता।
• छवियों पर टेक्स्ट — तस्वीर की चमक उसके क्षेत्र में भिन्न होती है, इसलिए गहरे भाग पर ठीक टेक्स्ट चमकीले भाग पर विफल हो जाता है। ओवरले या टेक्स्ट शैडो मानक समाधान हैं।
• फ़ॉर्म फ़ील्ड में प्लेसहोल्डर टेक्स्ट — ब्राउज़र डिफ़ॉल्ट रूप से प्लेसहोल्डर को फीके ग्रे में दिखाते हैं; उन्हें जानबूझकर पास होने वाले रंग में स्टाइल करें।

कंट्रास्ट आवश्यक है लेकिन पर्याप्त नहीं

अनुपात जाँच पास करना न्यूनतम है, अधिकतम नहीं। वास्तविक एक्सेसिबिलिटी का अर्थ यह भी है: पर्याप्त फ़ॉन्ट आकार, पंक्तियों को एक साथ न ठूँसने वाली लाइन स्पेसिंग, कभी केवल रंग से जानकारी न बताना (उस लाल/हरे स्थिति को आइकन या लेबल के साथ जोड़ें), कीबोर्ड उपयोगकर्ताओं के लिए दृश्य फ़ोकस संकेतक, और रंग-निर्भर अर्थ पकड़ने के लिए अपने डिज़ाइन को ग्रेस्केल में परखना। कंट्रास्ट चेकर मापने योग्य भाग को सेकंडों में संभालता है; बाकी डिज़ाइन अनुशासन है।

अपने वर्कफ़्लो में कंट्रास्ट जाँच शामिल करें

1. कलर पिकर से ब्रांड रंग चुनें या रैंडम कलर पैलेट टूल से विचार बनाएँ।
2. किसी भी टेक्स्ट/पृष्ठभूमि जोड़ी को अंतिम करने से पहले उसे कंट्रास्ट चेकर से गुज़ारें।
3. अगर कोई जोड़ी विफल हो, तो पिकर से समायोजित करें और दोबारा जाँचें — प्रति जोड़ी दो मिनट।
4. आवश्यकतानुसार हेक्स टू आरजीबी कन्वर्टर से प्रारूप बदलें (जैसे RGBA ओवरले बनाने के लिए)।
5. किसी भी रीडिज़ाइन के बाद दोबारा जाँचें — एक "छोटा" रंग बदलाव चुपचाप पास होने वाले अनुपात को तोड़ सकता है।

अक्सर पूछे जाने वाले प्रश्न

क्या कंट्रास्ट चेकर मुफ़्त है?

हाँ — असीमित WCAG कंट्रास्ट जाँच, बिना साइन-अप।

मेरे बॉडी टेक्स्ट को किस कंट्रास्ट अनुपात की आवश्यकता है?

अपनी पृष्ठभूमि के विरुद्ध WCAG AA के लिए कम से कम 4.5:1, जो व्यापक रूप से अपनाई गई आधार रेखा है। 7:1 सख्त AAA स्तर को पूरा करता है।

क्या हेडिंग की आवश्यकताएँ अलग हैं?

बड़ा टेक्स्ट — 18pt/24px और ऊपर, या 14pt/18.66px बोल्ड और ऊपर — AA स्तर पर केवल 3:1 चाहिए।

मेरी जोड़ी चेकर पास करती है लेकिन फिर भी पढ़ने में कठिन लगती है — क्यों?

अनुपात केवल चमक कंट्रास्ट मापता है। पतले फ़ॉन्ट, छोटे आकार, व्यस्त पृष्ठभूमि और रंग-दृष्टि अंतर संख्या से परे वास्तविक पठनीयता को प्रभावित करते हैं। 4.5:1 को लक्ष्य नहीं, न्यूनतम मानें।

क्या चेकर रंग-अंधता का हिसाब रखता है?

यह चमक कंट्रास्ट मापता है, जो रंग-अंधता से स्वतंत्र है — एक उपयोगी गुण। लेकिन अर्थ बताने के लिए कभी केवल रंग का उपयोग न करें; उसे टेक्स्ट, आइकन या पैटर्न के साथ जोड़ें।

अभी अपने रंग जाँचें: मुफ़्त कंट्रास्ट चेकर · मुफ़्त कलर पिकर · मुफ़्त हेक्स टू आरजीबी कन्वर्टर