एक उपयोगकर्ता विकल्प और टोकन सिस्टम से शुरू करें
prefers-color-scheme को सिस्टम सेटिंग के रूप में डिफ़ॉल्ट के रूप में उपयोग करें। यदि आप स्विच देते हैं, तो उसे कीबोर्ड-चालनीय कंट्रोल के रूप में रखें जिसमें सुलभ नाम हो और जो सक्रिय विकल्प को प्रोग्रामैटिकली एक्सपोज़ करे। ब्राउज़र संदर्भ में मैनुअल चयन को प्राथमिकता दें; यह वादा न करें कि यह किसी अन्य डिवाइस या प्राइवेट सेशन तक अनुसरण करेगा।
रंगों को रूप दिखावट के आधार पर नाम न दें; रोल के अनुसार नाम दें: canvas, surface, text, muted text, border, link, accent, error, success, focus, और disabled। दोनों थीमों में हर रोल मैप करें। इससे लाइट-ओनली ग्रे का डार्क मोड में रिसाव रुकता है और फिक्स पुन:उपयोगीय बनते हैं। डार्क स्वाभाविक रूप से अधिक पहुँचयोग्य या सार्वभौमिक रूप से पसंद किया हुआ नहीं है; यह एक और अनुभव है जिसे उपयोगीय बनाना होता है।
एक क्रम दस्तावेज़ करें, जैसे सेव्ड चॉइस पहले और सिस्टम प्रेफरेंस दूसरे, ताकि टीम एक ही परिणाम का परीक्षण करे।
हॉवर, फोकस, सेलेक्टेड, इनवैलिड, डिसेबल्ड, लोडिंग, खाली, और विजिटेड-लिंक स्टेट्स शामिल करें, केवल डिफ़ॉल्ट्स ही नहीं।
रेंडर की गई थीम में कंट्रास्ट मापें
WCAG 2.2 Success Criterion 1.4.3 सामान्य टेक्स्ट और टेक्स्ट-इमेज के लिए न्यूनतम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 निर्धारित करता है। राउंड न करें: 4.499:1 का अर्थ है कि यह 4.5:1 पर खरा नहीं उतरता। पतली टाइप कम्प्यूटेड कलर की तुलना में कमजोर दिख सकती है, इसलिए मज़बूत फॉन्ट या अतिरिक्त मार्जिन का उपयोग करें।
हर रेंडर किए गए फ़ोरग्राउंड और आस-पास की पृष्ठभूमि की जाँच करें। फोटो, ग्रेडिएंट, पारदर्शी पैनल, या वीडियो पर टेक्स्ट का बैकग्राउंड बदलता रहता है, इसलिए एक ही टोकन कैलकुलेशन पठनीयता साबित नहीं कर सकता। एक ओपेक बैकिंग, पर्याप्त ओवरले या अलग प्लेसमेंट का उपयोग करें, फिर यथार्थवादी व्यूपोर्ट्स पर निरीक्षण करें।
WCAG 2.1 Success Criterion 1.4.11 के अंतर्गत, किसी सक्रिय कंट्रोल, आवश्यक स्थिति या अर्थपूर्ण ग्राफिक की पहचान के लिए आवश्यक दृश्य जानकारी को आस-पास के रंगों के खिलाफ 3:1 चाहिए।
रंग परिवर्तन के साथ टेक्स्ट, आइकन, पैटर्न, स्थिति या कोई स्पष्ट संकेत जोड़ें; एरर और सेलेक्टेड स्टेट्स को सूक्ष्म टिंट पर निर्भर नहीं होना चाहिए।
कीबोर्ड फोकस, फ़ॉर्म और स्थिति परिवर्तनों की रक्षा करें
दोनों थीमों में Tab करें। लिंक, बटन, इनपुट, मेनू, डायलॉग, कस्टम विजेट और थीम कंट्रोल पर फोकस दिखाई देना चाहिए। ब्राउज़र आउटलाइन् को हटाएँ नहीं जब तक इसका प्रतिस्थापन प्रत्येक सतह और स्थिति पर परखा न गया हो। एक ऑफ़सेट आउटलाइन् अक्सर ब्लेंडिंग ग्लो से अधिक स्पष्ट होता है।
WCAG 2.2 Focus Appearance एक AAA क्राइटेरियन है, पर यह AA प्रमाणन का सबूत नहीं है। यह एक उपयोगी लक्ष्य है: संकेतक क्षेत्र कम से कम 2 CSS-pixel परिमाप की परिधि जितना बड़ा और फोकस्ड तथा अनफोकस्ड पिक्सलों के बीच 3:1 कंट्रास्ट। साथ ही सत्यापित करें कि एरर, आवश्यक, चयनित और अनुपलब्ध अवस्थाएँ अर्थ बरकरार रखें।
इनपुट हिन्ट, दर्ज की गई वैल्यू, लेबल, हेल्प टेक्स्ट, एरर टेक्स्ट, इनवैलिड बॉर्डर, चेकबॉक्स मार्क, रेडियो सेलेक्शन और सबमिट स्टेट को अलग-अलग टेस्ट करें।
चेकआउट या किसी अन्य नियमन वाले फ्लो के लिए, प्रोवाइडर सैंडबॉक्स का उपयोग करें और जहाँ उपयुक्त हो वहाँ योग्य एक्सेसिबिलिटी और सुरक्षा समीक्षा प्राप्त करें। यह शैक्षिक मार्गदर्शन है, अनुपालन या सुरक्षा आकलन नहीं।
चित्र, एम्बेडेड एसेट और ब्राउज़र-प्रदत्त UI को संभालें
लोगो, इलस्ट्रेशन, स्क्रीनशॉट, चार्ट, आइकन और छवियों में बेक्ड टेक्स्ट दोनों थीमों में समीक्षा करें। एक रीयूज़ किए गए लाइट लोगो से गायब हो सकता है और एक चार्ट लेजेंड फेल कर सकता है भले ही आसपास का HTML पास हो। उपयुक्त-उद्देश्य एसेट या स्थिर पृष्ठभूमि दें। निर्देश, स्थिति या डेटा बताने वाली इमेजरी समझने योग्य रहनी चाहिए।
लाइट और डार्क स्कीम के लिए समर्थन घोषित करें, फिर चुनी हुई थीम के लिए पृष्ठ सामग्री स्टाइल करें। color-scheme प्रॉपर्टी ब्राउज़र कैनवास, स्क्रालबार, फॉर्म कंट्रोल और अन्य ब्राउज़र UI को संरेखित करती है। संबंधित मेटाडेटा दस्तावेज़ में जल्दी रखें। एम्बेडेड SVG पैरेंट स्कीम का जवाब दे सकता है; थर्ड-पार्टी iframe और विजेट्स को end-to-end टेस्ट करें।
सेमान्टिक HTML कंट्रोल्स को प्राथमिकता दें। forced-color व्यवहार नेटिव सेमांटिक्स का उपयोग करता है, न कि generic एलिमेंट पर जोड़ा गया ARIA रोल।
डाउनलोड किए गए, कैश्ड, स्लो-लोडिंग और फेल्ड-इमेज स्टेट्स का निरीक्षण करें, ख़ासकर जहाँ टेक्स्ट या क्रिया संकेत मीडिया पर स्थित हों।
forced colors का सम्मान करें और रिलीज़ को एक सिस्टम के रूप में टेस्ट करें
forced-colors मोड सीमित उपयोगकर्ता-चुने हुए पैलेट को लागू करता है, जैसे Windows High Contrast। ब्राउज़र रंगों को बदल सकते हैं, शैडोज़ हटा सकते हैं, और टेक्स्ट बैकप्लेट जोड़ सकते हैं। ओवरराइड को ब्लॉक न करें। उस स्थान पर लक्षित फिक्स बनाएं जहाँ किसी कंपोनेंट ने सीमा या अर्थ खो दिया है, जैसे जहाँ शैडो ने affordance दिया था वहाँ वास्तविक बॉर्डर दें। एमुलेशन हर डिवाइस, ब्राउज़र, एक्सटेंशन, ज़ूम स्तर या सहायक-प्रौद्योगिकी संयोजन का प्रतिनिधित्व नहीं कर सकता।
रिलीज़ से पहले लाइट, डार्क और forced-colors सेटिंग्स में रूट और इंटरैक्शन मैट्रिक्स चलाएँ। Chrome DevTools दोनों परिस्थितियों का अनुकरण कर सकता है; समीक्षा तेज करने के लिए इसका उपयोग करें, फिर प्राथमिक प्रवाहों को मैन्युअली नेविगेट करें। स्कैनर उम्मीदवार ढूँढते हैं पर अकेले एक्सेसिबिलिटी निर्धारित नहीं कर सकते। SIU प्रीफ्लाइट्स महत्वपूर्ण थीम एसेट और इंटरैक्शन, एक रिलीज़ गैट रिकॉर्ड करता है, और गंभीर प्रस्तुति रिग्रेशन के लिए टेस्ट किए गए रोलबैक पाथ को रखता है; यह डाउनटाइम मॉनिटरिंग नहीं है।
लैंडिंग, नेविगेशन, सर्च, अकाउंट एक्सेस, फॉर्म, एरर पेज, ऑथेन्टिकेटेड स्क्रीन और मैटेरियल कन्वर्ज़न फ्लोज़ शामिल करें।
परीक्षित URLs, ब्राउज़र वर्ज़न, सेटिंग्स, अपवाद, मालिक और रोलबैक ट्रिगर सहेजें ताकि सुधार तथ्य से शुरू हो सके।