रंग विपरीतता चेकर

अभिगम्यता के लिए WCAG 2.1 कंट्रास्ट अनुपात का परीक्षण करें।

आपका डेटा आपके डिवाइस से बाहर नहीं जाता
बड़ा टेक्स्ट (24 px बोल्ड)
16 px पर सामान्य टेक्स्ट · सभी अक्षर और अंक यहाँ प्रयुक्त हैं।
-
कंट्रास्ट अनुपात
AA सामान्य
≥ 4.5:1
-
AA बड़ा
≥ 3:1
-
AAA सामान्य
≥ 7:1
-
AAA बड़ा
≥ 4.5:1
-

कैसे उपयोग करें

  1. अग्रभूमि (टेक्स्ट) रंग और पृष्ठभूमि रंग चुनें।
  2. कंट्रास्ट अनुपात तुरंत अपडेट होता है।
  3. सामान्य और बड़े टेक्स्ट के लिए WCAG रेटिंग (AA/AAA) जाँचें।
  4. रंग अदला-बदली करने के लिए Swap पर क्लिक करें।

अक्सर पूछे जाने वाले प्रश्न

WCAG क्या है?

WCAG (Web Content Accessibility Guidelines) वेब सामग्री को सुलभ बनाने के लिए अंतर्राष्ट्रीय मानक हैं। स्तर AA सबसे अधिक आवश्यक मानक है। स्तर AAA उच्चतम है।

«बड़े टेक्स्ट» के रूप में क्या गिना जाता है?

बड़ा टेक्स्ट कम से कम 18 pt (24 px) या 14 pt (18.66 px) बोल्ड के रूप में परिभाषित है। इसकी कंट्रास्ट आवश्यकता कम है क्योंकि इसे पढ़ना आसान है।

कौन सा कंट्रास्ट अनुपात लक्षित करें?

मुख्य टेक्स्ट के लिए, कम से कम 4.5:1 (AA) का लक्ष्य रखें। सर्वोत्तम अभिगम्यता के लिए, 7:1 (AAA) का लक्ष्य रखें। शीर्षक और बड़े टेक्स्ट को कम से कम 3:1 की आवश्यकता होती है।

WCAG वास्तव में क्या measure करता है

