रंग

सुलभ रंग

यूज़र इंटरफ़ेस के किसी कॉम्पोनेंट या उसकी स्थिति को दिखाने के लिए, सिर्फ़ रंग का इस्तेमाल न करें: अंतर दिखाने के लिए, आइकॉनोग्राफ़ी और/या शेप का इस्तेमाल करें. सफलता/गड़बड़ियों को सिर्फ़ रंग से न दिखाएं. आइकॉन या टेक्स्ट का इस्तेमाल करें.

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

कंट्रास्ट

• कम से कम कंट्रास्ट के स्टैंडर्ड: सामान्य टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट या आइकॉन के लिए 3:1 का कंट्रास्ट रेशियो रखें.
• नॉन-टेक्स्ट कंट्रास्ट स्टैंडर्ड का पालन करें: यूज़र इंटरफ़ेस कॉम्पोनेंट की सीमाओं और स्थितियों के लिए, कम से कम 3:1 का कंट्रास्ट रेशियो बनाए रखें.
  • इसमें विज़ुअल एलिमेंट (बॉर्डर, बैकग्राउंड, बॉक्स-शैडो, अंडरलाइन) शामिल हैं.ये एलिमेंट, यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट की सीमा बनाते हैं या उसकी मौजूदगी के बारे में बताते हैं. जैसे, इनपुट फ़ील्ड के बॉर्डर.
  • इसमें ऐसे विज़ुअल एलिमेंट भी शामिल हैं जो किसी कॉम्पोनेंट के चालू होने की स्थिति दिखाते हैं. जैसे, चेकबॉक्स के सही के निशान या स्विच थंब.
  • चेतावनी: बिना टेक्स्ट वाले कॉन्टेंट के लिए 3:1 का कंट्रास्ट रेशियो पूरा करना, कम से कम डिज़ाइन के लिए मुश्किल हो सकता है. हल्के ग्रेडिएंट या इनसेट/आउटसेट शैडो का इस्तेमाल करके, विज़ुअल की सीमाओं को हल्का किया जा सकता है. साथ ही, सुलभता से जुड़ी ज़रूरी शर्तों को पूरा किया जा सकता है.
• prefers-contrast का इस्तेमाल सिर्फ़ तब करें, जब ज़रूरी हो: @media (prefers-contrast: more) का इस्तेमाल तब करें, जब डिज़ाइन में कम कंट्रास्ट वाले एक्सेंट (जैसे, हल्के बॉर्डर, म्यूट किया गया सेकंडरी टेक्स्ट) का इस्तेमाल किया गया हो और उन्हें बेहतर बनाने की ज़रूरत हो. जिन साइटों में पहले से ही बेसलाइन कंट्रास्ट मौजूद है उन्हें इसकी ज़रूरत नहीं होगी.

हल्के और गहरे रंग वाली कलर स्कीम

• लाइट और डार्क कलर स्कीम के साथ काम करना: @media (prefers-color-scheme: dark) का इस्तेमाल करें और इसे color-scheme सीएसएस प्रॉपर्टी के साथ जोड़ें, ताकि फ़ॉर्म कंट्रोल, स्क्रोलबार, और यूए से रेंडर की गई अन्य सरफ़ेस मैच हो सकें. ज़्यादा जानकारी के लिए, गहरे रंग वाला मोड देखें.

फ़ोर्स्ड कलर मोड

• फ़ोर्स्ड कलर मोड के साथ काम करना: फ़ोर्स्ड कलर मोड (Windows पर हाई कंट्रास्ट) में, ब्राउज़र लेखक के रंगों को सिस्टम के कीवर्ड से बदल देता है. साथ ही, background-image, box-shadow, और border-image को हटा देता है. @media (forced-colors: active) का इस्तेमाल करके, कलर टोकन के लिए सिस्टम कलर फ़ॉलबैक तय करें.
• forced-color-adjust: none का इस्तेमाल सिर्फ़ वहां करें जहां रंग की जानकारी देना ज़रूरी हो (सिंटैक्स हाइलाइटर, कलर पिकर स्वैच). सिर्फ़ खूबसूरती बनाए रखने के लिए, forced-color-adjust: none का इस्तेमाल न करें.
• बॉर्डर, सेपरेटर या स्थिति दिखाने के लिए, background-image, box-shadow या border-image पर भरोसा न करें: ये फ़ोर्स्ड कलर मोड में गायब हो जाते हैं. अक्सर प्रिंट में भी ऐसा होता है. अगर आपको ऐसा करना ही है, तो पक्का करें कि फ़ोर्स्ड कलर मोड में कोई विकल्प मौजूद हो. जैसे, सिस्टम कलर कीवर्ड (CanvasText, LinkText, ButtonText, Highlight, GrayText वगैरह) के साथ outline या border.

टिंट जनरेट किए जा रहे हैं

डाइनैमिक तौर पर टिंट जनरेट करने से पहले, देखें कि क्या पहले से तय किए गए किसी मौजूदा डिज़ाइन टोकन का इस्तेमाल किया जा सकता है. इससे डिज़ाइनर को ज़्यादा कंट्रोल मिलता है और एक जैसा अनुभव मिलता है.

अगर आपको डाइनैमिक तौर पर हल्के या गहरे रंग जनरेट करने हैं, तो:

• ऐसा न करें: oklch/oklab या lch/lab में सिर्फ़ लाइटनेस चैनल को अडजस्ट न करें. उदाहरण के लिए, oklab(from var(--primary) 0.9 a b). हालांकि, सैद्धांतिक तौर पर यह सही तरीका है, लेकिन ब्राउज़र अब तक गैमट मैपिंग लागू नहीं करते हैं. इसलिए, यह अनुमान नहीं लगाया जा सकता कि कौनसा रंग दिखेगा.
• सफ़ेद या काले रंग के साथ मिलाने के लिए, color-mix() का इस्तेमाल किया जा सकता है. इसके लिए, oklab का इस्तेमाल करना बेहतर रहेगा. इससे रंग, गैमट में सुरक्षित रहता है. हालांकि, इससे रंगों की चमक कम हो जाती है और वे हल्के दिखने लगते हैं.
• दोनों के बीच संतुलन बनाने के लिए, रोशनी में बदलाव करने की सुविधा को किसी अन्य तरीके (जैसे, color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%)) के साथ इस्तेमाल किया जा सकता है. हालांकि, रोशनी में बदलाव करने की सुविधा को 30% से ज़्यादा इस्तेमाल करने से बचें.