सामान्य टेक्स्ट AA 4.5:1
टेक्स्ट बदलें
#205EE6 4.52:1
या बैकग्राउंड बदलें
#E8F2FF 4.57:1
डब्ल्यूसीएजी 2.2 कलर कंट्रास्ट
कंट्रास्ट जाँचें, समझें, ठीक करें
एक टेक्स्ट रंग और एक बैकग्राउंड रंग डालें: आपको अनुपात मिलता है, और सामान्य टेक्स्ट, बड़े टेक्स्ट और इंटरफ़ेस हिस्सों के लिए साफ़ फ़ैसला। उसके नीचे: डब्ल्यूसीएजी 2.2 क्या माँगता है, सबसे नज़दीकी पास होने वाले रंग, कंट्रास्ट मापने के छह तरीक़े, रंगांधता में यही जोड़ी, और पूरे पैलेट के लिए एक मैट्रिक्स।
त्वरित जांच
WCAG 2.2त्वरित जाँच के लिए जावास्क्रिप्ट चाहिए। उसके बिना यह उदाहरण वाली जोड़ी है।
अभी यह कोई रंग नहीं है।
अभी यह कोई रंग नहीं है।
हेक्स, rgb(), hsl() या कोई सीएसएस रंग-नाम। पारदर्शी रंग को पहले मिलाया जाता है।
पारदर्शी टेक्स्ट, बैकग्राउंड पर मिलाने के बाद:
पारदर्शी बैकग्राउंड, सफ़ेद के ऊपर मापा गया:
4.23:1 कंट्रास्ट अनुपात
सिर्फ़ बड़े टेक्स्ट और यूआई हिस्सों के लिए पास। सामान्य टेक्स्ट AA पर फ़ेल।
- सामान्य टेक्स्ट AA4.5:1फ़ेल
- सामान्य टेक्स्ट AAA7:1फ़ेल
- बड़ा टेक्स्ट AA3:1पास
- बड़ा टेक्स्ट AAA4.5:1फ़ेल
- यूआई हिस्से और ग्राफ़िक्स3:1पास
नियम
डब्ल्यूसीएजी 2.2 क्या माँगता है
तीन सफलता मानदंड ये संख्याएँ तय करते हैं। क़ानून और अनुबंध आम तौर पर लेवल AA का हवाला देते हैं; AAA ज़्यादा सख़्त है, और W3C पूरी साइट पर इसे अनिवार्य करने की सलाह नहीं देता।
| क्या | लेवल AA | लेवल AAA | सफलता मानदंड |
|---|---|---|---|
| सामान्य टेक्स्टबड़े टेक्स्ट के आकार से छोटा कुछ भी | 4.5:1 | 7:1 | 1.4.3 कंट्रास्ट (न्यूनतम) 1.4.6 कंट्रास्ट (उन्नत) |
| बड़ा टेक्स्टकम से कम 24 px, या बोल्ड हो तो 18.66 px | 3:1 | 4.5:1 | 1.4.3 कंट्रास्ट (न्यूनतम) 1.4.6 कंट्रास्ट (उन्नत) |
| यूआई कंपोनेंट और ग्राफ़िक्सकंट्रोल की बॉर्डर और अवस्थाएँ, फ़ोकस इंडिकेटर, और चार्ट के वे हिस्से जिनके बिना उसे पढ़ा न जा सके | 3:1 | इससे ऊँचा लेवल नहीं | 1.4.11 गैर-टेक्स्ट कंट्रास्ट |
| फ़ोकस इंडिकेटरकम से कम 2 px की परिधि, जो फ़ोकस और बिना फ़ोकस के बीच बदले | 1.4.11 के दायरे में | 3:1 | 2.4.13 फ़ोकस का रूप |
बड़ा होना आकार है, भूमिका नहीं
डब्ल्यूसीएजी बड़े टेक्स्ट को 18 पॉइंट, या 14 पॉइंट बोल्ड के रूप में परिभाषित करता है। 1 pt = 1.333 सीएसएस px के हिसाब से यह 24 px रेगुलर, या लगभग 18.66 px बोल्ड है। 20 px की हल्के वेट वाली हेडिंग सामान्य टेक्स्ट ही है, उसे कुछ भी कहा जाए।
क्या छूट प्राप्त है
- आनुषंगिक टेक्स्ट: किसी निष्क्रिय कंट्रोल में, सिर्फ़ सजावट, अदृश्य, या ऐसी तस्वीर का हिस्सा जिसमें दूसरी अहम सामग्री हो।
- लोगोटाइप: वह टेक्स्ट जो किसी लोगो या ब्रांड नाम का हिस्सा है।
- 1.4.11 के तहत: निष्क्रिय कंपोनेंट, और वे कंट्रोल जिन्हें ब्राउज़र बिना लेखक की स्टाइलिंग के बनाता है।
- जो कंट्रोल सिर्फ़ डिसेबल दिखता है पर काम करता है, उसे छूट नहीं है।
स्रोत: 1.4.3 की व्याख्या (Understanding), 1.4.11 की व्याख्या (Understanding), 2.4.13 की व्याख्या (Understanding) (W3C)।
फ़िक्स
फ़ेल होती जोड़ी ठीक करें
त्वरित जाँच वाली जोड़ी के लिए वे सबसे नज़दीकी रंग जो हर लक्ष्य तक पहुँचते हैं। हर रंग OKLCH में अपना ह्यू और क्रोमा बनाए रखता है और सिर्फ़ लाइटनेस बदलता है, इसलिए नीला वही नीला रहता है, बस थोड़ा गहरा या हल्का।
- टेक्स्ट
- #2563EB
- पृष्ठभूमि
- #DBEAFE
- अनुपात
- 4.23:1
सामान्य टेक्स्ट AAA 7:1
टेक्स्ट बदलें
#003CC3 7.07:1
या बैकग्राउंड बदलें
इस बैकग्राउंड के ह्यू की कोई भी लाइटनेस इस टेक्स्ट के सामने वहाँ तक नहीं पहुँचती।
बड़ा टेक्स्ट और यूआई हिस्से 3:1
टेक्स्ट बदलें
पहले से पास है। कुछ बदलने की ज़रूरत नहीं।
या बैकग्राउंड बदलें
पहले से पास है। कुछ बदलने की ज़रूरत नहीं।
यह खोज लाइटनेस को 0.005 के क़दमों में बदलती है और पहले पास होने वाले क़दम पर रुक जाती है, इसलिए हर फ़िक्स अपने लक्ष्य से ठीक ऊपर आता है। जब टेक्स्ट अपने ह्यू पर वहाँ तक नहीं पहुँच पाता, तब बैकग्राउंड या दोनों को बदलने से काम बन सकता है; काला या सफ़ेद हमेशा आगे तक पहुँचते हैं, पर रंग की क़ीमत पर। ब्रांड रंग को सुलभ कैसे बनाएँ
लाइटनेस
हर लाइटनेस जो पास होती है
टेक्स्ट रंग, अपने ही ह्यू की हर लाइटनेस पर, और हर एक त्वरित जाँच वाले बैकग्राउंड पर मापा गया। पट्टियाँ दिखाती हैं कि वह हर लक्ष्य तक कहाँ पहुँचता है, और निशान दिखाता है कि वह अभी कहाँ है।
- अभी का टेक्स्ट रंग
- 55%
- बड़ा टेक्स्ट और यूआई हिस्से 3:1
- 0%–62%इस ह्यू की कोई भी लाइटनेस वहाँ तक नहीं पहुँचती।
- सामान्य टेक्स्ट AA 4.5:1
- 0%–53%इस ह्यू की कोई भी लाइटनेस वहाँ तक नहीं पहुँचती।
- सामान्य टेक्स्ट AAA 7:1
- 0%–43%इस ह्यू की कोई भी लाइटनेस वहाँ तक नहीं पहुँचती।
लाइटनेस OKLCH का L है, यानी oklch() की पहली संख्या। ह्यू वही रहता है और क्रोमा सिर्फ़ वहीं घटाया जाता है जहाँ sRGB उसे नहीं दिखा सकता, इसलिए पट्टी का हर रंग ऐसा है जिसे आप इस्तेमाल कर सकते हैं। बीच की रेंज वाला बैकग्राउंड दो पट्टियाँ छोड़ सकता है: एक गहरी, एक हल्की।
गणित
अनुपात कैसे निकाला जाता है
डब्ल्यूसीएजी दोनों रंगों के सापेक्ष ल्यूमिनेंस की तुलना करता है: हर रंग कितनी रोशनी देता है, काले के लिए 0 से सफ़ेद के लिए 1 तक।
अनुपात 1:1 (एक ही रंग दो बार) से 21:1 (सफ़ेद पर काला) तक जाता है।
डब्ल्यूसीएजी 2.2 में परिभाषा- हर चैनल को 255 से भाग देकर 0–255 से 0–1 के पैमाने पर लाएँ।
- sRGB कर्व को हटाएँ। 0.04045 या उससे कम मान को 12.92 से भाग दें; उससे ऊपर के मान में 0.055 जोड़ें, 1.055 से भाग दें और 2.4 की घात लगाएँ।
- तीनों चैनलों को भार देकर जोड़ें: L = 0.2126 R + 0.7152 G + 0.0722 B। हरे का भार सबसे ज़्यादा है, क्योंकि आँख उसी के प्रति सबसे संवेदनशील है।
- दोनों में 0.05 जोड़कर हल्के को गहरे से भाग दें: (L1 + 0.05) / (L2 + 0.05)।
| स्टेप | टेक्स्ट #2563EB | पृष्ठभूमि #DBEAFE |
|---|---|---|
| चैनल, 0–255 | 37, 99, 235 | 219, 234, 254 |
| 255 से भाग देने पर | 0.1451, 0.3882, 0.9216 | 0.8588, 0.9176, 0.9961 |
| sRGB कर्व हटाने पर | 0.0185, 0.1248, 0.8308 | 0.7084, 0.8228, 0.9911 |
| सापेक्ष ल्यूमिनेंस L | 0.1532 | 0.8106 |
(0.8106 + 0.05) / (0.1532 + 0.05) = 4.2363
चार दशमलव तक दिखाया गया है; भाग पूरी सटीकता से होता है। त्वरित जाँच में जोड़ी बदलें, यह हिसाब भी उसके साथ बदलेगा।
4.499 फ़ेल क्यों है
डब्ल्यूसीएजी कहता है कि अनुपात को राउंड नहीं किया जाता: 4.499:1, 4.5:1 को पूरा नहीं करता। राउंड करने वाला टूल फ़ेल को पास जैसा दिखा सकता है।
- सफ़ेद पर हरा #338811, मापा गया
- 4.4963
- दो दशमलव तक राउंड करने पर
- 4.50:1
- दो दशमलव पर काटने पर, जैसे यह साइट दिखाती है
- 4.49:1फ़ेल
इसलिए इस साइट पर हर अनुपात दो दशमलव पर काटा जाता है, कभी ऊपर राउंड नहीं किया जाता।
0.04045 या 0.03928?
मई 2021 तक डब्ल्यूसीएजी में जहाँ 0.03928 छपा था, वहाँ अब 0.04045 है; पुराना आँकड़ा sRGB विनिर्देश के एक पुराने संस्करण से लिया गया था। कोई भी 8-बिट चैनल मान इन दोनों के बीच नहीं पड़ता, इसलिए हर हेक्स रंग का जवाब दोनों तरह एक ही आता है।
- 10/255
- 0.0392
- 11/255
- 0.0431
मॉडल
एक जोड़ी को मापने के छह तरीक़े
ऑडिट और क़ानून डब्ल्यूसीएजी 2 का अनुपात ही इस्तेमाल करते हैं। डिज़ाइन सिस्टम, डिस्प्ले मानक और रंग विज्ञान उसी जोड़ी को दूसरे तरीक़ों से मापते हैं, और वे हमेशा एक-दूसरे से सहमत नहीं होते। हर कार्ड त्वरित जाँच वाली जोड़ी के साथ बदलता है।
-
डब्ल्यूसीएजी 2 कंट्रास्ट अनुपात
अनिवार्य मानक4.23:1
सिर्फ़ बड़ा टेक्स्ट और यूआई हिस्से
हल्के रंग का सापेक्ष ल्यूमिनेंस, गहरे रंग के ल्यूमिनेंस से भाग, और स्क्रीन की चकाचौंध के लिए दोनों में 0.05 जोड़कर।
(L1 + 0.05) / (L2 + 0.05)- स्केल
- 1:1 – 21:1
- यह कहाँ मिलता है
- डब्ल्यूसीएजी 2.2, EN 301 549, Section 508।
-
APCA लाइटनेस कंट्रास्ट
डब्ल्यूसीएजी 3 का एक उम्मीदवारLc +61
कंटेंट टेक्स्ट
परसेप्चुअल कंट्रास्ट, जो जानता है कि कौन-सा रंग टेक्स्ट है: हल्के पर गहरे टेक्स्ट के लिए धनात्मक, गहरे पर हल्के के लिए ऋणात्मक।
Lc, APCA-W3 0.0.98G-4g- स्केल
- Lc −108 – +106
- यह कहाँ मिलता है
- आकार और वेट पर मार्गदर्शन, और डब्ल्यूसीएजी 3 के मसौदे। डब्ल्यूसीएजी 2 और APCA
-
ल्यूमिनेंस मॉड्यूलेशन
ISO 9241-30.68
0.5 का न्यूनतम पूरा करता है
दोनों ल्यूमिनेंस का माइकलसन कंट्रास्ट, चकाचौंध की कोई छूट दिए बिना।
(L1 − L2) / (L1 + L2)- स्केल
- 0 – 1
- यह कहाँ मिलता है
- डिस्प्ले एर्गोनॉमिक्स के मानक। डब्ल्यूसीएजी का 3:1 ISO 9241-3 से आता है, जिसका 0.5 का न्यूनतम मॉड्यूलेशन उसी 3:1 को दूसरे तरीक़े से मापना है।
-
टोन का अंतर
मटीरियल डिज़ाइनΔL* 46.0
40 से 50 का अंतर
CIELAB लाइटनेस में अंतर, काले के लिए 0 से सफ़ेद के लिए 100 तक। मटीरियल डिज़ाइन का HCT कलर स्पेस इसे टोन कहता है।
|L*₁ − L*₂|- स्केल
- 0 – 100
- यह कहाँ मिलता है
- मटीरियल का मोटा नियम: 3:1 के लिए 40 का अंतर, 4.5:1 के लिए 50 का।
ठीक-ठीक मापने पर, 40 का अंतर कभी इससे नीचे नहीं जाता: 3.16:1; पर 50 का अंतर यहाँ तक भी आ सकता है: 4.48:1, यानी 4.5:1 से ज़रा कम। योजना के लिए अंतर का इस्तेमाल करें, फिर अनुपात मापें।
-
रंग का अंतर
CIEDE2000ΔE00 38.7
अलग
दोनों रंग कुल मिलाकर कितने अलग दिखते हैं: लाइटनेस, क्रोमा और ह्यू एक साथ।
ΔE00 (CIE 2001)- स्केल
- 0 – लगभग 100
- यह कहाँ मिलता है
- रंगों का मिलान करना और उन्हें अलग पहचानना, जैसे 1.4.1 रंग का उपयोग में। यह पढ़ने-योग्यता का माप नहीं है: दो रंग बहुत अलग दिख सकते हैं और फिर भी उनमें लगभग कोई कंट्रास्ट न हो।
-
वेबर कंट्रास्ट
पढ़ने पर शोध−0.76
हल्के बैकग्राउंड पर गहरा टेक्स्ट
बैकग्राउंड से टेक्स्ट तक ल्यूमिनेंस में बदलाव, बैकग्राउंड के हिस्से के रूप में, चकाचौंध के लिए वही 0.05 जोड़कर।
(Lt − Lb) / (Lb + 0.05)- स्केल
- −0.95 – +20
- यह कहाँ मिलता है
- दृष्टि और पढ़ने के अध्ययन। इसका अपना कोई पास अंक नहीं है: गहरी ज़मीन पर हल्के टेक्स्ट के लिए डब्ल्यूसीएजी अनुपात ठीक इसी संख्या में 1 जोड़ने के बराबर है।
रंग दृष्टि
वही जोड़ी, रंगांधता की नज़र से
हर पंक्ति एक पूरे दोष का सिमुलेशन है (Machado, 2009)। कंट्रास्ट मुश्किल से बदलता है, क्योंकि सिमुलेशन लाइटनेस बनाए रखते हैं; जो घटता है, वह ह्यू का अंतर है।
| विज़न | जैसा दिखता है | WCAG 2 | APCA | ΔE00 |
|---|---|---|---|---|
| सामान्य रंग दृष्टि | #2563EB / #DBEAFE | 4.23:1 | Lc +61 | 38.7 |
| प्रोटैनोपिया | #0076F0 / #E3EAFF | 3.60:1 | Lc +56 | 36.8 |
| ड्यूटेरानोपिया | #0064E8 / #E0E7FE | 4.27:1 | Lc +61 | 40.7 |
| ट्राइटैनोपिया | #00869D / #D3EEF0 | 3.52:1 | Lc +55 | 33.4 |
| एक्रोमैटोप्सिया | #6D6D6D / #E8E8E8 | 4.22:1 | Lc +62 | 35.9 |
जब सिर्फ़ ह्यू ही दो रंगों को अलग करता है
लाल #DC2626 और हरा #16A34A ज़्यादातर लोगों को बिल्कुल अलग दिखते हैं, फिर भी एक-दूसरे पर टेक्स्ट के रूप में वे सिर्फ़ इतना पाते हैं: 1.46:1. इनका पूरा अंतर ह्यू का है, और ड्यूटेरानोपिया में यह लगभग मिट जाता है। सामान्य रंग दृष्टि में ΔE00: 72.4; ड्यूटेरानोपिया में: 7.9.
इसलिए कंट्रास्ट ही टेक्स्ट को सबके लिए पढ़ने लायक़ रखता है, और जो स्थिति सिर्फ़ लाल या हरे से दिखाई जाए, उसके साथ एक शब्द, आइकन या पैटर्न भी चाहिए।
रंगांधता, हर प्रकार अलग से रंगांधता सिम्युलेटर 1.4.1 रंग का उपयोग
कठिन मामले
जब एक अनुपात पूरा जवाब नहीं होता
फ़ॉर्मूला दो सपाट रंग लेता है। असली इंटरफ़ेस टेक्स्ट को फ़ोटो, ग्रेडिएंट और पारदर्शी परतों पर रखते हैं, और होवर, फ़ोकस और डार्क मोड में रंग बदलते हैं। हर मामले में क्या मापना है, यह रहा।
इमेज पर टेक्स्ट
एक फ़ोटो में हज़ारों बैकग्राउंड रंग होते हैं, और टेक्स्ट को अपने पीछे के सबसे ख़राब रंग पर भी पास होना होता है: हल्के टेक्स्ट के लिए, सबसे हल्के रंग पर। स्क्रिम (टेक्स्ट के नीचे की परत) उस सबसे ख़राब हालत को तय कर देता है।
- 60% काले स्क्रिम पर सफ़ेद टेक्स्ट, एक सफ़ेद पिक्सेल के ऊपर
- #6666665.74:1पास
- वही स्क्रिम 50% पर
- #7F7F7F4.00:1फ़ेल
गहरा पिक्सेल सिर्फ़ कंट्रास्ट बढ़ाता है, इसलिए 60% पर सफ़ेद टेक्स्ट फ़ोटो पर कहीं भी पास होता है। स्क्रिम के बिना, इमेज पिकर से टेक्स्ट के पीछे के सबसे हल्के और सबसे गहरे पिक्सेल लें और दोनों जाँचें। स्वचालित स्कैन एक ही बैकग्राउंड रंग लेता है, इसलिए फ़ोटो पर उसके फ़ैसले को शुरुआत भर मानें।
ग्रेडिएंट
टेक्स्ट के पीछे का सबसे कमज़ोर हिस्सा जाँचें, सिर्फ़ दोनों सिरे नहीं। गुलाबी से नीले ग्रेडिएंट पर गहरा टेक्स्ट #111827 दोनों सिरों पर पास होता है और बीच में फ़ेल।
- 0% 5.02:1
- 25% 4.41:1
- 50% 4.18:1
- 75% 4.34:1
- 100% 4.82:1
background: linear-gradient(in oklab 90deg, #EC4899, #3B82F6);
जब तक आप कोई दूसरा स्पेस न बताएँ, ग्रेडिएंट में हेक्स रंग गामा-एन्कोडेड sRGB में मिलते हैं, जिससे दो ह्यू के बीच का हिस्सा धुँधला पड़ जाता है; हमने जाँचा है कि Chromium इसे ऐसे ही बनाता है। ग्रेडिएंट लाइब्रेरी टूल ग्रेडिएंट पर 20 जगहों पर सफ़ेद और काला टेक्स्ट जाँचता है।
पारदर्शिता
पहले मिलाएँ, फिर मापें। पारदर्शी रंग अपने और अपने नीचे वाली चीज़ के मिश्रण के रूप में बनता है, हर चैनल में अलग से: alpha × रंग + (1 − alpha) × बैकग्राउंड।
- सफ़ेद पर 50% ओपैसिटी वाला काला टेक्स्ट
- #7F7F7F4.00:1फ़ेल
- पास होने वाला सबसे छोटा पूरा प्रतिशत: 54%
- #7575754.60:1पास
ब्राउज़र अल्फ़ा को 1/255 के क़दमों में रखते हैं, इसलिए मिलाया गया चैनल हाथ से किए हिसाब से एक अंक अलग हो सकता है। त्वरित जाँच यह मिलाना आपके लिए करती है: अल्फ़ा चैनल वाला रंग टाइप करें।
होवर, दबी हुई और डिसेबल अवस्थाएँ
हर अवस्था अपनी अलग जोड़ी है, और जिस पर भी टेक्स्ट है उसे पास होना ज़रूरी है। लिंक आम तौर पर होवर पर ही चूकते हैं।
- सफ़ेद पर एक लिंक
- #2563EB5.16:1पास
- होवर पर हल्का किया गया
- #3B82F63.67:1फ़ेल
- इसके बजाय होवर पर गहरा किया गया
- #1D4ED86.70:1पास
डिसेबल कंट्रोल को छूट है; जो कंट्रोल काम करता है उसे हर अवस्था में पास होना होगा। हर अवस्था को हर सतह पर एक साथ जाँचने के लिए पूरा सेट सुलभता लैब टूल में डालें।
फ़ोकस इंडिकेटर
फ़ोकस रिंग एक यूआई हिस्सा है: उसे अपने बगल के रंगों के मुक़ाबले 3:1 चाहिए। सफ़ेद पर फीकी रिंग सबसे आम चूक है।
- सफ़ेद पर एक फीकी रिंग
- #93C5FD1.80:1फ़ेल
- सफ़ेद पर एक गहरी रिंग
- #2563EB5.16:1पास
AAA पर फ़ोकस का रूप (Focus Appearance) एक न्यूनतम आकार और फ़ोकस व बिना फ़ोकस के बीच 3:1 का बदलाव भी तय करता है। फ़ोकस अवरुद्ध नहीं (Focus Not Obscured) स्टिकी हेडर द्वारा फ़ोकस छिपाने के बारे में है, रंग के बारे में नहीं।
2.4.7 फ़ोकस दिखाई देना 2.4.13 फ़ोकस का रूप 2.4.11 फ़ोकस अवरुद्ध नहीं (न्यूनतम)
डार्क मोड
डार्क थीम जोड़ियों का दूसरा सेट है, और हर जोड़ी को उसकी अपनी सतहों पर मापना ज़रूरी है। जो एक्सेंट सफ़ेद पर पास होता है, वह अक्सर गहरे स्लेटी पर फ़ेल हो जाता है।
- सफ़ेद पर नीला
- #2563EB5.16:1पास
- वही नीला गहरे स्लेटी #111827 पर
- #2563EB3.43:1फ़ेल
- उसी स्लेटी पर एक हल्का नीला
- #60A5FA6.97:1पास
डार्क थीम का हर एक्सेंट उसके स्केल के हल्के स्टेप से चुनें और उसे असली सतह पर मापें, काले पर नहीं।
डार्क मोड और अनुकूल रंग एक डार्क यूआई थीम, हर जोड़ी मापी हुई
डब्ल्यूसीएजी 2 और APCA
दूसरी राय, अनिवार्य शर्त नहीं
APCA (सुलभ परसेप्चुअल कंट्रास्ट एल्गोरिदम) यह तौलता है कि कौन-सा रंग टेक्स्ट है और टाइप कितना बड़ा और कितना भारी है। इसे डब्ल्यूसीएजी 3 के लिए एक संभावित पद्धति के रूप में विकसित किया गया था।
- WCAG 2.2
- 4.23:1
- APCA
- Lc +61
त्वरित जाँच वाली जोड़ी के दोनों अंक।
डब्ल्यूसीएजी 2 का अनुपात सममित है: टेक्स्ट और बैकग्राउंड आपस में बदलें, संख्या नहीं बदलती। APCA ऐसा नहीं है: हल्की ज़मीन पर गहरा टेक्स्ट और गहरी ज़मीन पर हल्का टेक्स्ट अलग अंक पाते हैं, और Lc का चिह्न बताता है कि कौन-सा कौन है।
| टेक्स्ट | डब्ल्यूसीएजी 2.2 अनुपात | APCA |
|---|---|---|
| श्वेत | 3.67:1 फेल AA | Lc −69 |
| काला | 5.70:1 पास AA | Lc +40 |
इस नीले पर डब्ल्यूसीएजी 2 काले टेक्स्ट को ऊपर रखता है; APCA सफ़ेद को। जहाँ दोनों असहमत हों, वहाँ ऑडिट और क़ानून डब्ल्यूसीएजी 2 का नतीजा ही इस्तेमाल करते हैं।
- APCA डब्ल्यूसीएजी 2 का हिस्सा नहीं है। कंट्रास्ट के लिए क़ानून जिन मानकों का हवाला देते हैं, जैसे यूरोप में EN 301 549 और अमेरिका में Section 508, वे डब्ल्यूसीएजी 2 का इस्तेमाल करते हैं।
- डब्ल्यूसीएजी 3 एक W3C वर्किंग ड्राफ़्ट है। इसकी कंट्रास्ट पद्धति अभी तय नहीं हुई है, इसलिए अभी इसमें कुछ भी पास या फ़ेल नहीं हो सकता।
- पहले डब्ल्यूसीएजी 2.2 के अनुपात पूरे करें, फिर आकार और वेट पर अतिरिक्त मार्गदर्शन के लिए APCA का इस्तेमाल करें।
- यह साइट APCA-W3 0.0.98G-4g से गणना करती है; ऊपर के अंक उसी संस्करण के हैं।
प्रकार
आकार और वेट लक्ष्य बदल देते हैं
डब्ल्यूसीएजी 2 टेक्स्ट को दो आकारों में बाँटता है। टाइप जितना छोटा और हल्का हो, APCA उतना ज़्यादा कंट्रास्ट माँगता है।
त्वरित जाँच वाली जोड़ी के लिए एक आकार और एक वेट चुनें।
- डब्ल्यूसीएजी 2.2 इसे मानता है
- सामान्य टेक्स्ट
- इसके लिए ज़रूरी AA
- 4.5:1फ़ेल
- इसके लिए ज़रूरी AAA
- 7:1फ़ेल
- APCA ब्रॉन्ज़ को चाहिए
- Lc 90फ़ेल
- जोड़ी के पास है
- 4.23:1 · Lc 61
डब्ल्यूसीएजी 2.2 में बड़ा टेक्स्ट कम से कम 24 px है, या बोल्ड हो तो 18.66 px। APCA का ब्रॉन्ज़ लेवल सिर्फ़ 400 और 700 वेट तय करता है, इसलिए बाक़ी वेट इन दोनों में से नज़दीकी वाले की तरह गिने जाते हैं; यह साइट 400 से कम वेट पर एक लेवल ज़्यादा सख़्त रहती है।
पैलेट
पैलेट की हर जोड़ी
दस तक रंग डालें, जैसे आपके टोकन, ब्रांड रंग या कोई थीम, और हर रंग को बाक़ी हर रंग पर टेक्स्ट के रूप में देखें। डब्ल्यूसीएजी 2 अनुपात से मापें या APCA से।
हेक्स, rgb(), hsl() या नाम, स्पेस, कॉमा या नई पंक्ति से अलग किए हुए।
रंग के रूप में नहीं पढ़े गए:
- मापे गए जोड़े
- 30
- लक्ष्य तक पहुँचे
- 10
| #111827 | #FFFFFF | #2563EB | #DBEAFE | #F59E0B | #DC2626 | |
|---|---|---|---|---|---|---|
| #111827 | एक ही रंग | 17.73:1पास | 3.43:1फ़ेल | 14.54:1पास | 8.26:1पास | 3.67:1फ़ेल |
| #FFFFFF | 17.73:1पास | एक ही रंग | 5.16:1पास | 1.22:1फ़ेल | 2.14:1फ़ेल | 4.82:1पास |
| #2563EB | 3.43:1फ़ेल | 5.16:1पास | एक ही रंग | 4.23:1फ़ेल | 2.40:1फ़ेल | 1.07:1फ़ेल |
| #DBEAFE | 14.54:1पास | 1.22:1फ़ेल | 4.23:1फ़ेल | एक ही रंग | 1.76:1फ़ेल | 3.95:1फ़ेल |
| #F59E0B | 8.26:1पास | 2.14:1फ़ेल | 2.40:1फ़ेल | 1.76:1फ़ेल | एक ही रंग | 2.24:1फ़ेल |
| #DC2626 | 3.67:1फ़ेल | 4.82:1पास | 1.07:1फ़ेल | 3.95:1फ़ेल | 2.24:1फ़ेल | एक ही रंग |
APCA अंक चिह्न सहित होते हैं: हल्के बैकग्राउंड पर गहरे टेक्स्ट के लिए धनात्मक, गहरे पर हल्के के लिए ऋणात्मक; लक्ष्य संख्या के आकार पर लागू होता है। पारदर्शी रंग को सफ़ेद के ऊपर मापा जाता है।
आगे कहाँ
और जाँचें, और इसे अपने काम में उतारें
एक जोड़ी से पूरे पेज, एक पैलेट और एक चालू पैटर्न तक।
- कंट्रास्ट चेकरएक जोड़ी गहराई से: डब्ल्यूसीएजी के साथ APCA, लाइव प्रीव्यू और साझा करने लायक़ लिंक।
- यूआरएल एनालाइज़रकिसी लाइव पेज की हर कंट्रास्ट विफलता, हर एलिमेंट के नाम के साथ। मुफ़्त खाता ज़रूरी है।
- रंग पेजहर नाम वाला रंग काले और सफ़ेद के मुक़ाबले मापा हुआ, उसके सबसे नज़दीकी पास होने वाले शेड के साथ।
- Tailwind रंगTailwind का हर स्केल, हर स्टेप सफ़ेद और काले के मुक़ाबले मापा हुआ।
- चार्ट पैलेटओकाबे–इतो पैलेट, हल्के और गहरे चार्ट पर और वर्णांधता में मापा हुआ।
- डार्क यूआई थीमइस साइट की अपनी डार्क थीम, जिसकी हर टेक्स्ट, सतह और फ़ोकस जोड़ी मापी हुई है।
- सुलभ फ़ॉर्म त्रुटियाँएक परखा हुआ त्रुटि पैटर्न: सारांश, इनलाइन संदेश और स्टेटस, कॉपी करने लायक़ कोड के साथ।
- सुलभता चेकलिस्टरंग और कंट्रास्ट के बिंदु, समीक्षा में टिक करने के लिए तैयार।
आगे पढ़ें: सुलभ रंग डिज़ाइन और डब्ल्यूसीएजी कंट्रास्ट, डेटा विज़ुअलाइज़ेशन में रंग, डब्ल्यूसीएजी का हर मानदंड.
मेथड
यह पेज कैसे जाँचा जाता है
यहाँ का हर अंक साइट के कलर इंजन से आता है, वही जो कंट्रास्ट चेकर के पीछे है, और एक स्वचालित टेस्ट हर अंक को दोबारा गिनता है, इसलिए इस पेज का कोई आँकड़ा कोड से अलग नहीं हो सकता।
यह पेज axe-core से जाँचा जाता है और Chromium में कीबोर्ड से चलाया जाता है, हल्की और गहरी थीम में, डेस्कटॉप और फ़ोन की चौड़ाई पर। इसे स्क्रीन रीडर के साथ नहीं परखा गया है।
अनुपात एक सफलता मानदंड की जाँच है; यह पूरी अनुरूपता समीक्षा नहीं है, और न ही क़ानूनी सलाह।
कोई अंक ग़लत मिला? हमें बताएँ.