Image Contrast Checker
WCAG contrast जांचने के लिए एक image में किन्हीं भी दो points पर click करें — AA, AAA, large-text thresholds। केवल hex codes नहीं बल्कि वास्तविक screenshots verify करने वाले designers के लिए बनाया गया।
यह किसके लिए है?
WCAG contrast checkers को आमतौर पर दो hex codes चाहिए होते हैं — पर एक real screenshot पर accessibility pass कर रहे designer के पास hex codes नहीं, बल्कि pixels होते हैं। यह tool आपको एक image upload करने देता है (एक screenshot, एक hero design, एक busy background पर एक logo) और किन्हीं दो points पर click करने देता है। यह cursor के नीचे का color sample करता है (1 pixel या 3×3 / 5×5 average) और दोनों के बीच WCAG 2.1 contrast ratio compute करता है। AA, AA-large, AAA, AAA-large, और UI components threshold (1.4.11) के लिए निर्णय। सब कुछ browser में।
कब इस्तेमाल करें
- एक screenshot verify करना जिसका source आपके पास नहीं है — एक marketing page, एक competitor का UI, एक PDF।
- एक busy photographic background पर एक logo को audit करना जहाँ "background color" एक single value नहीं है।
- एक gradient के साथ या translucent text के पीछे worst-case contrast check करना।
- Design को rebuild किए बिना दो UI states (e.g. button rest vs hover) की त्वरित तुलना करना।
Sampling कैसे काम करता है
एक single-pixel sample precise है पर noisy — anti-aliased edges, JPEG artefacts, और subpixel rendering सभी पड़ोसी pixels को भिन्न बनाते हैं। 5×5 average आमतौर पर designed UI के लिए वही है जो आप चाहते हैं: यह वह color लौटाता है जिसे एक human describe करेगा, click के नीचे exact pixel नहीं। एक logo edge या एक sharp color boundary check करते समय 1px का उपयोग करें।
आम गलतियाँ
- Anti-aliasing। Text edges उन colors पर average हो जाते हैं जो design intent में नहीं हैं। एक letter stroke के बीच में click करें, उसके edge पर नहीं।
- JPEG compression। उच्च compressed images में flat regions में color drift होता है। 5×5 average drift पर smooth करता है।
- Translucent layers। Contrast के लिए rendered pixel मायने रखता है, source color नहीं। यह tool rendered pixel पढ़ता है — exactly जो आप चाहते हैं।
- आप colors check कर रहे हैं, design intent नहीं। यदि आपका real-world rendered button rest पर AA पास करता है पर दूसरे screenshot में hover पर fail हो जाता है, तो दोनों states accessibility failures हैं।
- Image scaling। Tool performance के लिए large images को नीचे scale करता है। Sampled pixel displayed pixel को reflect करता है; यदि आपको एक बहुत छोटे UI element का pixel-perfect sampling चाहिए, तो uploading से पहले image को crop करें।