WCAG कलर कंट्रास्ट रेशियो कैलकुलेटर

गणना दर्ज करें

फ़ोरग्राउंड (टेक्स्ट) रंग हेक्स

बैकग्राउंड रंग हेक्स

परिणाम

कंट्रास्ट रेशियो

21.00:1

WCAG 2.x कंट्रास्ट रेशियो

WCAG स्तर	आवश्यकता	परिणाम
AA — सामान्य टेक्स्ट	≥ 4.5:1	पास
AA — बड़ा टेक्स्ट	≥ 3:1	पास
AAA — सामान्य टेक्स्ट	≥ 7:1	पास
AAA — बड़ा टेक्स्ट	≥ 4.5:1	पास

फ़ोरग्राउंड ल्यूमिनेंस	0
बैकग्राउंड ल्यूमिनेंस	1

WCAG कलर कंट्रास्ट रेशियो क्या है?

कंट्रास्ट रेशियो यह बताता है कि दो रंग एक-दूसरे से कितने अलग दिखाई देते हैं — आमतौर पर टेक्स्ट और उसके बैकग्राउंड के बीच। वेब कंटेंट एक्सेसिबिलिटी गाइडलाइन्स (WCAG 2.x) इसी रेशियो के आधार पर न्यूनतम सीमाएँ तय करती हैं, ताकि कमज़ोर दृष्टि या रंग पहचानने में कठिनाई वाले लोग भी कंटेंट को आसानी से पढ़ सकें। यह रेशियो 1:1 (दोनों रंग बिल्कुल एक जैसे) से लेकर 21:1 (सफ़ेद पर शुद्ध काला) तक होता है।

Contrast ratio compares the relative luminance of a foreground and background color.

इस कैलकुलेटर का उपयोग कैसे करें

फ़ोरग्राउंड (टेक्स्ट) रंग और बैकग्राउंड रंग को हेक्स वैल्यू के रूप में डालें, जैसे #1a73e8 या संक्षिप्त रूप #fff। कैलकुलेटर हर रंग को लीनियराइज़ करता है, उसका सापेक्ष ल्यूमिनेंस (relative luminance) निकालता है, और कंट्रास्ट रेशियो के साथ-साथ हर WCAG सीमा के विरुद्ध पास/फेल का परिणाम भी दिखाता है।

फ़ॉर्मूला समझें

रेशियो है \((L_1 + 0.05) / (L_2 + 0.05)\), जहाँ \(L_1\) हल्के रंग का सापेक्ष ल्यूमिनेंस है और \(L_2\) गहरे रंग का।

$$\text{Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05} \\[1.5em] \text{where}\quad \left\{ \begin{aligned} L_1 &= \max(L_{\text{Foreground}},\, L_{\text{Background}}) \\ L_2 &= \min(L_{\text{Foreground}},\, L_{\text{Background}}) \end{aligned} \right.$$

सापेक्ष ल्यूमिनेंस निकालने के लिए हर sRGB चैनल को 0–1 की वैल्यू में बदला जाता है, फिर उसे लीनियराइज़ किया जाता है (जो चैनल 0.03928 या उससे कम हैं, उन्हें 12.92 से भाग दिया जाता है; इससे चमकीले चैनलों के लिए \(((c+0.055)/1.055)^{2.4}\) इस्तेमाल होता है), और फिर इन्हें \(0.2126\cdot R + 0.7152\cdot G + 0.0722\cdot B\) के रूप में जोड़ा जाता है। 0.05 का ऑफ़सेट शून्य से भाग होने से रोकता है और स्क्रीन की हल्की चमक (ambient flare) को भी ध्यान में रखता है।

$$c_{lin} = \begin{cases} \dfrac{c}{12.92} & c \le 0.03928 \\[0.4em] \left(\dfrac{c+0.055}{1.055}\right)^{2.4} & c > 0.03928 \end{cases}$$$$L = 0.2126\,R_{lin} + 0.7152\,G_{lin} + 0.0722\,B_{lin}$$

Each color's relative luminance (L) is computed, then combined as (L1 + 0.05) / (L2 + 0.05).

उदाहरण के साथ हल

सफ़ेद (#FFFFFF) पर काला टेक्स्ट (#000000): काले का ल्यूमिनेंस 0 है, सफ़ेद का 1। रेशियो =

$$\frac{1 + 0.05}{0 + 0.05} = \frac{1.05}{0.05} = 21:1$$

— यानी अधिकतम संभव मान, जो हर स्तर पर आराम से पास होता है।

अक्सर पूछे जाने वाले सवाल

मुझे कितना कंट्रास्ट चाहिए? WCAG AA के लिए सामान्य टेक्स्ट हेतु 4.5:1 और बड़े टेक्स्ट (≥18pt या 14pt बोल्ड) हेतु 3:1 ज़रूरी है। AAA के लिए क्रमशः 7:1 और 4.5:1 चाहिए।

क्या रंगों का क्रम मायने रखता है? नहीं। फ़ॉर्मूला हमेशा हल्के ल्यूमिनेंस को गहरे से भाग देता है, इसलिए फ़ोरग्राउंड और बैकग्राउंड को आपस में बदलने पर भी वही रेशियो मिलता है।

सिर्फ़ ब्राइटनेस से काम क्यों नहीं चलता? रंगों के बारे में इंसानी नज़र की समझ नॉन-लीनियर होती है और हरे रंग की ओर अधिक झुकी होती है। यही वजह है कि ल्यूमिनेंस में साधारण औसत के बजाय गामा करेक्शन और हर चैनल के अलग गुणांक इस्तेमाल किए जाते हैं।