इस पृष्ठ का अनुवाद AI की सहायता से किया गया है। अंग्रेज़ी मूल ही प्रामाणिक है।
कंट्रास्ट (contrast) सुपाठ्यता की नींव है। कोई अक्षर-रूप सुंदर बना हो, उदार स्पेसिंग वाला हो, आरामदेह आकार में सेट हो — फिर भी विफल हो सकता है यदि वह अपनी पृष्ठभूमि से साफ़ अलग न दिखे। 2005 में हम इससे अधिक कुछ नहीं कह सकते थे कि "हल्की ज़मीन पर गहरा टेक्स्ट, और दोनों के बीच भरपूर अंतर।" आज कंट्रास्ट मापने योग्य, परीक्षण योग्य और कई क्षेत्राधिकारों में क़ानून में दर्ज है — और स्वयं यह माप गंभीर शोध का विषय बन गया है।
WCAG 2.x का कंट्रास्ट मॉडल
Web Content Accessibility Guidelines 2.x कंट्रास्ट को दो रंगों की सापेक्ष चमक (relative luminance) के अनुपात के रूप में परिभाषित करते हैं, जो 1:1 (एक जैसे) से 21:1 (शुद्ध सफ़ेद पर शुद्ध काला) तक जाता है। तीन सफलता-मानदंड इसे लागू करते हैं:
- 1.4.3 Contrast (Minimum), Level AA — बॉडी टेक्स्ट को 4.5:1 तक पहुँचना होगा; बड़ा टेक्स्ट (लगभग 24 पिक्सेल, या 19 पिक्सेल बोल्ड) 3:1 तक उतर सकता है।
- 1.4.6 Contrast (Enhanced), Level AAA — बॉडी टेक्स्ट के लिए 7:1, बड़े टेक्स्ट के लिए 4.5:1, जो मध्यम रूप से कम दृष्टि वाले पाठकों के लिए है।
- 1.4.11 Non-text Contrast, Level AA — इंटरफ़ेस घटकों और अर्थपूर्ण ग्राफ़िक्स के लिए 3:1: इनपुट बॉर्डर, फ़ोकस संकेतक, आइकन, चार्ट के तत्व।
गणित कहाँ कम पड़ता है
WCAG 2.x का सूत्र एक भौतिक माप है, प्रत्यक्षण-आधारित (perceptual) नहीं, और इसकी सीमाएँ अब स्वयं कार्य-समूह द्वारा भली-भाँति प्रलेखित हैं। यह अनुपात ध्रुवीयता (polarity) को सममित मानता है: काले पर सफ़ेद को वह सफ़ेद पर काले के बराबर अंक देता है, हालाँकि आँख दोनों को एक जैसा अनुभव नहीं करती। फ़ॉन्ट के वज़न और आकार को यह केवल एक स्थूल "बड़े टेक्स्ट" की दहलीज़ से सँभालता है, हालाँकि 16 पिक्सेल पर एक पतला हल्का टाइपफ़ेस और उसी अनुपात पर एक बोल्ड टाइपफ़ेस बहुत अलग पढ़े जाते हैं। और रेंज के गहरे सिरे के पास यह सूत्र ऐसे रंग-युग्म पास कर सकता है जिन्हें मानव पर्यवेक्षक कमज़ोर आँकते हैं, जबकि ऐसे युग्म फ़ेल कर सकता है जो स्वीकार्य रूप से पढ़े जाते हैं।
APCA की शोध-दिशा
WCAG 3.0 की दिशा में चल रहे मसौदा-कार्य में एक उम्मीदवार प्रतिस्थापन शामिल है — Accessible Perceptual Contrast Algorithm (APCA), जो W3C के दृश्य-कंट्रास्ट शोध से विकसित हुआ है। यह 2.x मॉडल से तीन महत्वपूर्ण तरीक़ों से भिन्न है: यह विशुद्ध चमक-आधारित होने के बजाय प्रत्यक्षण-आधारित है; यह ध्रुवीयता-सजग है, गहरे-पर-हल्के और हल्के-पर-गहरे को अलग-अलग अंक देता है; और इसकी दहलीज़ें फ़ॉन्ट के आकार और वज़न के साथ बदलती हैं, जिससे किसी नाज़ुक हेयरलाइन टाइपफ़ेस पर मज़बूत टेक्स्ट टाइपफ़ेस से सख़्त मानक लागू होता है।
APCA अभी एक मसौदा-दिशा है, अनुपालन-मानक नहीं। फ़िलहाल व्यावहारिक स्थिति यह है: WCAG 2.x का पालन करें, और APCA की सोच — वज़न और आकार मायने रखते हैं, ध्रुवीयता मायने रखती है — को उसके ऊपर डिज़ाइन-विवेक की परत के रूप में इस्तेमाल करें।
अधिक कंट्रास्ट हमेशा बेहतर नहीं
कंट्रास्ट को पूरा घुमा देने वाला डायल मान लेने का लोभ होता है। कई कम दृष्टि वाले पाठकों के लिए अधिकतम कंट्रास्ट वाक़ई मदद करता है। लेकिन एक उल्लेखनीय अल्पसंख्यक वर्ग के लिए यह हानिकारक है। बहुत ऊँचा कंट्रास्ट — विशेषकर शुद्ध काले पर शुद्ध सफ़ेद टेक्स्ट — हेलेशन (halation) पैदा करता है, अक्षर-रूपों के चारों ओर एक चमक या धुँधलापन, ख़ास तौर पर एस्टिग्मैटिज़्म या प्रकाश-संवेदनशीलता वाले पाठकों के लिए। डिस्लेक्सिया या दृश्य-तनाव वाले कुछ पाठक बताते हैं कि कड़ा काला-पर-सफ़ेद कठोर लगता है और वे थोड़ी नरम ज़मीन पसंद करते हैं, जैसे हल्की मटमैली सफ़ेद सतह पर लगभग-काला टेक्स्ट।
सबक़ यह नहीं है कि कंट्रास्ट न्यूनतम से नीचे कर दिया जाए। सबक़ यह है कि कंट्रास्ट की अपेक्षाएँ एक फ़र्श तय करती हैं, और अच्छी टाइपोग्राफ़ी उस फ़र्श के ऊपर की रेंज में काम करती है — छत की ओर दौड़ लगाए बिना। गर्म मटमैली सफ़ेद पृष्ठभूमि पर बहुत गहरे स्लेटी जैसा लगभग-काला रंग AAA आराम से पास करता है और #000 पर #FFF की तुलना में अधिक शांत पढ़ा जाता है। इससे भी बेहतर, सिस्टम पाठकों को चुनने दे सकते हैं: prefers-contrast मीडिया क्वेरी बताती है कि उपयोगकर्ता ने अपने ऑपरेटिंग सिस्टम से अधिक (या कम) कंट्रास्ट माँगा है, और स्टाइलशीट टेक्स्ट का रंग सशक्त करके, बॉर्डर मोटे करके और सजावटी पारभासिता हटाकर प्रतिक्रिया दे सकती है। Windows पर forced-colors मोड और आगे जाता है और उपयोगकर्ता का अपना पैलेट प्रतिस्थापित कर देता है; डिज़ाइनों को उससे लड़ने के बजाय उसे सहना चाहिए।
अर्थ को कभी केवल रंगत में न बाँधें
लगभग बारह में से एक पुरुष और महिलाओं का काफ़ी छोटा हिस्सा किसी न किसी रूप की वर्ण-दृष्टि न्यूनता (color vision deficiency) रखता है, सबसे आम है लाल को हरे से अलग पहचानने में कठिनाई। WCAG 1.4.1 (Use of Color) उन्हीं के लिए है: रंग अर्थ को पुष्ट कर सकता है, पर अकेले कभी वहन नहीं कर सकता। बॉडी टेक्स्ट से केवल रंगत के आधार पर अलग दिखाया गया लिंक कई पाठकों के लिए अदृश्य है — उसे अंडरलाइन के साथ जोड़ें। केवल लाल बॉर्डर से दिखाई गई त्रुटि-अवस्था को आइकन या संदेश भी चाहिए। जिस चार्ट की शृंखलाएँ केवल रंगत में भिन्न हों, उसे लेबल, पैटर्न या सीधी टिप्पणी चाहिए।
यह नए कपड़ों में पुराना मुद्रण-सिद्धांत है। बीसवीं सदी के सूचना-डिज़ाइनर जानते थे कि जो नक्शा फ़ोटोकॉपी में पठनीय हो, वह अधिक सशक्त नक्शा है। ऐसे डिज़ाइन करें मानो आपका पृष्ठ ग्रेस्केल में देखा जा सकता हो, क्योंकि कुछ पाठकों के लिए वह प्रभावतः वैसा ही है।
यह अध्याय नया क्यों है
जब इन दिशानिर्देशों का पहला संस्करण लिखा गया था, WCAG 2.0 अभी प्रकाशित नहीं हुआ था; उद्धृत करने के लिए कोई संख्यात्मक कंट्रास्ट-अपेक्षा नहीं थी, उसे परखने का कोई ब्राउज़र-उपकरण नहीं था, और कोई मीडिया क्वेरी नहीं थी जिससे पाठक कंट्रास्ट की वरीयता जता सके। बीच के दो दशकों ने 4.5:1 का मानक, उसका क़ानूनी अंगीकरण, उसके सूत्र की आलोचना का एक समुच्चय, और WCAG 3.0 के मसौदे में आकार लेता एक प्रत्यक्षण-आधारित उत्तराधिकारी दिया। कंट्रास्ट रुचि से माप तक पहुँचा — और फिर, उपयोगी रूप से, इस बहस तक कि माप क्या होना चाहिए।
CSS में
:root {
--ink: #1f1a13;
--paper: #f6f1e7; /* ≥ 4.5:1 against ink (WCAG 1.4.3) */
--accent: #b03a10; /* check at the size and weight it's used */
}
@media (prefers-contrast: more) {
:root { --ink: #000; --paper: #fff; }
}सिफ़ारिशें
- WCAG 1.4.3 (बॉडी टेक्स्ट के लिए 4.5:1) को परम फ़र्श मानकर पूरा करें; जहाँ दर्शक वर्ग अधिक उम्र या कम दृष्टि की ओर झुका हो, वहाँ 1.4.6 (7:1) का लक्ष्य रखें।
- 1.4.11 लागू करें: फ़ोकस संकेतकों, इनपुट बॉर्डरों और अर्थपूर्ण आइकनों को अपने परिवेश के विरुद्ध 3:1 चाहिए।
- पतले और हल्के टाइपफ़ेसों को अनुपात के सुझाव से अधिक सख़्ती से आँकें; वज़न और आकार प्रभावी कंट्रास्ट बदल देते हैं।
- लंबे-लेख के पठन के लिए शुद्ध सफ़ेद पर शुद्ध काले से बचें; नरम मटमैली सफ़ेद पर बहुत गहरा स्लेटी अनुपालन खोए बिना हेलेशन घटाता है।
- रंगत को कभी अकेले अर्थ न वहन करने दें — लिंक अंडरलाइन करें, अवस्थाओं को लेबल दें, चार्ट पर टिप्पणी करें।
prefers-contrastका समर्थन करें और forced-colors मोड को दरकिनार करने के बजाय सहें।- WCAG 3.0 मसौदे में APCA के काम पर नज़र रखें, पर आज 2.x का पालन करें।