सुनिश्चित करें कि हर कोई आपका टेक्स्ट पढ़ सके
सफेद रंग पर हल्का ग्रे टेक्स्ट, पेस्टल बटन पर सफेद टेक्स्ट, या डार्क बैकग्राउंड पर नीले लिंक डिज़ाइन फ़ाइल में तो आकर्षक लग सकते हैं, लेकिन असली यूज़र्स के लिए इन्हें पढ़ना मुश्किल हो सकता है। यह कंट्रास्ट चेकर किसी भी टेक्स्ट और बैकग्राउंड कलर के बीच कंट्रास्ट रेशियो को मापता है और तुरंत बताता है कि यह Web Content Accessibility Guidelines (WCAG) के AA और AAA लेवल को पास करता है या नहीं — और अगर नहीं, तो यह पास होने वाले सबसे करीबी रंग का सुझाव देता है।
विशेषताएँ
- 1:1 से 21:1 तक कंट्रास्ट रेशियो।
- नॉर्मल टेक्स्ट, बड़े टेक्स्ट और UI कंपोनेंट्स के लिए WCAG 2 AA और AAA रिज़ल्ट्स।
- कोई भी कलर फ़ॉर्मेट: HEX, RGB, HSL या CSS कलर के नाम।
- हेडलाइन, बॉडी और छोटे टेक्स्ट के साथ लाइव प्रिव्यू।
- एक्सेसिबल कलर के सुझाव जो आपके रंग (hue) को बनाए रखते हैं।
- लाइट-ऑन-डार्क वर्ज़न चेक करने के लिए स्वैप बटन।
एक नज़र में WCAG की आवश्यकताएँ
| कंटेंट | AA | AAA |
|---|---|---|
| नॉर्मल टेक्स्ट | 4.5:1 | 7:1 |
| बड़ा टेक्स्ट (≥ 24 px, या ≥ 19 px बोल्ड) | 3:1 | 4.5:1 |
| UI कंपोनेंट्स और ग्राफ़िक्स | 3:1 | — |
| लोगो और डेकोरेटिव टेक्स्ट | कोई आवश्यकता नहीं | कोई आवश्यकता नहीं |
सामान्य कॉम्बिनेशन
| टेक्स्ट | बैकग्राउंड | रेशियो | AA नॉर्मल टेक्स्ट |
|---|---|---|---|
| #000000 | #FFFFFF | 21:1 | पास |
| #767676 | #FFFFFF | 4.54:1 | पास (पास होने वाला सबसे हल्का ग्रे) |
| #999999 | #FFFFFF | 2.85:1 | फ़ेल |
| #FFFFFF | #0EA5E9 | 2.77:1 | फ़ेल |
| #FFFFFF | #0369A1 | 5.93:1 | पास |
संबंधित टूल्स
कलर कनवर्टर से रंगों को विभिन्न फॉर्मेट में बदलें, कलर पैलेट जनरेटर से एक पूरा पैलेट बनाएं, या इमेज कलर पिकर का उपयोग करके स्क्रीनशॉट से सटीक रंग चुनें।