रंगों का कंट्रास्ट और WCAG: टेक्स्ट को पढ़ने में आसान कैसे बनाएँ

सफ़ेद पर हल्का स्लेटी टेक्स्ट डिज़ाइन फ़ाइल में सुंदर दिखता है, लेकिन धूप में फ़ोन पर, बढ़ती उम्र की आँखों के लिए या कम दृष्टि वाले लोगों के लिए इसे पढ़ना मुश्किल होता है। WCAG नाम के एक्सेसिबिलिटी दिशानिर्देश "पढ़ने लायक" को ऐसी संख्या में बदल देते हैं जिसे जाँचा जा सकता है।

कंट्रास्ट अनुपात

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

सीमाएँ

                  सामान्य टेक्स्ट   बड़ा टेक्स्ट
AA  (न्यूनतम)      4.5:1            3:1
AAA (उन्नत)       7:1              4.5:1

बड़ा टेक्स्ट = कम से कम 24px, या बोल्ड में 18.66px

ज़्यादातर एक्सेसिबिलिटी क़ानून और नीतियाँ AA स्तर का हवाला देती हैं, इसलिए इसे न्यूनतम मानें। लंबे पढ़ने वाले टेक्स्ट के लिए AAA का लक्ष्य रखना फ़ायदेमंद है। WCAG 2.1 के अनुसार अर्थ रखने वाले आइकन, इनपुट बॉर्डर और फ़ोकस रिंग को कम से कम 3:1 चाहिए।

अक्सर फ़ेल होने वाले जोड़े

स्लेटी प्लेसहोल्डर टेक्स्ट, नारंगी, पीले या हल्के हरे जैसे चटक ब्रांड रंगों पर सफ़ेद टेक्स्ट, और फ़ोटो के ऊपर टेक्स्ट। फ़र्क़ बहुत बारीक हो सकता है: सफ़ेद पर #777777 लगभग 4.48:1 है, AA से ज़रा नीचे, जबकि #767676 लगभग 4.54:1 है और पास हो जाता है।

झटपट सुधार

रंग की छटा बदलने के बजाय टेक्स्ट या बैकग्राउंड को एक-दो स्तर गहरा करें; चमक में छोटा बदलाव भी अनुपात को काफ़ी बदल देता है। चटक बटनों पर लेबल बड़े और बोल्ड करें, या सफ़ेद की जगह गहरे रंग का टेक्स्ट इस्तेमाल करें। फ़ोटो पर, टेक्स्ट के पीछे एक गहरी परत रखें।

कॉन्ट्रास्ट रंग का अकेला नियम नहीं है

WCAG यह भी कहता है कि जानकारी दिखाने का अकेला तरीक़ा रंग नहीं होना चाहिए। फ़ॉर्म का कोई फ़ील्ड जिसे सिर्फ़ लाल बॉर्डर से गलत बताया गया हो, या कोई चार्ट जो लाइनों को सिर्फ़ रंग से अलग करता हो, कलर ब्लाइंडनेस वाले लोगों के लिए नाकाम रहता है, जो लगभग हर 12 में से 1 पुरुष हैं। आइकन, टेक्स्ट लेबल, पैटर्न या अलग लाइन स्टाइल जोड़ें।

डार्क मोड

गहरे बैकग्राउंड पर भी यही अनुपात लागू होते हैं। शुद्ध काले पर शुद्ध सफ़ेद टेक्स्ट 21:1 तक पहुँचता है, लेकिन कुछ पाठकों को यह तीखा लग सकता है और अक्षर चमकते से लग सकते हैं; बहुत गहरे ग्रे पर हल्का ग्रे भी आसानी से AA पास करता है और लंबे पढ़ने में ज़्यादा आरामदायक है। दोनों थीम जाँचें, क्योंकि लाइट मोड में पास होने वाली जोड़ी रंग उलटने पर अक्सर फ़ेल हो जाती है।

इमेज और ग्रेडिएंट पर टेक्स्ट

फ़ोटो या ग्रेडिएंट पर हर अक्षर के पीछे बैकग्राउंड बदलता है। टेक्स्ट के पीछे के बैकग्राउंड के सबसे हल्के हिस्से से कॉन्ट्रास्ट मापें, औसत से नहीं। टेक्स्ट के पीछे आधी-पारदर्शी गहरी परत या ठोस पट्टी नतीजे को अनुमान लगाने लायक बनाती है।

आगे क्या

WCAG 3 का ड्राफ़्ट APCA नाम का एक नया कॉन्ट्रास्ट तरीक़ा परख रहा है, जो फ़ॉन्ट के आकार और मोटाई को ज़्यादा सटीकता से ध्यान में रखता है। यह अभी ड्राफ़्ट ही है: आज के क़ानून और ऑडिट WCAG 2.1 और 2.2 का हवाला देते हैं, इसलिए 4.5:1 और 3:1 की सीमाएँ ही पूरी करनी होती हैं।

कोई जोड़ा जाँचें

4Dev का कलर कंट्रास्ट चेकर किसी भी टेक्स्ट और बैकग्राउंड रंग के लिए अनुपात दिखाता है, लाइव प्रीव्यू के साथ, और सामान्य व बड़े टेक्स्ट के लिए AA और AAA में पास या फ़ेल बताता है। गणना WCAG 2 फ़ॉर्मूले से आपके ब्राउज़र में होती है।

कलर कंट्रास्ट चेकर खोलें