WCAG Compliance के लिए Color Contrast कैसे जांचें

अंतिम अपडेट फ़रवरी 13, 2026 4 मिनट पठन

Color contrast accessible design के सबसे impactful — और सबसे commonly overlooked — aspects में से एक है। इसे सही करने का मतलब है कि आपका content कम दृष्टि वाले, color blindness वाले, या bright sunlight में screen पर squinting करने वाले अधिक लोगों द्वारा readable है। इसे गलत करने का मतलब है accessibility audits fail करना, potentially legal requirements का उल्लंघन करना।

WCAG क्या है और यह क्यों Matters करता है?

Web Content Accessibility Guidelines (WCAG) W3C द्वारा published अंतरराष्ट्रीय स्तर पर recognized standards का एक set है। Color contrast "Perceivable" सिद्धांत के अंतर्गत आता है।

WCAG की तीन conformance levels हैं: - Level A — Minimum। इसे fail करने से serious barriers बनती हैं। - Level AA — अधिकांश websites और applications के लिए widely adopted standard। - Level AAA — सर्वोच्च level।

अधिकांश development teams WCAG 2.1 AA को baseline के रूप में target करती हैं।

Contrast Ratios को समझना

एक contrast ratio 4.5:1 या 7:1 जैसे value के रूप में expressed है।

Ratio	Meaning
1:1	कोई contrast नहीं — identical रंग
3:1	Large text के लिए Minimum (WCAG AA)
4.5:1	Normal text के लिए Minimum (WCAG AA)
7:1	Normal text के लिए Enhanced contrast (WCAG AAA)
21:1	Maximum — pure black on pure white

एक Practical Example

एक popular design combination पर विचार करें: medium blue background पर white text।

White (#FFFFFF) on #3B82F6 — Tailwind का blue-500। Contrast ratio लगभग 3.0:1 — normal-sized body text के लिए WCAG AA fail।
White (#FFFFFF) on #1D4ED8 — Tailwind का blue-700। Contrast ratio लगभग 7.2:1 तक rises — normal text के लिए AA और AAA दोनों pass।

WCAG AA बनाम AAA: वास्तविक Requirements क्या हैं?

WCAG AA (standard target)

Text Type	Required Ratio
Normal text (18pt / 14pt bold से कम)	4.5:1
Large text (18pt+ या 14pt+ bold)	3:1
UI components और graphical objects	3:1

WCAG AAA (enhanced target)

Text Type	Required Ratio
Normal text	7:1
Large text	4.5:1

Contrast Requirements से क्या Exempt है?

Decorative content — Images या text जो purely aesthetic purposes serve करते हैं
Disabled UI components — Grayed-out buttons या inactive form fields
Logotypes — Company logo या brand name का हिस्सा text
Incidental text — Background photography में text

ColorFYI Contrast Checker का उपयोग कैसे करें

Contrast Checker WCAG verification को fast और actionable बनाने के लिए designed है:

Step 1: Foreground Color Enter करें

Foreground field में hex code type या paste करें। उदाहरण के लिए, #1E293B enter करें।

Step 2: Background Color Enter करें

Background field में hex code type या paste करें। उदाहरण के लिए, #F8FAFC।

Step 3: Result पढ़ें

Tool immediately display करता है: - Contrast ratio (जैसे, 13.7:1) - Pair WCAG AA और AAA pass या fail करता है - Live preview background पर text rendered दिखाता है

Step 4: Iterate करें

यदि आपका initial combination fail हो, तो text रंग को darken करने या background को lighten करने की कोशिश करें।

डिज़ाइनरों और Developers द्वारा की जाने वाली Common Mistakes

1. केवल Body Text जांचना

Developers अक्सर body copy पर contrast checks run करते हैं लेकिन इन्हें भूल जाते हैं: - Input fields में Placeholder text - Branded colored backgrounds पर Button text - Error messages - Disabled state text - Hover और focus states

2. "मुझे ठीक लगता है" पर निर्भर रहना

मानव contrast की perception अत्यधिक context-dependent है। हमेशा numeric tool का उपयोग करें।

3. Brand Colors को Safe मानना

Brand color palettes अक्सर marketing appeal के लिए built होती हैं, accessibility के लिए नहीं।

4. Semi-transparent Overlays को Ignore करना

Contrast final rendered रंग के खिलाफ measured होना चाहिए, base colors नहीं।

5. Color Blindness के बारे में भूलना

रंगों के एक pair में एक perfectly valid contrast ratio हो सकता है लेकिन फिर भी color blindness वाले users के लिए indistinguishable हो सकता है। Color Blindness Simulator का उपयोग करें।

Contrast Checking को अपने Workflow में Build करना

Design के दौरान

Developers को hand off करने से पहले contrast checks run करें।

Development के दौरान

axe-core या lighthouse जैसे tools का उपयोग करके CI/CD pipeline के हिस्से के रूप में automated contrast checks शामिल करें।

QA के दौरान

किसी भी रंग के लिए Contrast Checker का उपयोग करके manually test करें।

Quick Reference: Common रंग Pairs और उनके Ratios

Foreground	Background	Ratio	AA Normal	AA Large
#000000	#FFFFFF	21:1	Pass	Pass
#374151	#F9FAFB	12.6:1	Pass	Pass
#6B7280	#FFFFFF	5.9:1	Pass	Pass
#9CA3AF	#FFFFFF	2.8:1	Fail	Fail
#FFFFFF	#3B82F6	3.0:1	Fail	Pass
#FFFFFF	#1D4ED8	7.2:1	Pass	Pass

#9CA3AF (Tailwind का gray-400) एक बहुत common failure है — यह placeholder text और secondary labels के लिए frequently उपयोग किया जाता है, लेकिन यह केवल large text के लिए barely pass करता है।

मुख्य बातें

WCAG contrast ratios दो रंगों की relative luminance की तुलना करते हैं — आप उन्हें आंख से accurately estimate नहीं कर सकते।
4.5:1 WCAG AA level पर normal-sized body text के लिए minimum है; 3:1 large text और UI components पर apply होता है।
7:1 normal text के लिए AAA threshold है।
किसी भी foreground/background pair को instantly verify करने के लिए ColorFYI के Contrast Checker का उपयोग करें।
सभी interactive और informational elements जांचें — buttons, labels, placeholders, error messages, और focus states — केवल body text नहीं।
Brand colors अक्सर default रूप से accessible नहीं होते।
Color Blindness Simulator के साथ contrast checking को combine करें।