डार्क मोड को जबरन लागू न करने का अनुरोध

 (iamvishnu.com)
2 पॉइंट द्वारा GN⁺ 2025-01-21 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • अगर कोई वेबसाइट सिर्फ डार्क मोड देती है, तो लंबे लेख पढ़ने वाले कुछ उपयोगकर्ताओं के लिए यह आंखों की थकान और असुविधा पैदा कर सकता है; इसलिए विकल्प या आरामदायक रंग संयोजन ज़रूरी हैं
  • असली मुद्दा डार्क मोड खुद नहीं, बल्कि टेक्स्ट और बैकग्राउंड का contrast ratio है; शुद्ध सफेद टेक्स्ट और पूरी तरह काला बैकग्राउंड 21:1 contrast देता है, जो आंखों पर भारी पड़ सकता है
  • काले बैकग्राउंड पर #888888 ग्रे टेक्स्ट इस्तेमाल करने से contrast ratio 5.9:1 तक घट जाता है, जो अत्यधिक contrast की तुलना में पढ़ने में अधिक आरामदायक डार्क मोड का उदाहरण है
  • WCAG 2.1 सामान्य टेक्स्ट के लिए केवल 4.5:1 का न्यूनतम contrast ratio मांगता है और अधिकतम contrast पर कोई सीमा नहीं लगाता, इसलिए 21:1 संयोजन भी नियमों के हिसाब से accessible माना जा सकता है
  • WCAG 3.0 ड्राफ्ट की Maximum text contrast आवश्यकता 4 सितंबर 2025 के अपडेट में हटा दी गई थी, और forced dark mode वाले लेखों के लिए अभी CSS को सीधे override करने जैसे अस्थायी उपायों की जरूरत पड़ती है

जब forced dark mode पढ़ना कठिन बना देता है

  • डार्क मोड के लिए ही डिज़ाइन की गई कई वेबसाइटें और निजी ब्लॉग हैं, और कुछ साइटों पर एक पैराग्राफ पढ़ने से पहले ही आंखों में असुविधा हो सकती है
  • डार्क मोड कुछ स्थितियों में उपयोगी है, लेकिन जब इसे उपयोगकर्ता को विकल्प दिए बिना जबरन लागू किया जाता है, तो यह खराब user experience बन जाता है
  • लंबे डार्क मोड लेख पढ़ने के बाद आंखें तुरंत अनुकूल नहीं हो पातीं और ऐसा लग सकता है जैसे क्षैतिज धारियां लगातार दिख रही हों

समस्या का केंद्र contrast ratio है

  • डार्क मोड में असुविधा तय करने वाला मुख्य तत्व टेक्स्ट और बैकग्राउंड के बीच का contrast ratio है
  • शुद्ध सफेद टेक्स्ट को पूरी तरह काले बैकग्राउंड पर रखने से contrast ratio 21:1 हो जाता है
    • यह संयोजन आंखों पर दबाव डाल सकता है और पढ़ना कठिन बना सकता है
  • काले बैकग्राउंड पर #888888 ग्रे टेक्स्ट इस्तेमाल करने से contrast ratio घटकर 5.9:1 हो जाता है
    • यह उसी डार्क मोड में अधिक आराम से पढ़े जा सकने वाले रंग संयोजन का उदाहरण है
  • contrast ratio जितना अधिक हो, हमेशा उतना बेहतर हो—ऐसा नहीं है; डार्क मोड में अत्यधिक contrast उल्टे असुविधा बढ़ा सकता है

