कैसे इस्तेमाल करें
- Colors चुनें या hex, rgb(), hsl(), oklch() अथवा color name लिखें।
- Ratio और चार WCAG results पढ़ें तथा नीचे live preview देखें।
- Fail होने पर suggestion के पास Use this colour दबाकर उसे लागू करें।
विकल्पों की जानकारी
- AA
- Normal text के लिए कम से कम 4.5:1 और large text के लिए 3:1 (18 pt / 24 px या 14 pt bold) चाहिए। अधिकांश regulations और design systems AA मांगते हैं।
- AAA
- Normal text के लिए 7:1 और large text के लिए 4.5:1, उन contents के लिए जहाँ readability सबसे महत्वपूर्ण है।
- Suggested colour
- OKLCH में hue और chroma रखते हुए केवल lightness बदलता है और ऐसा closest color खोजता है जो barely pass करे।
- Transparent colours
- Transparency वाला text color background के ऊपर जैसा दिखाई देता है, उसी रूप में measure होता है।
अनुपात कैसे निकलता है
हर रंग को sRGB से रैखिक प्रकाश में, फिर सापेक्ष ल्यूमिनेंस में बदला जाता है:
linear = c ÷ 12.92 if c ≤ 0.04045
linear = ((c + 0.055) ÷ 1.055) ^ 2.4 otherwise (c is 0–1)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)हरे का वज़न सबसे ज़्यादा है क्योंकि आँख उसके प्रति सबसे संवेदनशील है। सफ़ेद बैकग्राउंड पर कुछ नतीजे:
| टेक्स्ट का रंग | अनुपात | नतीजा |
|---|---|---|
| #000000 | 21 : 1 | AAA |
| #0066cc | 5.57 : 1 | AA सामान्य टेक्स्ट, AAA सामान्य टेक्स्ट नहीं |
| #767676 | 4.54 : 1 | AA सामान्य टेक्स्ट |
| #777777 | 4.48 : 1 | AA सामान्य टेक्स्ट फ़ेल, AA बड़ा टेक्स्ट पास |
WCAG की परिभाषाएँ Understanding Success Criterion 1.4.3 में हैं।
अक्सर पूछे जाने वाले सवाल
Contrast कैसे calculate होता है?
WCAG 2.x formula से: (हल्की relative luminance + 0.05) ÷ (गहरी relative luminance + 0.05), जिससे 1:1 से 21:1 मिलता है। Black on white 21:1 है।
#767676 का इतना उल्लेख क्यों होता है?
White पर 4.5:1 तक पहुँचने वाला सबसे हल्का grey लगभग #767676 (4.54:1) है, इसलिए secondary text के लिए common lower limit है।
क्या icons और borders भी जाँचने होते हैं?
हाँ। WCAG 2.1 से UI components और graphics — button borders, inputs और icons — को adjacent colors के सामने कम से कम 3:1 चाहिए।
प्राइवेसी
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपकी फ़ाइलें और टेक्स्ट आपके डिवाइस पर ही प्रोसेस होते हैं और हमारे सर्वर पर कभी अपलोड नहीं होते।