रंग कंट्रास्ट चेकर
टेक्स्ट का रंग और बैकग्राउंड का रंग डालें और WCAG कंट्रास्ट रेशियो पाएं, साथ में सामान्य और बड़े टेक्स्ट के लिए AA और AAA का पास या फ़ेल, लाइव प्रीव्यू के साथ।
आपके ब्राउज़र में चलता है; आप जो भी लिखते हैं वह आपके डिवाइस से बाहर नहीं जाता
कंट्रास्ट रेशियो –
| उपयोग | ज़रूरत | नतीजा |
|---|---|---|
| सामान्य टेक्स्ट, AA | 4.5:1 | |
| सामान्य टेक्स्ट, AAA | 7:1 | |
| बड़ा टेक्स्ट, AA | 3:1 | |
| बड़ा टेक्स्ट, AAA | 4.5:1 |
WCAG 2.x कंट्रास्ट रेशियो इस्तेमाल होता है, जो सिर्फ़ ल्यूमिनेंस कंट्रास्ट नापता है। यह लाल-हरे जैसे रंगांधता वाले जोड़े, पतले या छोटे फ़ॉन्ट, या तस्वीरों और ग्रेडिएंट पर लिखे टेक्स्ट को नहीं परख सकता। HEX (3, 4, 6 या 8 अंक), rgb(), hsl() और CSS रंगों के नाम पढ़ता है; CSS के बाकी रंग-सिंटैक्स को जहाँ हो सके आपका ब्राउज़र पढ़ता है।
रंग का कंट्रास्ट कैसे जाँचें
- टेक्स्ट का रंग और बैकग्राउंड का रंग HEX,
rgb(),hsl()याnavyजैसे CSS रंग के नाम से लिखें या पेस्ट करें, या हर एक को कलर पिकर से चुनें। - कंट्रास्ट रेशियो पढ़ें, जो बिना कंट्रास्ट के 1:1 से लेकर सफ़ेद पर काले के 21:1 तक होता है।
- तालिका देखें: सामान्य टेक्स्ट को AA के लिए 4.5:1 और AAA के लिए 7:1 चाहिए, और बड़े टेक्स्ट को AA के लिए 3:1 और AAA के लिए 4.5:1। प्रीव्यू दिखाता है कि टेक्स्ट कैसा दिखता है।
कंट्रास्ट रेशियो का मतलब
WCAG कंट्रास्ट रेशियो दो रंगों की चमक की तुलना करता है। हर रंग को 0 (काला) से 1 (सफ़ेद) के बीच की सापेक्ष ल्यूमिनेंस में बदला जाता है, sRGB मानों से गामा कर्व हटाकर और तीनों चैनलों को इस हिसाब से तौलकर कि आँख को वे कितने चमकीले लगते हैं: हरा सबसे ज़्यादा, फिर लाल, फिर नीला। रेशियो हल्की ल्यूमिनेंस में 0.05 जोड़कर गहरी ल्यूमिनेंस में 0.05 जोड़ने से भाग देने पर आता है, इसलिए यह एक जैसे रंगों के 1:1 से लेकर सफ़ेद पर काले के 21:1 तक जाता है।
WCAG 2 टेक्स्ट के साइज़ के हिसाब से न्यूनतम सीमाएँ तय करता है। सामान्य टेक्स्ट को स्तर AA के लिए 4.5:1 और ज़्यादा सख़्त स्तर AAA के लिए 7:1 चाहिए। बड़ा टेक्स्ट, जो पढ़ने में आसान होता है, AA के लिए 3:1 और AAA के लिए 4.5:1 माँगता है। बड़ा यानी कम से कम 24 px, या बोल्ड में लगभग 18.7 px।
रेशियो सिर्फ़ हल्केपन को देखता है। दो रंग पास होकर भी रंगांध लोगों के लिए अलग पहचानना मुश्किल हो सकते हैं, और पतले फ़ॉन्ट या फ़ोटो पर लिखे टेक्स्ट को न्यूनतम सीमा से ज़्यादा कंट्रास्ट चाहिए हो सकता है। इस आँकड़े को निचली सीमा मानें और प्रीव्यू भी देखें।
डेवलपर और AI एजेंट के लिए
कंट्रास्ट कोड में, बिल्ड स्टेप में या किसी AI एजेंट से जाँचना है? इसके लिए एक API है: देखें रंग कंट्रास्ट चेकर API गाइड।
सुझाव
- पहले किसी रंग को HEX, RGB, HSL और CMYK के बीच बदलना है? रंग कन्वर्टर इस्तेमाल करें।
- मेल खाते रंगों का सेट बना रहे हैं? कलर पैलेट जनरेटर हर स्वैच के लिए सफ़ेद और काले के मुक़ाबले कंट्रास्ट दिखाता है।
- स्क्रीनशॉट के किसी पिक्सल का रंग चाहिए? इमेज से रंग चुनें इस्तेमाल करें।
अक्सर पूछे जाने वाले सवाल
कंट्रास्ट रेशियो कैसे निकाला जाता है?
WCAG 2.x के सूत्र से: हर रंग की सापेक्ष ल्यूमिनेंस उसके sRGB मानों से निकाली जाती है, और रेशियो (हल्का + 0.05) भाग (गहरा + 0.05) होता है। यह 1:1 (कोई कंट्रास्ट नहीं) से 21:1 (सफ़ेद पर काला) तक जाता है। रेशियो दो दशमलव तक दिखता है और उसके पास बिना राउंड किया मान भी दिखता है।
AA और AAA के लिए कितने रेशियो चाहिए?
सामान्य टेक्स्ट को AA के लिए 4.5:1 और AAA के लिए 7:1 चाहिए। बड़े टेक्स्ट, यानी कम से कम 24 px सामान्य या लगभग 18.7 px बोल्ड, को AA के लिए 3:1 और AAA के लिए 4.5:1 चाहिए। रेशियो को सीमा पार कराने के लिए ऊपर राउंड नहीं किया जाता: 4.499:1 को 4.49 दिखाया जाता है और वह सामान्य टेक्स्ट के AA में फ़ेल है।
सफ़ेद पर #777777 AA में फ़ेल क्यों होता है?
इसका कंट्रास्ट 4.48:1 है, जो सामान्य टेक्स्ट के लिए AA की माँग 4.5:1 से ज़रा कम है, इसलिए यह बॉडी टेक्स्ट के लिए फ़ेल होता है पर बड़े टेक्स्ट के लिए पास, जिसे सिर्फ़ 3:1 चाहिए। #767676 जैसा थोड़ा गहरा स्लेटी 4.54:1 तक पहुँचता है और पास हो जाता है।
पारदर्शी रंगों का क्या होता है?
आंशिक रूप से पारदर्शी टेक्स्ट के रंग को पहले बैकग्राउंड के साथ मिलाया जाता है, जैसे स्क्रीन उसे दिखाती है, और मिलाए हुए रंग को नापा जाता है। आंशिक रूप से पारदर्शी बैकग्राउंड को सफ़ेद पर टिका माना जाता है। मिलाने के बाद चैनल पूर्ण संख्याओं में राउंड किए जाते हैं।
क्या पास होने वाला रेशियो मतलब टेक्स्ट एक्सेसिबल है?
अपने-आप में नहीं। रेशियो सिर्फ़ हल्केपन का कंट्रास्ट नापता है। यह रंगांधता वाले जोड़ों, बहुत पतले फ़ॉन्ट, फ़ोटो या ग्रेडिएंट पर टेक्स्ट, या इस बारे में कुछ नहीं बताता कि कहीं मतलब सिर्फ़ रंग से तो नहीं दिखाया जा रहा। इसे न्यूनतम सीमा मानें, गारंटी नहीं।
क्या कुछ सर्वर पर भेजा जाता है?
नहीं। रंग आपके ब्राउज़र में पढ़े और नापे जाते हैं, और आप जो भी लिखते हैं वह आपके डिवाइस से बाहर नहीं जाता।