WCAG मानक क्या चूक जाते हैं

  • मौजूदा WCAG 2.1 SC 1.4.3 सामान्य टेक्स्ट के लिए न्यूनतम contrast ratio 4.5:1 की मांग करता है
  • WCAG 2.1 में अधिकतम contrast ratio की कोई सीमा नहीं है
    • शुद्ध सफेद टेक्स्ट और पूरी तरह काले बैकग्राउंड जैसे 21:1 contrast वाले संयोजन भी नियमों के हिसाब से पूरी तरह accessible माने जा सकते हैं
    • भले ही वे कई उपयोगकर्ताओं को असुविधा दें, मौजूदा guidelines डार्क मोड में अत्यधिक contrast की समस्या को संबोधित नहीं करतीं
  • WCAG 3.0 में एक exploratory requirement के रूप में Maximum text contrast जोड़े जाने की योजना थी
    • दिसंबर 2025 के अपडेट के अनुसार, यह requirement 4 सितंबर 2025 के WCAG 3.0 draft update में हटा दी गई
    • contrast ratio mathematics पर GitHub Issue अब भी खुला है

अभी उपलब्ध workaround

  • अगर कोई महत्वपूर्ण लेख केवल forced dark mode में उपलब्ध है, तो browser Developer Tools में CSS को override करके रंगों को invert किया जा सकता है
  • अगर अलग plugin इस्तेमाल नहीं करना चाहते, तो बेहतर समाधान आने तक Developer Tools ही अस्थायी उपाय बने हुए हैं

