कलर कन्वर्टर - HEX, RGB, HSL और WCAG कंट्रास्ट
कलर कन्वर्टर और कंट्रास्ट जाँच
HEX, rgb(), hsl() या CSS रंग नाम — चारों पढ़े जाते हैं।
शेड्स
वही रंग, ग्यारह अलग चमक स्तरों पर। किसी पर क्लिक करके उसे मौजूदा रंग बनाएँ।
कंट्रास्ट
दो रंगों के बीच का अनुपात, ठीक वैसे मापा गया जैसा WCAG परिभाषित करता है।
| जोड़ी | अनुपात | AA (4.5:1) | AAA (7:1) |
|---|
यह टूल क्या करता है
किसी रंग को एक लेखन-शैली से दूसरी में बदलना पाँच पंक्तियों का गणित है। कठिन सवाल यह है कि उस रंग का पाठ वाक़ई पढ़ा जा सकता है या नहीं, और उस जवाब के लिए एक क़दम चाहिए जिसे अधिकांश टूल छोड़ देते हैं। दोनों इसी पेज पर हैं, उसी रंग पर जो आपने लिखा।
इसे कैसे इस्तेमाल करें
- 1 किसी भी शैली में रंग लिखें, या पिकर का उपयोग करें।
- 2 जो शैली चाहिए उसे कॉपी करें, या किसी शेड पर क्लिक करके उस पर चले जाएँ।
- 3 कंट्रास्ट तालिका पढ़ें। जिसे भी “फेल” चिह्नित किया गया है, वह किसी न किसी के लिए पढ़ना कठिन होगा।
वही रंग HSL में अलग क्यों दिखता है
HSL पूर्ण डिग्री और पूर्ण प्रतिशत पर गोल करता है, इसलिए HSL में बदलकर वापस लाने पर हमेशा वही बाइट मान नहीं मिलते जिनसे शुरू किया था। इसीलिए यहाँ दिखाया गया HEX हमेशा आपकी डाली गई कीमत से निकलता है, HSL से होकर लौटे मान से नहीं — वरना हर क्लिक पर खाना एक क़दम खिसकता रहता।
कंट्रास्ट के अंक क्या बताते हैं
अनुपात दो एक जैसे रंगों के 1:1 से लेकर शुद्ध सफ़ेद पर शुद्ध काले के 21:1 तक जाता है। नीचे दिए गए मानदंड वही हैं जिनसे यह टूल जाँच करता है।
| 4.5:1 | सामान्य पाठ, WCAG AA |
| 3:1 | बड़ा या मोटा पाठ, WCAG AA |
| 7:1 | सामान्य पाठ, WCAG AAA |
| 21:1 | संभव सबसे ऊँचा अनुपात: सफ़ेद पर काला |
वह क़दम जिसे अधिकांश टूल छोड़ देते हैं
सापेक्ष चमक चैनल मानों का औसत नहीं है। हर चैनल को पहले रैखिक करना पड़ता है, क्योंकि HEX कोड के अंक गामा-एन्कोडेड होते हैं, प्रकाश के अनुपाती नहीं। यह क़दम छोड़ने पर अनुपात फिर भी एक विश्वसनीय दिखने वाला अंक देता है, बस ग़लत; और त्रुटि मध्य टोनों में सबसे बड़ी होती है, जहाँ अधिकांश इंटरफ़ेस रंग रहते हैं।
कंट्रास्ट ज़रूरी है, पर्याप्त नहीं
कोई जोड़ी 4.5:1 पास कर सकती है और फिर भी बुरा चुनाव हो सकती है: वर्णांधता कुछ जोड़ियों को ऊँचे अनुपात पर भी अलग नहीं करने देती, और अर्थ कभी केवल रंग से नहीं ढोया जाना चाहिए। यहाँ के “पास” को न्यूनतम सीमा पार करना समझें, डिज़ाइन पर फ़ैसला नहीं।