CalcOpenly
हिन्दी

रंग कॉन्ट्रास्ट जाँचक (WCAG 2.2)

पाठ और पृष्ठभूमि का WCAG 2.2 कॉन्ट्रास्ट अनुपात जाँचें; सामान्य व बड़े पाठ और इंटरफ़ेस भागों के लिए AA/AAA सफलता या असफलता देखें।

AI लेखन टूल से मसौदा तैयारअपडेट किया गया जाँचे गए उदाहरण: 5

#RRGGBB, CSS नाम, rgb(), hsl() या oklch()।
आज़माएँ
कॉन्ट्रास्ट अनुपात
:1
कॉन्ट्रास्ट अनुपात: 14.67 :1
दशमलव स्थान: 2; शून्य की ओर
AA सामान्य पाठ (≥ 4.5:1)
सफल
AA बड़ा पाठ (≥ 3:1)
सफल
AAA सामान्य पाठ (≥ 7:1)
सफल
AAA बड़ा पाठ (≥ 4.5:1)
सफल
इंटरफ़ेस भाग (≥ 3:1)
सफल
पाठ की प्रदीप्ति
0.0215
पृष्ठभूमि की प्रदीप्ति
1.0000

#FFFFFF पर #1F2937 का कॉन्ट्रास्ट अनुपात 14.67:1 है; यह AA सामान्य पाठ; AA बड़ा पाठ; AAA सामान्य पाठ; AAA बड़ा पाठ; इंटरफ़ेस भाग में सफल है।

#FFFFFF पर #1F2937 पाठ

सामान्य पाठ, 16 px: पाठ को आसानी से पढ़ने के लिए पर्याप्त रंग अंतर रखें।

बड़ा पाठ, 24 px (18 pt): पाठ को आसानी से पढ़ने के लिए पर्याप्त रंग अंतर रखें।

बड़ा बोल्ड पाठ, 19 px (लगभग 14 pt): पाठ को आसानी से पढ़ने के लिए पर्याप्त रंग अंतर रखें।

अनुपात कहाँ आता है

