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

कलर कंट्रास्ट और पठनीयता की पूरी गाइड

कंट्रास्ट वेब पर सबसे प्रभावशाली एक्सेसिबिलिटी सुधार है — और सबसे ज़्यादा विफल होने वाला भी। सफ़ेद बैकग्राउंड पर हल्का-ग्रे टेक्स्ट डिज़ाइनरों को 'साफ़' लगता है और 40 से ऊपर के हर व्यक्ति, तेज़ धूप में किसी भी व्यक्ति, और कम दृष्टि वाले लगभग 5% लोगों के लिए अपठनीय होता है। यह गाइड मानक, गणित, और डिज़ाइन बिगाड़े बिना विफलताएँ ठीक करना समझाती है।

WCAG मानक सरल भाषा में

WCAG 2.x कंट्रास्ट के लिए दो अनुपालन स्तर परिभाषित करता है। स्तर AA (जिसका कानून हवाला देते हैं — EU एक्सेसिबिलिटी एक्ट और अमेरिका में ADA केस लॉ सहित) सामान्य टेक्स्ट के लिए 4.5:1 अनुपात और बड़े टेक्स्ट के लिए 3:1 माँगता है। स्तर AAA (स्वर्ण मानक) क्रमशः 7:1 और 4.5:1 माँगता है। लोगो और पूरी तरह सजावटी टेक्स्ट छूट प्राप्त हैं — लेकिन अगर वह जानकारी देता है, तो उसे पास करना ही होगा। नोट: WCAG 3.0 (मसौदे में) अंततः अनुपातों की जगह नया APCA मॉडल लाएगा, लेकिन अनुपात आज भी लागू होने वाला मानक हैं।

कंट्रास्ट इतनी बार क्यों विफल होता है

तीन अपराधी: फ़ैशन (पोर्टफ़ोलियो में अल्ट्रा-लाइट ग्रे का चलन),ब्रांड रंग टेक्स्ट के लिए पूरी ताक़त से इस्तेमाल किए जाते हैं (बटन के रूप में चमकने वाला जीवंत ब्रांड नारंगी 12px टेक्स्ट के रूप में फ़ेल हो जाता है), औरतस्वीरों पर टेक्स्ट जहाँ बैकग्राउंड बदलता रहता है — फ़ोटो का चमकीला हिस्सा चुपचाप पठनीयता नष्ट कर सकता है। तस्वीरों का उपाय: टेक्स्ट के पीछे अर्ध-पारदर्शी गहरा ओवरले या ठोस स्क्रिम, फिर सबसे ख़राब क्षेत्र को फिर से टेस्ट करें।

अनुपात से आगे: वास्तविक दुनिया की पठनीयता

अनुपात ज़रूरी है लेकिन पर्याप्त नहीं। पतले फ़ॉन्ट वेट (100–300) को फ़ॉर्मूले की धारणा से ज़्यादा कंट्रास्ट चाहिए — बॉडी टेक्स्ट के लिए 400+ पसंद करें। बहुत छोटा टेक्स्ट (12px से कम) पास होने वाले अनुपातों पर भी तनाव देता है। चमकदार स्क्रीन, धूप और सस्ते मॉनिटर सभी असरदार ढंग से कंट्रास्ट घटाते हैं, इसलिए 4.5:1 को न्यूनतम समझें, लक्ष्य नहीं — 7:1 बॉडी टेक्स्ट न सिर्फ़ कमज़ोरी वाले लोगों के लिए, बल्कि सभी के लिए काफ़ी आरामदायक होता है।

विफलताएँ शालीनता से ठीक करना

नए सिरे से डिज़ाइन न करें। हल्का बदलाव करें: टेक्स्ट को 10–20% हल्कापन गहरा करें या बैकग्राउंड टिंट में ओपैसिटी जोड़ें — ब्रांड पर बने रहते हुए सीमा पार करने के लिए आमतौर पर काफ़ी होता है। लिंक के लिए याद रखें कि सिर्फ़ रंग उन्हें अलग नहीं कर सकता (अंडरलाइन भी इस्तेमाल करें)। डिसेबल्ड बटन और प्लेसहोल्डर के लिए कम कंट्रास्ट अपेक्षित है — लेकिन पक्का करें कि कारण किसी और तरह से बताया जाए। ग्रेस्केल में अपना अंतिम पैलेट टेस्ट करें: अगर पदानुक्रम अब भी पढ़ा जाता है, तो आपका कंट्रास्ट अपना काम कर रहा है।

इससे किसे मदद मिलती है (संकेत: सभी को)

एक्सेसिबिलिटी सुधार नाममात्र लाभार्थियों से कहीं आगे मदद करते हैं: कैप्शन शोर भरे कैफ़े में मदद करते हैं, हाई कंट्रास्ट धूप में मदद करता है, साफ़ फ़ोकस अवस्थाएँ पावर कीबोर्ड उपयोगकर्ताओं की मदद करती हैं। दुनिया की लगभग 15% आबादी किसी न किसी विकलांगता के साथ रहती है — कंट्रास्ट के लिए डिज़ाइन करना अपने दर्शकों के छठे हिस्से के लिए, साथ ही ख़राब स्क्रीन वाले दिन वाले सभी के लिए डिज़ाइन करना है।