कलर कन्वर्टर और कंट्रास्ट चेकर

कन्वर्टर एक ही रंग को HEX (#rrggbb), RGB (rgb(r, g, b)) और HSL (hsl(h, s%, l%)) के बीच रियल-टाइम में बदलता है, ताकि आप अपने डिज़ाइन सिस्टम जो भी फ़ॉर्मैट उपयोग करे — पेस्ट करके बाक़ी दो पा सकें। कंट्रास्ट चेकर अग्रभूमि और पृष्ठभूमि लेकर दोनों को sRGB गामा कर्व से रैखिक बनाता है, फिर WCAG 2.x कंट्रास्ट अनुपात के साथ सामान्य और बड़े टेक्स्ट के लिए AA / AAA परिणाम दिखाता है।

उदाहरण

इनपुट — एक सामान्य ब्रांड ब्लू:

HEX  #2563eb
RGB  rgb(37, 99, 235)
HSL  hsl(221, 83%, 53%)

सफ़ेद (#ffffff) पृष्ठभूमि के साथ:

Contrast ratio   5.17:1
WCAG AA normal   Pass
WCAG AA large    Pass
WCAG AAA normal  Fail (needs 7:1)
WCAG AAA large   Pass

यह रंग जोड़ी WCAG AAA में क्यों फ़ेल होती है?

कंट्रास्ट और कनवर्ज़न की ये सबसे आम चूकें ध्यान रखने योग्य हैं:

• AA बड़ा और AA सामान्य को भ्रमित करना। बड़ा टेक्स्ट केवल 3:1 चाहता है, इसलिए जो लिंक H1 में ठीक दिखे वह बॉडी आकार में फ़ेल हो सकता है। 3.5:1 जोड़ी हेडलाइन में पास होती है पर पैराग्राफ़ में फ़ेल।
• HSL लाइटनेस को कंट्रास्ट का प्रॉक्सी मान लेना। hsl(0, 100%, 50%) (लाल) और hsl(240, 100%, 50%) (नीला) दोनों की L=50% है पर उनकी ल्यूमिनेंस बहुत अलग। कंट्रास्ट हमेशा RGB से निकालें, HSL लाइटनेस से नहीं।
• अल्फ़ा कंपोज़िटिंग भूल जाना। सफ़ेद पर rgba(0, 0, 0, 0.6) टेक्स्ट असल में #666666 के बराबर है। अर्ध-पारदर्शी मान नहीं, फ़्लैट किया हुआ HEX जाँचें।
• ग़लत HEX लंबाई। #fff #ffffff तक विस्तारित होता है, पर #ffff अल्फ़ा बाइट के साथ 4-अंकीय लघु रूप है। जब HEX चुपचाप अस्वीकार हो, अंक-संख्या दोबारा देखें।
• display-P3 और sRGB को मिलाना। Figma जैसी टूल्स में वाइड-गैमट मोड से लिए रंग sRGB से बाहर हो सकते हैं, ब्राउज़र उन्हें क्लिप कर देंगे। HEX कॉपी करने से पहले स्रोत टूल में sRGB में कन्वर्ट करें।
• केवल शुद्ध सफ़ेद के साथ कंट्रास्ट जाँचना। असली लेआउट में टेक्स्ट #f3f4f6 पर या फ़ोटो पर हो तो दिखाई देने वाला कंट्रास्ट कम होगा। असली पृष्ठभूमि से जाँचें।

WCAG AA पास करने के लिए कितना कंट्रास्ट अनुपात चाहिए?

WCAG 2.1 AA सामान्य बॉडी टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट के लिए 3:1 माँगता है, जहाँ बड़ा यानी कम-से-कम 18 pt (24 px) रेगुलर या 14 pt (18.66 px) बोल्ड। UI कॉम्पोनेंट और ग्राफ़िकल ऑब्जेक्ट्स को पृष्ठभूमि पर 3:1 चाहिए। AAA सामान्य टेक्स्ट को 7:1 और बड़े टेक्स्ट को 4.5:1 तक ऊँचा करता है।

जो HSL मैं वापस टाइप करता हूँ उसकी RGB थोड़ी भिन्न क्यों निकलती है?

ज़्यादातर टूल HSL को पूर्णांक प्रतिशत में संग्रह करते हैं, इसलिए RGB → HSL → RGB की यात्रा में हर चैनल पर 1 इकाई खिसक सकती है। यह बदलाव JND के भीतर है और स्क्रीन पर अदृश्य; पर अगर एक-समान राउंड-ट्रिप चाहिए तो HEX या RGB को सच्चाई का स्रोत रखें और HSL को केवल दृश्य मानें।

क्या यह टूल कंट्रास्ट के लिए sRGB गामा करेक्शन उपयोग करता है?

हाँ। कंट्रास्ट WCAG 2.x सूत्र से गणना होता है: हर sRGB चैनल को गामा कर्व से रैखिक करना, रिलेटिव ल्यूमिनेंस निकालना, और (L1 + 0.05) / (L2 + 0.05) लेना। चैनलों का साधारण औसत या भोली HSL लाइटनेस भ्रामक संख्या देती है और WCAG परिणाम से मेल नहीं खाएगी।

अल्फ़ा या अर्ध-पारदर्शी रंगों को कैसे संभालें?

WCAG कंट्रास्ट ठोस पृष्ठभूमि के विरुद्ध परिभाषित है, इसलिए पहले अग्रभूमि को असली बैकड्रॉप पर कंपोज़िट करके अल्फ़ा फ़्लैटन करें। जैसे, सफ़ेद पेज पर 50% ब्लैक टेक्स्ट ब्लॉक असल में #ffffff पर #808080 है। अर्ध-पारदर्शी मान की जगह उस फ़्लैट HEX को चेकर में दें।

क्या HEX #rgb और #rrggbb एक ही हैं?

हाँ। 3-अंकीय लघु रूप हर निब्बल को दोहराकर विस्तारित होता है, इसलिए #f0c #ff00cc बनता है। 4-अंकीय और 8-अंकीय रूप अल्फ़ा चैनल जोड़ते हैं। यह टूल 3, 6 और 8-अंकीय HEX स्वीकार करता है, और चूँकि WCAG ठोस कंपोज़िट रंग चाहता है, अल्फ़ा बाइट को कंट्रास्ट के लिए केवल सूचनात्मक मानता है।

क्या आप मेरे टाइप या चुने हुए रंग सहेजते हैं?

नहीं। हम आपके परीक्षण, परिवर्तन या कंट्रास्ट जाँच के लिए उपयोग किए किसी भी रंग का कोई रिकॉर्ड नहीं रखते। पिकर में टाइप या ड्रैग किया कुछ भी टैब बंद होते ही हट जाता है — न लॉग, न रंग मानों पर एनालिटिक्स। स्वयं देखना हो तो ब्राउज़र के डेवलपर टूल्स में झाँकें।