WCAG contrast Checker
दो रंगों के बीच contrast अनुपात जांचें। हर text आकार पर WCAG AA और AAA के लिए pass/fail निर्णय।
Aa — Large text 24px / 18px bold
Aa — Normal text 16px
Aa — Small text 12px
JXXR1 द्वारा बनाया गया · ♥ स्पॉन्सर करें · ☕ मुझे coffee दिलाएं
यह किसके लिए है?
WCAG (Web Content Accessibility Guidelines) text और उसके background के बीच न्यूनतम contrast अनुपात परिभाषित करता है ताकि कम दृष्टि वाले, color-blindness वाले या चमक की स्थितियों में लोग अभी भी इसे पढ़ सकें। यह टूल उस अनुपात की गणना करता है (1:1 = समान, 21:1 = शुद्ध सफ़ेद पर शुद्ध काला) और आपको बताता है कि क्या आपका रंग जोड़ा WCAG 2.1 स्तर AA या AAA पास करता है, सामान्य text, बड़े text और UI components के लिए अलग-अलग। गणित ठीक W3C luminance formula का पालन करता है।
कब इस्तेमाल करें
- यह जांचना कि क्या आपका brand रंग एक सफ़ेद card पर accessibility मानकों को पूरा करता है।
- एक button text रंग चुनना जो brand-रंग वाले background के विरुद्ध AA पास करता है।
- शिपिंग से पहले एक design system को token by token audit करना।
- एक ठोस pass/fail निर्णय के साथ एक stakeholder को रंग-परिवर्तन अनुरोध को सही ठहराना।
- यह जांचना कि आपके कम contrast वरीयता वाले उपयोगकर्ता वास्तव में क्या देखेंगे।
थ्रेशोल्ड
- सामान्य text (18pt / 14pt bold से कम): AA के लिए 4.5:1, AAA के लिए 7:1।
- बड़ा text (≥18pt या ≥14pt bold): AA के लिए 3:1, AAA के लिए 4.5:1।
- UI components & graphics (icons, focus rings, form borders, सूचना देने वाले chart elements): AA के लिए 3:1 (WCAG 2.1 §1.4.11)। कोई AAA स्तर नहीं।
आम गलतियाँ
- "बड़ा text" आपके सोचने से बड़ा है। 18pt मोटे तौर पर 24px है। 14pt bold मोटे तौर पर 19px bold है। 16px पर body copy बड़ा text नहीं है — इसे 4.5:1 thresholdकी आवश्यकता है।
- एक busy फोटो पर हल्का text fail हो जाएगा। Contrast अनुपात विशिष्ट pixels के बीच होता है — एक dark gradient overlay करें या text को एक नियंत्रित background देने के लिए एक solid panel का उपयोग करें।
- Anti-aliasing contrast को नरम करता है। 4.5:1 floor है, लक्ष्य नहीं। आरामदायक पठन आमतौर पर 7:1 या बेहतर चाहता है, विशेष रूप से body copy के लिए।
- Hover और focus states गिने जाते हैं। यदि आपका button rest पर AA पास करता है लेकिन hover पर fail हो जाता है, तो यह एक वास्तविक accessibility bug है।
- WCAG 2.1 बनाम APCA। WCAG 3 के लिए प्रस्तावित नया APCA (Accessible Perceptual Contrast Algorithm), अलग और यकीनन बेहतर संख्याएं देता है — लेकिन WCAG 2.1 कानूनी मानक है जिसका अधिकांश अधिकार क्षेत्र अभी भी संदर्भ देते हैं। EN 301 549, ADA, या AA-conformance दावों को पूरा करते समय इस टूल की संख्याओं का उपयोग करें।
- पारदर्शिता के साथ pad न करें। एक ज्ञात background पर 50% alpha foreground का एक अलग प्रभावी contrast होता है — मूल के विरुद्ध नहीं, बल्कि वास्तविक रेंडर किए गए रंग के विरुद्ध गणना करें।