जहां डार्क मोड अच्छी तरह फिट बैठता है

  • यह डार्क मोड को पूरी तरह खारिज करने की बात नहीं है; नीचे की स्थितियों में डार्क मोड पसंद किया जाता है
    • बत्ती बंद कमरे में OLED screen पर लेख पढ़ते समय, जैसे सोने से पहले फोन पर लेख पढ़ना
    • कोड लिखते समय, क्योंकि लगभग सभी IDE डिफॉल्ट रूप से आरामदायक contrast ratio वाला डार्क मोड देते हैं
    • जब किसी वेबसाइट के डार्क मोड में आरामदायक contrast ratio हो
  • लेख के बाद Hacker News चर्चा में सहमति और आलोचना दोनों आईं, और शुरुआती OEM के dark/light mode विकल्प, contrast ratio का महत्व, निजी अनुभव, medical conditions, accessibility issues और workarounds जैसे विषयों पर चर्चा हुई

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-01-21
Hacker News की राय

  • Dark mode मूल रूप से पारंपरिक डिफ़ॉल्ट के ज़्यादा क़रीब था
    शुरुआती हरे/ऐंबर अक्षर और काले मोनोक्रोम डिस्प्ले, काली पृष्ठभूमि पर धूसर DOS टेक्स्ट मोड, C-64 की गहरी नीली पृष्ठभूमि पर हल्के नीले अक्षर, Apple II की काली पृष्ठभूमि पर धूसर/सफ़ेद—ऐसा ही था
    GUI में भी Amiga का डिफ़ॉल्ट Workbench गहरी नीली पृष्ठभूमि वाला था, और उपयोगकर्ता सभी palettes चुन सकते थे
    ज़्यादातर apps में काले अक्षरों के साथ सफ़ेद स्क्रीन को डिफ़ॉल्ट बनाने वाला Microsoft Windows था, क्योंकि उसे कागज़ जैसा माना गया, लेकिन कागज़ सफ़ेद होने पर भी चमकता हुआ सफ़ेद नहीं होता, इसलिए वह बदलाव कष्टदायक था
    Dark mode के वापस आने से खुशी है, लेकिन forced dark mode नहीं बल्कि विकल्प होना चाहिए, और light mode भी हो सके तो पूरी चमक वाला सफ़ेद न हो

    • Dark mode पारंपरिक डिफ़ॉल्ट नहीं था, और कागज़ सफ़ेद पृष्ठभूमि पर काले अक्षरों वाला था
      डिवाइस या मॉनिटर को चमकते सफ़ेद पर नहीं रखना चाहिए; brightness कम रखनी चाहिए ताकि वह बगल में रखे कागज़ जैसा दिखे
      इस paradigm को बदलने वाला Windows भी नहीं था; व्यापक रूप से फैले consumer devices में Mac पहले आया था, और उसका built-in CRT भी पारंपरिक office lighting में कागज़ से कम चमकीला था
      शुरुआती कंप्यूटरों में गहरे रंग इसलिए थे क्योंकि resolution कम था और pixel brightness फैल जाती थी, जिससे पढ़ना आसान होता था; तकनीक बेहतर होने पर यह समस्या ग़ायब हो गई, और चाहे स्क्रीन हो या प्रिंट, हल्की पृष्ठभूमि पर गहरे अक्षर आँखों के लिए ज़्यादा आरामदेह हैं
    • पुराने CRT का contrast ratio आधुनिक LCD/IPS/OLED स्क्रीन से पूरी तरह अलग था
      ऐंबर और हरे रंग भी सफ़ेद अक्षरों से ज़्यादा आरामदायक माने जाते थे, और फ़र्क इतना बड़ा है कि सीधी तुलना करना मुश्किल है
      पूरी तरह काले की जगह कुछ brightness वाली background हो तो dark mode ज़्यादा लोगों के लिए ठीक हो सकता है, लेकिन फिर OLED के ज़्यादातर फ़ायदे खो जाते हैं
    • पारंपरिक डिफ़ॉल्ट कहना कोई पूर्ण सत्य नहीं है
      शुरुआती PC के DOS/Unix ने उस समय की display characteristics के कारण काली पृष्ठभूमि इस्तेमाल की थी, लेकिन उससे पहले जानकारी सफ़ेद कागज़ पर साझा होती थी, और शुरुआती इंटरनेट ने फिर से सफ़ेद पृष्ठभूमि पर काले अक्षर वापस लाए
      आख़िरकार सच्चा डिफ़ॉल्ट जैसा कुछ नहीं है; यह इस पर निर्भर करता है कि आप कब जुड़े
    • वह दौर बहुत छोटा था जब सब कुछ तय हो रहा था, और व्यक्तिगत पसंद या ergonomics से ज़्यादा cost constraints computing performance और display style को तय कर रहे थे
      Amiga Workbench की गहरी नीली background भी लागत की वजह से थी। माना गया था कि बहुत लोग composite video output से TV पर जोड़कर देखेंगे, और सफ़ेद अक्षर व नीली background TV पर अच्छी दिखती थी
      1080 monitor की कीमत A1000 की क़ीमत का लगभग एक-तिहाई थी, और संभव है कि कई A500 क्रिसमस पर खोले जाने के बाद काफ़ी समय तक TV से जुड़े रहे हों
      मैंने Amiga के लगभग सभी word processors इस्तेमाल किए हैं; WordPerfect को छोड़कर सबमें सफ़ेद background पर काले अक्षर थे, और WordPerfect में भी बदला जा सकता था, बस DOS से मेल रखने के लिए डिफ़ॉल्ट नीला/सफ़ेद रखा गया था
    • CRT के शुरुआती दौर में dark mode सामान्य था, और उस समय ज़्यादातर CRT 60Hz से कम पर refresh होते थे
      गहरी background से flicker कम दिखाई देता था, और 1990s में ऊँचे refresh rate वाले CRT आम होने पर flicker की समस्या घटी, इसलिए light mode डिफ़ॉल्ट बन गया

  • रुकिए, अगर किसी website में सिर्फ़ हल्के अक्षर और गहरी पृष्ठभूमि है, तो वही उस साइट की theme और mood है
    Dark mode तभी मौजूद है जब light mode भी हो, और उल्टा भी यही सच है
    आप किसी अनचाही website को दोनों modes बनाए रखने के लिए मजबूर नहीं कर सकते

    • यह बात लेख की शुरुआत में पहले ही कही गई है
      अगर dark mode brand identity का हिस्सा है, तो कहा गया है कि टेक्स्ट के लिए आरामदायक contrast ratio चुनना चाहिए

  • डिफ़ॉल्ट और non-configurable light mode बहुत लंबे समय तक रहा है, और उसकी भरपाई के लिए Dark Reader जैसे plugins भी हैं
    लेकिन उल्टा, light mode को force करने वाली infrastructure बहुत कम है
    ज़्यादातर हालात में light mode, dark mode से बेहतर है। Dark mode सिर्फ़ तब बेहतर है जब आप अँधेरे कमरे में बैठे हों और स्क्रीन ही एकमात्र light source हो, जो आमतौर पर स्वस्थ वातावरण नहीं है
    Dark mode एक accessibility aid के क़रीब है; बेहतर है कि लाइट जला लें या सो जाएँ
    बिना रोशनी वाले माहौल में light mode पढ़ने में चुभ सकता है, लेकिन उजले माहौल में dark mode लगभग पढ़ा ही नहीं जाता। तेज़ गर्मी के दिन फ़ोन पर dark mode UI पढ़कर देखिए, brightness पूरी बढ़ाने पर भी साफ़ नहीं दिखता

    • मेरे सिस्टम के Dark Reader plugin में light theme force करने का विकल्प भी है
      दरअसल browser में default background color और text color सेट करने की सुविधा पहले से होती है, इसलिए अगर websites सच में ज़रूरी होने पर ही इससे हटें और इन defaults का सम्मान करें, तो extension की ज़रूरत ही न पड़े
      यह दुर्भाग्यपूर्ण है कि “मेरी preference का सच में सम्मान करो” जैसी extension की ज़रूरत पड़ती है, लेकिन अगर ज़रूरत हो तो कम-से-कम यह जानना उपयोगी है कि दोनों विकल्पों का समर्थन मौजूद है। पूरी स्थिति काफ़ी बेवकूफ़ी भरी है, लेकिन workaround है
    • यह मुझे हमेशा अजीब लगा कि बिना किसी चिकित्सकीय कारण के इतने लोग अँधेरे कमरे में गुफा के ट्रोल की तरह बैठे रहना चाहते हैं
      अब सभी operating systems में switchable modes हैं और वे यह browser को बता सकते हैं। Browser operating system द्वारा बताई गई setting के अनुसार adapt कर सकता है और करना भी चाहिए
      UI design, Paul Fitts जैसे तर्कसंगत अपवादों को छोड़ दें, तो ज़्यादातर ग़लत ढंग से लागू किए गए mood और trends की एक कड़ी ही है
      पहले कहा जाता है contrast ख़राब है, तो लोग contrast कम कर देते हैं; फिर कहा जाता है brightness ख़राब है, तो brightness कम कर देते हैं। फिर समझ आता है कि contrast और brightness शुरू से महत्वपूर्ण क्यों थे, और यह चक्र चलता रहता है
    • जिनको cataract रहा है, उनके नज़रिए से light mode पढ़ना बेहद मुश्किल था
      ऐसा लगता था जैसे कार की high beams सीधे सामने से देख रहे हों, और मैंने Dark Reader plugin इस्तेमाल किया, लेकिन वह इस बात जैसा नहीं था कि कोई site ठीक से dark mode support करे
    • अगर screen brightness ग़लत तरीके से बहुत ज़्यादा सेट हो, तब भी dark mode बेहतर हो सकता है
    • मेरी screen पर काले pixels सचमुच बंद हो जाते हैं, इसलिए मुझे Pure Black mode पसंद है
      दिन के उजाले में भी यह काफ़ी ज़्यादा आरामदायक है। अच्छा होगा अगर कुछ Android apps की तरह Pure Black mode, dark/light mode से अलग एक option हो
      फ़िलहाल मैं Dark Reader में brightness न्यूनतम करके काम चला रहा हूँ, लेकिन यह थोड़ा भद्दा है

  • यह ब्लॉग खुद डिवाइस सेटिंग का पालन नहीं करता और पाठकों पर Light Mode थोपता है
    लेखक ने बीच में अपना रुख बदलकर निष्कर्ष निकाला कि समस्या Dark Mode नहीं बल्कि color contrast है

    • लेखक के ब्लॉग में भी साफ़ तौर पर color: #111; और background-color: #fdfdfd; परिभाषित हैं, और यह 18.56:1 contrast ratio है
    • असली मुद्दा contrast ratio ही है, इसलिए शीर्षक थोड़ा बेईमान-सा लगता है
      विडंबना यह है कि अंत में वह workaround के रूप में invert filter इस्तेमाल करने की बात करता है, लेकिन अगर Dark Mode पसंद करने वाला कोई व्यक्ति लेखक की तेज़ सफेद background/काले text वाली साइट पर Vivaldi का Invert Mode जैसा कुछ इस्तेमाल करे, तो लेखक जिस Dark contrast की शिकायत कर रहा है वही बन जाता है

  • काश उपयोगकर्ताओं पर low contrast न थोपा जाए
    हर कोई 100 nits से ज़्यादा पर calibrated screen और चमकदार लेकिन उचित ambient lighting में content नहीं देखता
    सुझाया गया gray-on-gray संयोजन, उदाहरण के लिए, पूरी तरह अंधेरे कमरे में brightness 0 पर देखने या सीधी धूप में देखने पर पढ़ना मुश्किल बना सकता है
    पूरा SDR color gamut इस्तेमाल करने के लिए ही है; यह HDR नहीं है जिसे उपयोगकर्ताओं को चकाचौंध से बचाने के लिए सीमित करना पड़े

    • gray-on-gray संयोजन उम्रदराज़ लोगों के लिए भी मुश्किल हो सकता है

  • यह सिर्फ Light बनाम Dark की समस्या नहीं है। अच्छा होगा अगर वेबसाइटें सामान्य रूप से मेरी system preferences का सम्मान करें
    अगर मेरी operating system theme पीली ईंटों वाली background पर बैंगनी Comic Sans text है, तो browser को भी उसका सम्मान करना चाहिए
    अगर मैं text को browser की पूरी चौड़ाई में पढ़ना चाहता हूँ, तो मुझे उसे बीच में 5-inch के संकरे column में देखने के लिए मजबूर नहीं किया जाना चाहिए; browser settings में जादू करने, override CSS लगाने या extension install करने की ज़रूरत नहीं होनी चाहिए
    browser को बस कहना चाहिए, “वेब डेवलपर, मजबूरी है। user preference जीतेगी।”
    browser ने developers को इतना ज़्यादा control दे दिया है कि वे उपयोगकर्ता की चाहत को अनदेखा कर सकें, और “user agent” शब्द अब बेमानी लगता है। अब यह developer agent के ज़्यादा क़रीब है

    • पीली background का तो शायद कुछ न किया जा सके, लेकिन Comic Sans को force करना Firefox settings में preferred font सेट करके और “Allow pages to choose their own fonts” बंद करके आसानी से किया जा सकता है
      मैं भी ऐसा ही करता हूँ, और web browsing बहुत बेहतर हो जाती है
    • क्या desktop apps या दूसरी चीज़ें सच में ऐसी settings का सम्मान करती हैं?
    • मैं ऐसा नहीं चाहता; मैं हर site या app के लिए scheme अलग से चुनना चाहता हूँ
      कुछ जगहों पर Dark Mode शानदार है, और कुछ पर बिल्कुल बेतुका। white theme के साथ भी यही बात है
    • सुनने में यह ज़्यादा reading mode को default रूप से इस्तेमाल करने जैसा लगता है। कुछ browsers इसकी अनुमति देते हैं

  • बहुत सारे web developers यह मान लेते हैं कि सबको Dark Mode पसंद है, इसलिए उसे default बना देते हैं, और फिर यह कहकर सही ठहराते हैं कि Dark/Light Mode toggle button मौजूद है
    यह देखकर हैरानी होती है कि नई बनी websites भी user preference detect नहीं करतीं और बस fixed रहती हैं
    अगर आप developer हैं, तो CSS की color-scheme property से यह बता सकते हैं कि कोई element किस color configuration में आराम से render हो सकता है
    :root { color-scheme: light dark; }
    element { light-dark(light-color-code, dark-color-code); }
    एक macOS user के रूप में, menu bar या IDE जैसी कुछ जगहों पर Dark Mode अच्छा लगता है, लेकिन पढ़ने, लिखने और browsing के लिए मुझे Light पसंद है, इसलिए मेरी preferences मिली-जुली हैं
    System Preferences में theme को LIGHT पर सेट करें, फिर defaults write -g NSRequiresAquaSystemAppearance -bool Yes चलाएँ, और logout के बाद System Preferences में theme को DARK पर सेट करें
    default theme पर लौटने के लिए defaults write -g NSRequiresAquaSystemAppearance -bool No चलाएँ

    1. https://developer.mozilla.org/en-US/docs/Web/CSS/color-schem...

  • मज़ेदार बात यह है कि ब्लॉग का “पढ़ने में आसान text” वाला उदाहरण मुझे low contrast की वजह से सचमुच पढ़ने में कठिन लगता है
    जानना चाहूँगा कि वह किस तरह की आँखों की स्थिति या monitor इस्तेमाल कर रहा है

    • मेरा अंदाज़ा है कि वह designers के लिए बना बहुत महँगा HDR monitor इस्तेमाल कर रहा है, और हर चीज़ में full gamut इस्तेमाल कर रहा है
    • gray on gray on gray जैसी readability को बर्बाद करने वाली सनक मेरी समझ से बाहर है
      यह असहनीय है, बदसूरत है, और पढ़ने में कठिन है। काश सब लोग यह बंद करें
    • मैं भी Light Mode पसंद करता हूँ, लेकिन मेरी लगभग 300-dollar की screen पर gray text, white text से कहीं ज़्यादा आराम से पढ़ा जाता है

  • अगर कोई web API है जिससे पता चल सकता है कि user Dark Mode में है, तो वही इस्तेमाल करें
    @media (prefers-color-scheme: dark) { CSS Rules here... }

  • Dark Mode एक गलती था
    शुरुआती LCD काफ़ी मंद थे, इसलिए सबने इसकी भरपाई के लिए सफेदी बहुत बढ़ा दी, और अब जब LCD उस स्तर तक पहुँच गए हैं, तो यह काफ़ी लोगों की आँखें जला देने जैसा हो गया है
    इसी वजह से अब धीरे-धीरे दोनों modes support करने पड़ रहे हैं, और Apple के हास्यास्पद रूप से बदसूरत Dark Mode icons दिखाते हैं कि इसे ठीक से करना कितना मुश्किल है
    आदर्श रूप से, कंप्यूटर interfaces के default colors को फिर से gray पर ले जाना चाहिए, जैसे उस दौर में था जब चमकीले CRT standard थे
    इसका एक फ़ायदा यह भी है कि UI elements को depth cues दिए जा सकते हैं, और वह भी वापस आना चाहिए

    • यह बस निजी पसंद की बात है
      असली मुद्दा यह है कि चीज़ें configurable होनी चाहिए ताकि user अपनी preference सेट कर सके
      व्यक्तिगत रूप से, मुझे Light Mode चुभता है, आँखों में दर्द करता है और थका देता है। लोगों की पसंद अलग-अलग होती है
    • CRT में brightness और contrast को आसानी से adjust करने वाले dial भी होते थे, इसलिए कोई भी सफेद background पर काला text हो या उसका उल्टा, अपनी पसंद के हिसाब से जल्दी सेट कर सकता था
    • “default color को gray बनाना” क्या ज़्यादातर मामलों में Dark Mode पहले से नहीं करता?
      Light Mode आम तौर पर पूरी तरह सफेद नहीं होता, और Dark Mode ग्रे शेड्स का ही होता है