HEX, RGB और HSL रंग बदलकर अग्रभूमि/पृष्ठभूमि का WCAG contrast जांचें.
इनपुट / नतीजा
इनपुट, आउटपुट और कॉपी क्रियाएं इसी मुख्य हिस्से में हैं. उदाहरण और जांच नीचे अलग रखे गए हैं.
लोकल सेशन
इनपुट स्थिति केवल इस ब्राउज़र में रहती है, ताकि बिना खाते के पिछला काम लौटाया जा सके.
मुख्य इनपुट/आउटपुट पूरा होने के बाद ही उदाहरण, जांच सूची और संबंधित साधन खोलें.
रंग accessibility जांचें
Foreground/background colors बदलें, WCAG contrast report copy करें, फिर release से पहले CSS tokens और visual assets जांचें.
HEX/RGB/HSL pairs बदलें, AA/AAA thresholds जांचें और accessibility report copy करें.
Commit से पहले CSS token names, selectors और duplicate color values जांचें.
Chosen background पर brand initials या small icons साफ दिखते हैं या नहीं जांचें.
CSS snippet review करें
CSS snippet format करें, CSS review report copy करें, फिर minification और color contrast जांचें.
Snippet format करें और selector, token, cascade, specificity तथा checklist signals वाला report copy करें.
Compact CSS share करना हो तो compression, comment removal और minified report जांचें.
Snippet visible foreground/background colors बदले तो color tokens को WCAG contrast से जांचें.
image data URL जांचें
Base64 image preview करें, MIME type जांचें, फिर share से पहले contrast देखें.
कॉपी से पहले
आम असफल स्थितियां
संबंधित टूल
गाइड
मुख्य इनपुट/आउटपुट पूरा होने के बाद ही उदाहरण, जांच सूची और संबंधित साधन खोलें.
#2563eb on #ffffffrgb(24,24,27) on #fafafahsl(220 90% 56%) on hsl(0 0% 100%)रंग उदाहरण
कॉन्ट्रास्ट अनुपात
5.17
AA
अग्रभूमि
#2563eb
पृष्ठभूमि
#ffffff
WCAG लक्ष्य
AA 4.5:1 / AAA 7:1
3:1 केवल बड़े या मोटे टेक्स्ट के लिए रखें.
डिज़ाइन मान कॉपी करने से पहले AA/AAA सीमा, पारदर्शिता सीमा और प्रकाशमानता अंतर जांचें.
AA सामान्य टेक्स्ट
पास
4.5:1
AA बड़ा टेक्स्ट
पास
3:1
AAA सामान्य टेक्स्ट
फेल
7:1
AA अंतर
+0.67
धनात्मक मान सामान्य टेक्स्ट AA पार करता है.
प्रकाशमानता अंतर
0.847
बड़ा अंतर आम तौर पर पढ़ने में बेहतर होता है.
रंग accessibility report
Color values, thresholds, warnings और accessibility checks वाला WCAG contrast handoff report copy करें.
Contrast status
AA
कॉन्ट्रास्ट अनुपात
5.17
AA सामान्य टेक्स्ट
पास
4.5:1
AA बड़ा टेक्स्ट
पास
3:1
AAA सामान्य टेक्स्ट
फेल
7:1
AA अंतर
+0.67
प्रकाशमानता अंतर
0.847
Alpha input
नहीं
Review notes
Accessibility checklist
# रंग accessibility report - जांच समय: Browser copy time - अग्रभूमि इनपुट: #2563eb - अग्रभूमि HEX: #2563eb - अग्रभूमि RGB: rgb(37, 99, 235) - अग्रभूमि HSL: hsl(221, 83.2%, 53.3%) - पृष्ठभूमि इनपुट: #ffffff - पृष्ठभूमि HEX: #ffffff - पृष्ठभूमि RGB: rgb(255, 255, 255) - पृष्ठभूमि HSL: hsl(0, 0.0%, 100.0%) - कॉन्ट्रास्ट अनुपात: 5.17 - Contrast status: AA - AA सामान्य टेक्स्ट: पास (4.5:1) - AA बड़ा टेक्स्ट: पास (3:1) - AAA सामान्य टेक्स्ट: फेल (7:1) - AA अंतर: +0.67 - प्रकाशमानता अंतर: 0.847 - Alpha handling: Foreground/background fields में alpha input नहीं मिला. ## Review notes - AA पास है, लेकिन AAA text के लिए 7:1 contrast चाहिए. ## Accessibility checklist - Pair को final rendered background पर test करें, सिर्फ solid preview पर नहीं. - Ship करने से पहले hover, focus, disabled, visited और selected states जांचें. - Large-text threshold पर भरोसा करने से पहले actual font size और weight जांचें. - Foreground और background tokens साथ रखें ताकि pair जानबूझकर reuse हो. - Errors, warnings या required actions बताने के लिए सिर्फ रंग का उपयोग न करें.
अग्रभूमि
#2563eb
पृष्ठभूमि
#ffffff
कॉपी के लिए तैयार नतीजा
अग्रभूमि HEX: #2563eb
अग्रभूमि RGB: rgb(37, 99, 235)
अग्रभूमि HSL: hsl(221, 83.2%, 53.3%)
पृष्ठभूमि HEX: #ffffff
पृष्ठभूमि RGB: rgb(255, 255, 255)
पृष्ठभूमि HSL: hsl(0, 0.0%, 100.0%)
कॉन्ट्रास्ट अनुपात: 5.17 (AA सामान्य टेक्स्ट)