Web accessibility में contrast का मतलब colors कितने अलग दिखते हैं नहीं है, यह दो colors के बीच relative luminance का precise ratio है। Luminance एक perceptual approximation है कि एक typical sighted observer को color कितना bright appear होता है। Ratio 1:1 (identical luminance वाले दो colors, एक-दूसरे के against invisible) से 21:1 (pure black #000000 against pure white #ffffff) तक चलता है। तीन normative WCAG success criteria इस ratio का use करते हैं:

4.5:1 floor arbitrary नहीं है। WCAG का अपना derivation normal vision के लिए 3:1 ANSI baseline use करता है जिसे 20/40 acuity वाले users के लिए 1.5 से multiply किया जाता है (वह threshold जो legal low vision define करने के लिए अक्सर use होती है)। 4.5 = 3 × 1.5। 7:1 AAA threshold same logic को roughly 20/80 acuity तक extend करती है। Logos, brand names, और incidental या decorative text exempt हैं, लेकिन बाकी सब rule के अंतर्गत आता है।

Formula

WCAG technique G18 में contrast formula के तीन steps हैं। Inputs 8-bit sRGB channel values (0-255) हैं, हर एक पहले 0-1 range में convert होता है:

  1. sRGB linearise करें (gamma curve undo करें)। हर channel V के लिए: यदि V ≤ 0.04045, तो V_linear = V ÷ 12.92; otherwise V_linear = ((V + 0.055) ÷ 1.055)^2.4। (Older WCAG documents 0.03928 use करते थे; W3C ने formal sRGB spec से match करने के लिए errata-update करके 0.04045 कर दिया, numerical difference negligible है।)
  2. Relative luminance compute करें: L = 0.2126·R + 0.7152·G + 0.0722·B (linearised)। Weights CIE 1931 standard observer's photopic luminosity function से आते हैं, human eye green (~71%), फिर red (~21%), फिर blue (~7%) के लिए सबसे ज़्यादा sensitive है। इसीलिए white पर pure blue text contrast fail कर सकता है भले ही colors बहुत different दिखते हों।
  3. Ratio लें: (L1 + 0.05) ÷ (L2 + 0.05), जहां L1 lighter color है और L2 darker। 0.05 offset typical display पर ambient flare model करता है, और ratio को near-black color होने पर blow up होने से रोकता है।

Black on white का worked example: white का L = 1.0 है, black का L = 0 है, इसलिए ratio है (1 + 0.05) ÷ (0 + 0.05) = 21। यह sRGB में maximum possible contrast है।

«Large text» क्या माना जाता है?

WCAG large-scale text को कम से कम 18 point (regular weight) या 14 point bold के रूप में define करता है। W3C-stated 1pt = 1.333px पर CSS pixels में converted:

अधिकांश browsers default body text को 16px / 12pt पर set करते हैं, large नहीं। एक common mistake किसी भी heading को large treat करना है; 18px regular पर styled <h3> अभी भी 4.5:1 normal-text rule के अंतर्गत आता है।

प्रसिद्ध edge case: सफ़ेद पर #767676

Minimalism की चाह रखने वाले designers अक्सर body text के लिए mid-greys choose करते हैं। दो values जो eye को identical लगती हैं WCAG line के opposite sides पर होती हैं:

ForegroundBackgroundRatioAA सामान्य
#000000#ffffff21.00पास (अधिकतम)
#595959#ffffff~7.0पास + AAA
#767676#ffffff4.54पास (बस)
#777777#ffffff4.48Fail
#959595#ffffff3.00विफल (केवल large text)
#ffff00#ffffff1.07Fail

एक-character hex shift, #767676 और #777777 के बीच का difference: same-looking grey को passing से failing में flip करता है, क्योंकि WCAG explicitly ratios को round up करने की मनाही करता है। WebAIM specifically #777777 को commonly-used ऐसे grey के रूप में call out करता है जो AA meet नहीं करता। यह single gotcha real-world site scans में automated-audit failures की measurable share drive करती है।

Formula कहां कम पड़ती है

Relative-luminance formula fast और deterministic है, लेकिन इसमें well-documented perceptual flaws हैं:

APCA (Accessible Perceptual Contrast Algorithm) WCAG 3 के लिए prototyped candidate replacement है। यह roughly −108 से +106 तक single signed Lc value return करता है, polarity-aware है, और font-weight / size lookup include करता है। APCA currently एक beta non-commercial reference है, legal conformance target नहीं (production sites को still WCAG 2.1 / 2.2 AA target करना चाहिए) लेकिन यह अधिक accurate readability check है, especially dark mode के लिए। Chrome DevTools में अपने color picker में APCA preview built-in है।

यह legally क्यों Important है

WCAG 2.2 5 October 2023 को W3C Recommendation बना, लेकिन contrast criteria 2.1 से unchanged carry forward होते हैं। Color contrast digital accessibility lawsuits में सबसे ज़्यादा cited issues में से एक है, और कई jurisdictions इसे effectively mandatory बनाते हैं:

Color Contrast बनाम Color Blindness

एक common point of confusion: WCAG ratio luminance-based है और most color-blind users के लिए useful रहता है, luminance से derived 4.5:1 ratio एक strong perceptual signal correspond करता है भले ही hue cues lost हों। इसीलिए contrast criteria एक separate criterion के साथ-साथ sit करते हैं, 1.4.1 Use of Color, जो information convey करने के लिए अकेले color पर rely करने की मनाही करता है। Contrast यह नहीं बताता कि deuteranope के लिए red-vs-green chart legible है या नहीं, केवल यह कि हर color individually chart background से contrast करता है या नहीं। Charts और stateful UI को color के ऊपर patterns, labels या shapes layer करने की ज़रूरत है।

Practical Checklist

अधिक Questions

Pure yellow white पर fail क्यों करता है जब यह bright दिखता है?

White पर yellow (#ffff00) 1.07:1 है, almost कोई contrast नहीं। Luminance formula green को 71% और red को 21% weight करता है, इसलिए yellow (R+G) की luminance white के बहुत close है। Black पर yellow, इसके विपरीत, 19.56:1 है, जो known सबसे legible combinations में से एक है, इसीलिए यह road signs और hard-hat warnings के लिए use होता है।

क्या मुझे हमेशा AAA target करना चाहिए?

नहीं। WCAG खुद कहता है: «It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.» AA लगभग हर जगह legal target है; AAA high-stakes informational reading के लिए है (long-form content, general public के लिए intended government documents, accessibility-first publications)।

क्या automated tools हर contrast failure catch कर सकते हैं?

नहीं। axe-core, Lighthouse और similar audits text-on-flat-color failures reliably flag करते हैं, लेकिन वे background images, CSS gradients, pseudo-element backgrounds, या CSS border colors पर overlaid text test नहीं कर सकते, उन्हें «incomplete» flag किया जाता है और manual review चाहिए। इस जैसा live picker image से dominant background color sample करने और shipping से पहले केवल text/background pair check करने के लिए independently useful है।

क्या यह tool transparency / alpha support करता है?

यह page opaque hex pairs check करता है। यदि आपके text या background में alpha है, तो actual contrast इस पर depend करता है कि उसके पीछे क्या है, आपको पहले composited foreground compute करना होगा और resulting opaque colour check करनी होगी।

क्या कुछ server को भेजा जाता है?

नहीं। Luminance formula और ratio आपके browser में compute होते हैं; colors आपके device से नहीं निकलते। Page एक बार load होने के बाद offline काम करता है।

संबंधित टूल

रंग कनवर्टर मुफ़्त ऑनलाइन कलर पैलेट जनरेटर CSS ग्रेडिएंट जनरेटर