असफलबड़ाAAAAA134.572114.67:1
गणना कैसे होती है S

  1. हर चैनल को रैखिक करें

    Clin={C/12.92C≤0.04045((C+0.055)/1.055)2.4C>0.04045(R,G,B)lin,f=(0.0137,0.0222,0.0382)\begin{aligned} C_{lin} &= \begin{cases} C/12.92 & C \le 0.04045 \\ ((C + 0.055)/1.055)^{2.4} & C > 0.04045\end{cases} \\ (R, G, B)_{lin,f} &= (0.0137, 0.0222, 0.0382) \end{aligned}

    WCAG में sRGB रूपांतरण सीमा 0.04045 है। पुराना मान 0.03928 मई 2021 में बदला गया; कोई 8-बिट चैनल इन दोनों सीमाओं के बीच नहीं आता।

  2. सापेक्ष प्रदीप्ति

    Lf=0.02153,Lb=1.00000L_f = 0.02153,\quad L_b = 1.00000

  3. कॉन्ट्रास्ट अनुपात (हल्का ÷ गहरा)

    1.00000+0.050.02153+0.05=14.6791\frac{1.00000 + 0.05}{0.02153 + 0.05} = 14.6791

    तुलना बिना गोल किए होती है: AA सामान्य पाठ 4.5; बड़ा पाठ और इंटरफ़ेस भाग 3; AAA सामान्य और बड़ा पाठ क्रमशः 7 और 4.5।

रंग कॉन्ट्रास्ट जाँचक (WCAG 2.2) के बारे में

WCAG में कॉन्ट्रास्ट (L1 + 0.05) ÷ (L2 + 0.05) है, जहाँ L1 हल्के और L2 गहरे रंग की सापेक्ष प्रदीप्ति है। रैखिक sRGB चैनलों में लाल का भार 0.2126, हरे का 0.7152 और नीले का 0.0722 है। अनुपात समान रंगों के 1:1 से सफ़ेद पर काले के 21:1 तक होता है।

पाठ, बटन और आइकन प्रकाशित करने से पहले डिज़ाइनर और डेवलपर इसे जाँच सकते हैं। डिफ़ॉल्ट सफ़ेद पृष्ठभूमि पर #1F2937 स्लेट रंग का पाठ 14.67:1 देता है और पाँचों जाँचों में सफल है। सफ़ेद पर #777777 का 4.47:1, सामान्य पाठ के AA हेतु ज़रूरी 4.5:1 से थोड़ा कम है।

दिखाया अनुपात दो दशमलव अंकों पर काटा जाता है और तुलना मूल अगोलित मान से होती है; इसलिए 4.499:1, 4.5:1 सीमा पर असफल है। अल्फ़ा अनदेखा है; अर्ध-पारदर्शी रंग को पहले उसकी पृष्ठभूमि पर मिलाएँ। यहाँ f अग्रभूमि और b पृष्ठभूमि को दर्शाता है।

पाठ और पृष्ठभूमि का कॉन्ट्रास्ट जाँचें

हल्के रंग की relative luminance L1 और गहरे की L2 हो तो अनुपात (L1 + 0.05) ÷ (L2 + 0.05) है। सीमा 1:1 से 21:1 है। सामान्य पाठ के लिए WCAG 2.2 AA में कम से कम 4.5:1, बड़े पाठ के लिए 3:1 चाहिए। W3C का मानदंड 1.4.3 इन सीमाओं और अपवादों को समझाता है।

यह दो चुने हुए रंगों की जाँच है; पूरे पेज की accessibility का प्रमाणपत्र नहीं। पाठ का आकार, इंटरैक्टिव अवस्था और वास्तविक पृष्ठभूमि भी सही चुननी होगी।

Luminance और उदाहरण की गणना

हर sRGB चैनल C को 255 से भाग दें। C ≤ 0.04045 पर C/12.92, अन्यथा ((C + 0.055)/1.055)^2.4 से linear करें। फिर L = 0.2126R + 0.7152G + 0.0722B है। सूत्र WCAG की luminance परिभाषा में है।

#1F2937 पर लगभग L = 0.0215 और सफ़ेद पर L = 1 है। बिना बीच में rounding किए अनुपात लगभग 14.679:1 है। उपकरण दो दशमलव तक नीचे काटकर 14.67:1 दिखाता है। पाठ/पृष्ठभूमि उलटने से अनुपात वही रहता है।

सीमा के पास के रंग

स्थितिदिखाया गया अनुपातAA सामान्य पाठAAA सामान्य पाठ
मूल उदाहरण14.67पासपास
सफ़ेद पर काला21.00पासपास
सफ़ेद पर #7777774.47असफलअसफल
सफ़ेद पर #7676764.54पासअसफल
दोनों सफ़ेद1.00असफलअसफल

#777777 पर लगभग 4.478 है; इसे 4.5 तक ऊपर गोल कर पास कहना गलत होगा। #767676 थोड़ा गहरा होने से 4.54 पर AA पास करता है। AAA सामान्य पाठ की सीमा 7:1 और बड़े पाठ की 4.5:1 है। बड़े पाठ का अर्थ कम से कम 18 pt, या 14 pt bold है।

वास्तविक डिज़ाइन में सही जोड़ी चुनें

फ़ोटो या gradient पर औसत रंग पर्याप्त नहीं है। पाठ के पीछे सबसे खराब कॉन्ट्रास्ट वाले हिस्से को जाँचें। Hover, focus, selected और dark theme की जोड़ियाँ अलग हो सकती हैं। इंटरफ़ेस के जरूरी किनारों और अर्थपूर्ण graphics के लिए गैर-पाठ कॉन्ट्रास्ट मानदंड का 3:1 नियम और उसकी शर्तें देखें।

Alpha यहाँ अनदेखा है। 50% पारदर्शी काले को सफ़ेद पर पहले मिलाएँ; दिखने वाला gray लगभग 4:1 है और सामान्य पाठ में AA असफल है। उसे opaque काला मानने पर भ्रामक 21:1 आएगा। Logos, सजावटी पाठ और disabled controls के अपवाद को सामान्य body text पर लागू न करें।

रंग को दूसरी notation में लिखने के लिए रंग कन्वर्टर देखें। रंग से अर्थ समझ में आता है या नहीं, यह रंग-दृष्टि सिम्युलेटर में अलग जाँच है।

हल किए गए उदाहरण

सफ़ेद पर काला अधिकतम है

पाठ का रंग
#000000
पृष्ठभूमि का रंग
#FFFFFF
कॉन्ट्रास्ट अनुपात
21.00 :1
AA सामान्य पाठ (≥ 4.5:1)
सफल
AAA सामान्य पाठ (≥ 7:1)
सफल

जाँच का स्रोत: उदाहरण जाँच: WCAG 2.2 परिभाषा: (1 + 0.05) / (0 + 0.05) = 21

सफ़ेद पर #777777 AA से थोड़ा कम

पाठ का रंग
#777777
पृष्ठभूमि का रंग
#FFFFFF
कॉन्ट्रास्ट अनुपात
4.48 :1
AA सामान्य पाठ (≥ 4.5:1)
असफल
AA बड़ा पाठ (≥ 3:1)
सफल
इंटरफ़ेस भाग (≥ 3:1)
सफल

जाँच का स्रोत: स्वतंत्र गणना

सफ़ेद पर #767676 AA में सफल

पाठ का रंग
#767676
पृष्ठभूमि का रंग
#FFFFFF
कॉन्ट्रास्ट अनुपात
4.54 :1
AA सामान्य पाठ (≥ 4.5:1)
सफल
AAA सामान्य पाठ (≥ 7:1)
असफल
AAA बड़ा पाठ (≥ 4.5:1)
सफल

जाँच का स्रोत: स्वतंत्र गणना

एक ही रंग उसी पर (सीमा जाँच)

पाठ का रंग
teal
पृष्ठभूमि का रंग
#008080
कॉन्ट्रास्ट अनुपात
1.00 :1
AA बड़ा पाठ (≥ 3:1)
असफल
इंटरफ़ेस भाग (≥ 3:1)
असफल

जाँच का स्रोत: उदाहरण जाँच: WCAG 2.2 परिभाषा: (L + 0.05) / (L + 0.05) = 1

सवाल

WCAG में कितना कॉन्ट्रास्ट चाहिए?

AA में सामान्य पाठ के लिए कम-से-कम 4.5:1 और बड़े पाठ के लिए 3:1 चाहिए (मानदंड 1.4.3)। आवश्यक इंटरफ़ेस भागों और अर्थपूर्ण ग्राफ़िक्स के लिए 3:1 (1.4.11) है। AAA में सामान्य पाठ 7:1 और बड़ा पाठ 4.5:1 (1.4.6) चाहिए। लोगो, निष्क्रिय नियंत्रण और केवल सजावटी पाठ को इन नियमों में छूट है।

WCAG में बड़ा पाठ किसे मानते हैं?

कम-से-कम 18 पॉइंट, या बोल्ड होने पर 14 पॉइंट पाठ बड़ा माना जाता है। CSS में यह सामान्य वज़न पर 24 px और बोल्ड पर लगभग 18.67 px है। W3C इसे डिफ़ॉल्ट पाठ के लगभग 1.5 em और 1.2 em से जोड़ता है; बहुत पतले अक्षरों में अधिक आकार या कॉन्ट्रास्ट चाहिए हो सकता है। बड़े पाठ को AA में 4.5:1 के बजाय 3:1 चाहिए।

सफ़ेद पर AA में सफल सबसे हल्का धूसर पाठ कौन-सा है?

#767676, जो #FFFFFF पर लगभग 4.54:1 देता है। एक चरण हल्का #777777 यहाँ 4.47:1 है और असफल है: WCAG सटीक अनुपात की 4.5 से तुलना करता है, ऊपर गोल करने की छूट नहीं देता। बड़े पाठ के लिए 3:1 पाने वाला धूसर पर्याप्त है, जैसे #949494 का लगभग 3.03:1।

क्या WCAG 2.2 ने कॉन्ट्रास्ट नियम बदले?

नहीं। WCAG 2.2, 5 अक्टूबर 2023 को W3C अनुशंसा बना और फ़ोकस, लक्ष्य आकार व प्रमाणीकरण जैसे विषयों पर 9 मानदंड जोड़े। कॉन्ट्रास्ट मानदंड 1.4.3, 1.4.6 और 1.4.11, WCAG 2.1 जैसे ही हैं। 2.1 में सफल रंग युग्म उन्हीं 4.5:1 और 3:1 सीमाओं पर 2.2 में भी सफल है।

क्या पाठ और पृष्ठभूमि रंगों का क्रम मायने रखता है?

अनुपात के लिए नहीं। सूत्र हल्के रंग की प्रदीप्ति ऊपर रखता है, इसलिए #1F2937 पर सफ़ेद और सफ़ेद पर #1F2937, दोनों 14.67:1 दिखाते हैं। पढ़ने का अनुभव बदल सकता है: फ़ॉन्ट और स्क्रीन के अनुसार गहरी पृष्ठभूमि पर हल्का पाठ पतला या मोटा लग सकता है। इसलिए छोटे आकारों पर वास्तविक रूप भी जाँचें।

इस कैलकुलेटर के बारे में

r=L1+0.05L2+0.05L=0.2126Rlin+0.7152Glin+0.0722Blin\begin{aligned} r &= \frac{L_1 + 0.05}{L_2 + 0.05} \\[4pt] L &= 0.2126 R_{lin} + 0.7152 G_{lin} \\ &\quad + 0.0722 B_{lin} \end{aligned}

स्रोत

  1. W3C WCAG 2.2 — Success Criteria 1.4.3, 1.4.6 and 1.4.11; definitions of contrast ratio and relative luminance
  2. W3C Understanding SC 1.4.3 — large text is at least 18 pt, or 14 pt bold

संदर्भों से जाँच की गई

इस कैलकुलेटर में स्वतंत्र स्रोतों के उत्तरों वाले 5 हल किए गए उदाहरण शामिल हैं। ये परीक्षण समूह में चलते हैं और आप इन्हें यहाँ भी चला सकते हैं।

यह कैलकुलेटर अपनी वेबसाइट पर लगाएँ

जहाँ कैलकुलेटर दिखाना है, वहाँ इसे पेस्ट करें। इसका उपयोग मुफ़्त है, यहाँ किए गए सुधार इसमें अपने आप पहुँच जाते हैं, और उसके नीचे की श्रेय पंक्ति मूल पेज का लिंक देती है, जिससे आपके पाठक पूरा संस्करण देख सकते हैं।

ऊँचाई
एम्बेड का पूर्वावलोकन देखें

श्रेय पंक्ति बनी रहने दें। यही एकमात्र शर्त है, और इसी से ये कैलकुलेटर मुफ़्त रहते हैं।

संबंधित कैलकुलेटर