कंट्रास्ट इंटरफेस और रीडेबिलिटी

1) इसके विपरीत क्यों

• संज्ञानात्मक भार और थकान को कम करता है,
• इंटरफ़ेस स्कैन गति में सुधार,
• दृश्य और रंग हानि वाले लोगों के लिए पहुंच बढ़ाता है,
• परस्पर संबंधित परिदृश्यों (भुगतान, रूप, पुष्टि) में त्रुटियों को कम करता है।

2) बुनियादी अवधारणाएं और सूत्र

2. WCAG द्वारा 1 कंट्रास्ट

• कंट्रास्ट = (L1 + 0। 05 )/( L2 + 0। 05), जहां 'L1 ≥ L2', 'L' सापेक्ष चमक है (0। 1).

2. 2 सापेक्ष चमक (sRGB)

1. घटक R, G, B रेंज 0 में लाओ। 1.

• अगर 'c ≤ 0। 04045 ', फिर' c _ lin = c/12। 92`
• अन्यथा c _ lin = ((c + 0। 055) / 1. 055) ^ 2. 4`

3. चमक: 'L = 0। 2126 R_lin + 0। 7152 G_lin + 0। 0722 B_lin'

2. 3 रंग अभ्यावेदन

एचएसएल/एचएसवी - मैनुअल समायोजन के लिए सुविधाजनक, लेकिन अवधारणात्मक रूप से समान नहीं।

लैब/एलसीएच/ओकेएलसीएच - मानव धारणा के करीब; OKLCH पढ़ाई को बनाए रखते हुए हल्कापन/संतृप्ति की व्यवस्थित भिन्नता के लिए सुविधाजनक है।

3) मानदंड और उद्देश्य (डब्ल्यूसीएजी 2। 2)

पाठ ≥ 14 पीटी बोल्ड या ≥ 18 पीटी (सामान्य): कम से कम 3:1 (एए) के विपरीत।

बाकी पाठ: कम से कम 4 के विपरीत। 5:1 (एए)।

AAA (बढ़ीहुई पढ़ाई): सादे पाठ के लिए 7:1; 4. एक बड़े के लिए 5-1।

आइकनोग्राफी और महत्वपूर्ण गैर-फोटोग्राफिक तत्व (इनपुट फ़ील्ड्स, चेकबॉक्स, स्विच, त्रुटि संकेतक की सीमाएं): पृष्ठभूमि के साथ 3:1 लैंडमार्क।

राज्यों (होवर/फोकस/दबाया/अक्षम) राज्यों के बीच या पृष्ठभूमि के साथ कम से कम 3: 1 अंतर होना चाहिए, साथ ही स्पष्ट गैर-फोटोग्राफिक संकेतक (लिंक रेखांकित, छाया/फ्रेम, मोटाई परिवर्तन)।

4) डिजाइन प्रणाली: कंट्रास्ट टोकन

हम सलाह देते हैं कि डिजाइन प्रणाली टोकन की संपत्ति के रूप में विपरीत रिकॉर्ड करती है।

• 'एफजी/प्राथमिक' ↔ 'बीजी/बेस' ≥ 7:1 (महत्वपूर्ण पाठ के लिए एएए)
• 'fg/सेकेंडरी' ↔ 'bg/base' ≥ 4। 5:1
• 'fg/muted' ↔ 'bg/सूक्ष्म' ≥ 3:1 (सेवा पाठ)
• 'बॉर्डर/डिफ़ॉल्ट' ↔ 'बीजी/बेस' ≥ 3:1 (क्षेत्रों की सीमाएं, कार्ड)
• 'interactive/default' ↔ 'bg/base' ≥ 4। 5:1 (लिंक/बटन)
• 'इंटरएक्टिव/विकलांग' शॉल्ड नकल सक्रिय राज्यों; कंट्रास्ट कमी और कर्सर/ARIA विशेषताओं का उपयोग करें।

• थीम की बुनियादी लपट (L), फिर विचलन 'Lo' for परतों/सतहों ('bg/सूक्ष्म', 'bg/elvated'),
• परीक्षणों में न्यूनतम कंट्रास्ट

5) हल्के और अंधेरे विषय

प्रकाश विषय: पाठ लगभग काला है (शुद्ध # 000 नहीं, बल्कि एक गर्म/ठंडी छाया), पृष्ठभूमि "चमक" को कम करने के लिए सफेद से थोड़ा टिंटेड है।

डार्क थीम: स्वच्छ # 000 पृष्ठभूमि से बचें - L≈0 के साथ गहरे ग्रेफाइट/चारकोल। 12–0. 16 चकाचौंध को कम करता है; सफेद पाठ को L≈0 तक नरम करें। 9.

दोनों विषयों में एक ही विपरीत लक्ष्य रखें; रंग लहजे को एक अंधेरे पृष्ठभूमि (अक्सर एक शिफ्ट 'L' और संतृप्ति में कमी की आवश्यकता होती है) पर तत्परता खोने की अनुमति न दें।

6) छवियों और वीडियो में पाठ

ओवरले (ढाल/पारभासी परत 40-60%) का उपयोग करें या पाठ के तहत मर जाते हैं।

कम से कम 4 को ठीक करें। 5: 1 पाठ और मरने की स्थानीय पृष्ठभूमि के बीच।

गतिशील वीडियो के लिए - फ्रेम की चमक का विश्लेषण करके अनुकूली पृष्ठभूमि/ओवरले (केंद्रीय/पृष्ठभूमि क्षेत्र का नमूना)।

7) राज्य और अंतर्क्रियाशीलता

संदर्भों को न केवल रंग से अलग किया जाना चाहिए: डिफ़ॉल्ट रूप से रेखांकित या सादे पाठ के साथ होवर/फोकस + कंट्रास्ट ≥ 3:1 पर रेखांकित करें।

बटन: पाठ और आइकन ≥ 4। 5:1 भरने के लिए; 3:1 ≥ पर्यावरण को भरें।

त्रुटियां/सफलता/चेतावनी: रंग पर भरोसा न करें; आइकन/पाठ संकेत जोड़ें; कम से कम 4 पाठ विपरीत प्रदान करें। 5:1.

8) रंग हानि वाले लोग

• Deuteranopia/Protanopia (लाल-हरे क्षेत्र): अतिरिक्त संकेतों के बिना "लाल बनाम हरे" संयोजनों से बचें।
• ट्रिटानोपिया: अलग से जांच करने के लिए नीले-पीले जोड़े।
• आकार और रेखांकन स्पष्ट करें: पाठ लेबल, विभिन्न प्रकार के स्ट्रोक/मार्कर, भरें पैटर्न, खंड कैप्शन।

9) टाइपोग्राफी और पृष्ठभूमि

शरीर का आकार: 14-16 पीएक्स न्यूनतम (वेब), सामग्री क्षेत्रों के लिए 16-18 पीएक्स।

लाइन रिक्ति 1। 4–1. 6 एक उच्च विपरीत पृष्ठभूमि के खिलाफ तत्परता में सुधार

अपर्याप्त कंट्रास्ट पर सूक्ष्म शैलियों से बचें।

रंगीन पृष्ठभूमि पर पाठ: पृष्ठभूमि संतृप्ति को कम करें और/या लक्ष्य अनुपात तक पहुंचने के लिए हल्कापन बढ़ाएं।

10) चार्ट, टेबल, रेखांकन

लाइनें/स्तंभ ≥ 3: 1 से ग्रिड/पृष्ठभूमि।

एक्सिस लेबल और किंवदंतियों ≥ 4। 5:1.

रंग से परे विशिष्ट आकार/पैटर्न इस्तेमाल करें।

11) गतिशील/अनुकूली विपरीत

स्वतः कंट्रास्ट: चयनित भरण में पाठ के कंट्रास्ट रंग की गणना करें (उदा। OKLCH के माध्यम से: 4 तक पहुंचने के लिए 'L' मैच। 5:1).

सिस्टम सेटिंग्स: 'पसंद-कंट्रास्ट', 'मजबूर-रंग', उच्च-विपरीत ओएस मोड का सम्मान करें।

निजीकरण: एप्लिकेशन में "उच्च विपरीत" स्थापित करना ('L' को मजबूत करना, फॉर्म/आइकन के माध्यम से ब्रांड पहचान बनाए रखते हुए अधिक तटस्थ लोगों के साथ ब्रांड लहजे की जगह)।

12) नियंत्रण प्रक्रियाएं और स्वचालन

12. 1 डिजाइनरों के लिए

लेआउट पर कंट्रास्ट जाँचें (प्रसंग और कुंजी पृष्ठभूमि दोनों में)।

घटकों में "कंट्रास्ट स्लॉट" भरें (शीर्षक/प्राथमिक/द्वितीयक/संकेत).

प्रत्येक घटक के लिए दस्तावेज़ वैध पृष्ठभूमि संदर्

12. 2 डेवलपर्स के लिए

इकाई सहायक: टोकन जोड़े के लिए परीक्षणों में विपरीत और दावे की गणना का कार्य।

कंट्रास्ट मेट्रिक्स चेकिंग (स्क्रीन रेंडर + सैंपल L1/L2 गणना) के साथ दृश्य स्नैपशॉट।

स्टाइल लिंटर्स: "कच्चे" रंग का निषेध, केवल टोकन के माध्यम से।

12. 3 वी सीआई/सीडी

प्रसंगों और अवस्थाओं में सभी 'fg/bg' जोड़े की जाँच करता है।

घटक, संस्करण, विषय और वास्तविक मूल्य के साथ उल्लंघन रिपोर्ट (उदा। 3. 9:1 आवश्यक 4 के साथ। 5:1).

13) iGaming बारीकियां (वैकल्पिक)

उज्ज्वल प्रोमो बैनर और टूर्नामेंट कार्ड अक्सर पाठ खाते हैं। प्लेट/ओवरले और पृष्ठभूमि संतृप्ति सीमा आवश्यक।

महत्वपूर्ण सूचनाओं के सिस्टम तत्व (18 +, सीमा, जोखिम) - इसके विपरीत एएए।

लीडरबोर्ड/गुणांक में: संख्या और संकेत "+/-" ≥ 4। 5:1, जीत को उजागर करना - न केवल रंग में (आइकन/टैग)।

14) एंटीपैटर्न

स्थिति को अलग करने के लिए सिर्फ रंग पर भरोसा करें।

कंट्रास्ट की गणना किए बिना एक रंगीन पृष्ठभूमि पर पतले भूरे रंग के फोंट।

डार्क मोड में "डार्क ऑन डार्क", प्रोमो क्षेत्रों में "उज्ज्वल पर उज्ज्वल"।

मृत्यु के बिना विवरण/शोर के साथ पृष्ठभूमि पर पाठ।

15) चेकलिस्ट की समीक्षा करें

आधार पाठ

• ≥ 4. 5:1 (सामान्य), ≥ 3:1 (बड़ा/वसायुक्त)।

लिंक/बटन

• बटन पाठ ≥ 4। 5:1 भरने के लिए।
• विशिष्ट 3:1 ≥ राज्य या स्पष्ट संकेतक।

प्रतीक/किनारा

• ≥ 3:1 पृष्ठभूमि के लिए।

डार्क/लाइट थीम्स

• समान विपरीत लक्ष्य प्राप्त किए जाते हैं

मीडिया पृष्ठभूमि

• ओवरले/प्लेट, गुणांक बनाए रखा गया है।

उपलब्धता

• रंग के अलावा गैर-फोटोग्राफिक विशेषताएं हैं।

स्वचालन

• टोकन और घटकों पर सीआई/सीडी में कंट्रास्ट परीक्षण।

16) टोकन इंजेक्शन (संकेतन उदाहरण)

color.bg.base   = oklch(0.95 0.02 260)
color.fg.primary  = oklch(0.18 0.04 260)  # ≈7:1 color.fg.secondary = oklch(0.30 0.03 260)  # ≥4.5:1 color.border    = oklch(0.40 0.03 260)  # ≥3:1 color.accent    = oklch(0.65 0.12 230)  # проверить на обоих фонах

नोट: अनुमानित मान; अंतिम लोगों को एक विशिष्ट विषय में विपरीत की गणना करके चुना जाता है।

17) टीम प्रलेखन

दिशानिर्देशों में, निर्दिष्ट करें: विपरीत लक्ष्य, सही/झूठे जोड़े के उदाहरण, प्रमुख घटकों के लिए 'fg × bg' मैट्रिक्स, मीडिया पृष्ठभूमि के लिए नियम और उच्च कंट्रास्ट मोड को सक्षम कैसे करें।

अपवाद और कारण पृष्ठ को जीवित रखें (उदाहरण के लिए, 3। 8: 1 एक बड़े डिस्प्ले हेडर के संकीर्ण मामले में)।

संक्षिप्त सारांश

कंट्रास्ट एक मापा पैरामीटर है, स्वाद पैरामीटर नहीं। लक्ष्य निर्धारित करें (एए/एएए), उन्हें टोकन के माध्यम से प्रबंधित करें (अधिमानतः ओकेएलसीएच में), सीआई में स्वचालित रूप से जांचें और लेआउट में नेत्रहीन रूप से, अंधेरे/प्रकाश थीम और रंग दृष्टि हानि वाले लोगों को ध्यान करें। यह पढ़ाई की गारंटी देता है, त्रुटियों को कम करता है और रूपांतरण को बढ़ाता है।