हाई कॉन्ट्रास्ट मोड क्या है?

जांचें कि आपकी वेब सामग्री विभिन्न हाई कंट्रास्ट सेटिंग्स में कैसी दिखती है। WCAG-अनुपालक कंट्रास्ट मोड का प्रिव्यू करने के लिए HTML या URL स्क्रीनशॉट पेस्ट करें — विंडोज हाई कंट्रास्ट, इनवर्टेड रंग और कस्टम थीम सहित।

तैयार थीम (Windows हाई कॉन्ट्रास्ट, इन्वर्टेड, ब्लैक पर येलो) चुनिए या अपना फ़ोरग्राउंड और बैकग्राउंड रंग खुद तय कीजिए। कॉन्ट्रास्ट रेशियो लाइव अपडेट होता है और बता देता है कि कौन-कौन से WCAG लेवल (AA, AAA, सामान्य टेक्स्ट, बड़ा टेक्स्ट) पास हो रहे हैं। प्रीव्यू में दिख रहा HTML इनलाइन स्टाइल के साथ एक्सपोर्ट किया जा सकता है।

उपयोग कैसे करें

1. चरण 1 — एडिटर में HTML या सादा पाठ पेस्ट करें।
2. चरण 2 — प्रीसेट से एक कंट्रास्ट मोड चुनें: विंडोज हाई कंट्रास्ट (काला/सफेद), इनवर्टेड, येलो ऑन ब्लैक, या कस्टम रंग।
3. चरण 3 — पठनीयता जांचने के लिए लाइव प्रिव्यू देखें। टेक्स्ट तत्वों के लिए WCAG AA/AAA अनुपालन सत्यापित करने हेतु कंट्रास्ट रेशियो चेकर का उपयोग करें।

कब उपयोग करें

• मार्केटिंग कैम्पेन शुरू करने से पहले लैंडिंग पेज का WCAG AA पर ऑडिट करना।
• Windows हाई कॉन्ट्रास्ट में फ़ोकस इंडिकेटर और बिना टेक्स्ट वाले आइकन बटन दिखते हैं या नहीं, यह जाँचना।
• ब्रांड बैकग्राउंड के ऊपर 4.5:1 कॉन्ट्रास्ट देने वाला बॉडी टेक्स्ट रंग ढूँढना।

परिणाम

एक डेवलपर अपना नेवीगेशन बार HTML पेस्ट करता है और विंडोज हाई कंट्रास्ट मोड पर स्विच करता है। वह देखता है कि आइकन-केवल बटन काले बैकग्राउंड पर अदृश्य हो जाते हैं, इसलिए वह टेक्स्ट लेबल जोड़ता है।

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

WCAG AA के लिए कितना कॉन्ट्रास्ट रेशियो चाहिए?

सामान्य बॉडी टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट (18pt रेगुलर या 14pt बोल्ड और ऊपर) के लिए 3:1। AAA इसे बढ़ाकर 7:1 और 4.5:1 कर देता है। चेकर हर कॉम्बिनेशन पर लिख देता है कि कौन-सा लेवल पास या फेल हुआ।

Windows हाई कॉन्ट्रास्ट में आइकन बटन क्यों ग़ायब हो जाते हैं?

Windows रंगों को सिस्टम टोकन से बदल देता है और बैकग्राउंड इमेज को नज़रअंदाज़ कर देता है। background-image या सिर्फ़ fill पर बने SVG आइकन अदृश्य हो जाते हैं। इनलाइन SVG में currentColor को stroke पर लगाएँ, या एक दिखने वाला टेक्स्ट लेबल जोड़ दें।

क्या ब्लैक पर येलो सच में एक एक्सेसिबिलिटी थीम है?

हाँ। यह शुरुआती Windows हाई कॉन्ट्रास्ट थीम्स में से एक है, और मैक्युलर डिजनरेशन जैसी स्थिति में भी पीला रंग साफ़ दिखता है, इसलिए कम दृष्टि वाले कई उपयोगकर्ता इसे आज भी पसंद करते हैं। कुछ लोग इसे शुद्ध सफेद-काले से ज़्यादा पठनीय मानते हैं।

क्या WCAG AA पास होते ही पेज एक्सेसिबल मान लिया जाता है?

कॉन्ट्रास्ट WCAG का एक हिस्सा भर है। पेज को कीबोर्ड नेविगेशन, सेमांटिक HTML, alt टेक्स्ट, फ़ॉर्म लेबल, फ़ोकस इंडिकेटर और reduced-motion का सम्मान भी चाहिए। यह टूल सिर्फ़ रंग वाली स्थिति बताता है।

हमारा ब्रांड ऑरेंज सफ़ेद बैकग्राउंड पर फ़ेल क्यों होता है?

ऑरेंज, पीला और लाइम जैसे संतृप्त मिडटोन रंगों की लुमिनेंस बहुत ज़्यादा होती है, इसलिए सफ़ेद पर अक्सर 3:1 से नीचे रह जाते हैं। बॉडी टेक्स्ट के लिए ऑरेंज को गहरा कीजिए, या उसे बैकग्राउंड और बड़े हेडलाइन के लिए सुरक्षित रखिए जहाँ 3:1 भी काफ़ी है।

संबंधित उपकरण