Color Contrast Checker

अग्रभूमि और पृष्ठभूमि रंगों के बीच WCAG AA और AAA कंट्रास्ट अनुपात जांचें

उदाहरण देखें

अग्रभूमि (टेक्स्ट) रंग

पृष्ठभूमि रंग

बड़े टेक्स्ट का नमूना (18px बोल्ड)

सामान्य टेक्स्ट नमूना — आपने जो पृष्ठभूमि रंग चुना है, उस पर आपका बॉडी टेक्स्ट इस प्रकार दिखेगा।

कंट्रास्ट अनुपात

14.63:1

WCAG अनुपालन

पास

सामान्य AA

पास

सामान्य AAA

पास

बड़ा AA

पास

बड़ा AAA

WCAG AAसामान्य टेक्स्ट: 4.5:1, बड़ा टेक्स्ट (18px+ या 14px बोल्ड): 3:1

WCAG AAAसामान्य टेक्स्ट: 7:1, बड़ा टेक्स्ट (18px+ या 14px बोल्ड): 4.5:1

कलर कंट्रास्ट जांच क्या है?

कलर कंट्रास्ट जांच, अग्रभूमि रंग (सामान्यतः टेक्स्ट) और पृष्ठभूमि रंग के बीच चमक का अंतर मापती है, फिर परिणाम को अनुपात के रूप में व्यक्त करती है। 1:1 का अनुपात अर्थात रंग समान हैं; 21:1 अधिकतम है, जो सफेद पृष्ठभूमि पर काले रंग या इसके विपरीत को दर्शाता है। W3C द्वारा प्रकाशित Web Content Accessibility Guidelines (WCAG) न्यूनतम कंट्रास्ट अनुपात निर्धारित करती हैं, जिन्हें टेक्स्ट को पूरा करना आवश्यक है ताकि कम दृष्टि वाले या रंग दोष से पीड़ित लोग उसे पढ़ सकें।

कंट्रास्ट अनुपात का सूत्र WCAG 2.x से आता है और सापेक्ष चमक (relative luminance) पर निर्भर करता है — यह माप है कि कोई रंग मानव आँख को कितना चमकीला दिखाई देता है। सापेक्ष चमक की गणना प्रत्येक sRGB चैनल को रैखिक बनाकर (गामा हटाकर) और ITU-R BT.709 गुणांकों के अनुसार चैनलों को भार देकर की जाती है: लाल के लिए 0.2126, हरे के लिए 0.7152, और नीले के लिए 0.0722। हरे रंग का योगदान सर्वाधिक है क्योंकि मानव आँख हरे प्रकाश के प्रति सबसे अधिक संवेदनशील है। अनुपात तब (L1 + 0.05) / (L2 + 0.05) होता है, जहाँ L1 अधिक चमकीले रंग की चमक है।

WCAG दो अनुपालन स्तर परिभाषित करती है। स्तर AA के लिए सामान्य आकार के टेक्स्ट हेतु कम से कम 4.5:1 और बड़े टेक्स्ट (18px या उससे अधिक, या 14px बोल्ड) हेतु 3:1 का कंट्रास्ट अनुपात आवश्यक है। स्तर AAA इसे क्रमशः 7:1 और 4.5:1 तक बढ़ाता है। WCAG 2.1 ने Success Criterion 1.4.11 भी प्रस्तुत किया, जिसके अनुसार बॉर्डर, आइकन और फ़ोकस संकेतकों जैसे गैर-टेक्स्ट UI घटकों के लिए 3:1 अनुपात आवश्यक है।

यह कंट्रास्ट चेकर क्यों उपयोग करें?

आँख से कंट्रास्ट जाँचना अविश्वसनीय है। आपके कैलिब्रेटेड डिस्प्ले पर भिन्न दिखने वाले रंग निम्न-गुणवत्ता वाली लैपटॉप स्क्रीन पर, सीधी धूप में, या deuteranopia से पीड़ित किसी व्यक्ति के लिए एक जैसे लग सकते हैं। एक संख्यात्मक अनुपात अनुमान को समाप्त करता है और WCAG मानक के विरुद्ध उत्तीर्ण/अनुत्तीर्ण का निर्णय देता है।

तत्काल अनुपात गणना
दो रंग चुनें या टाइप करें और कंट्रास्ट अनुपात को तुरंत अद्यतन होते देखें। कोई फ़ॉर्म सबमिट नहीं, कोई पेज पुनः लोड नहीं।
🔒
प्राइवेसी-फर्स्ट प्रोसेसिंग
चमक की गणना पूर्णतः आपके ब्राउज़र में होती है। कोई भी रंग मान आपके उपकरण से बाहर नहीं जाता, और न ही कोई कुकी या विश्लेषण आपकी पसंद को ट्रैक करता है।
🎯
AA और AAA निर्णय
परिणाम सामान्य और बड़े टेक्स्ट आकार दोनों के लिए WCAG AA और AAA की उत्तीर्ण/अनुत्तीर्ण स्थिति दर्शाते हैं, ताकि आपको ठीक-ठीक पता हो कि आप किन सीमाओं को पूरा करते हैं।
📋
खाता आवश्यक नहीं
पेज खोलें और जाँच शुरू करें। कोई साइन-अप नहीं, कोई दर-सीमा नहीं। एक बार पेज लोड हो जाने के बाद यह टूल ऑफ़लाइन भी कार्य करता है।

कंट्रास्ट चेकर के उपयोग के मामले

फ्रंटएंड विकास
कोई UI परिवर्तन भेजने से पहले, अपने CSS से टेक्स्ट रंग और पृष्ठभूमि चेकर में चिपकाएँ और पुष्टि करें कि यह जोड़ा WCAG AA को पूरा करता है। इससे कंट्रास्ट की विफलताएँ कोड समीक्षा या स्वचालित ऑडिट तक पहुँचने से पहले पकड़ी जाती हैं।
डिज़ाइन हैंडऑफ़
डिज़ाइनर किसी Figma फ़ाइल में प्रत्येक रंग जोड़े की जाँच कर सकते हैं कि वह इंजीनियर्स को specs सौंपने से पहले आवश्यक WCAG स्तर पर पास है या नहीं। डिज़ाइन स्टेज में कंट्रास्ट ठीक करना implementation के बाद ठीक करने से कहीं कम खर्चीला है।
एक्सेसिबिलिटी ऑडिटिंग
WCAG ऑडिट चलाने वाले QA इंजीनियर्स Lighthouse या axe जैसे ऑटोमेटेड टूल द्वारा फ्लैग किए गए specific रंग combinations की जाँच कर सकते हैं। चेकर सटीक अनुपात और किन स्तरों पर उत्तीर्ण या अनुत्तीर्ण हुए, इसकी पुष्टि करता है।
डिज़ाइन सिस्टम टोकन
किसी डिज़ाइन सिस्टम के लिए रंग टोकन परिभाषित करते समय, प्रत्येक अग्रभूमि/पृष्ठभूमि जोड़े की जाँच करें ताकि टोकन पैलेट कम से कम AA पर पास हो। टोकन के साथ ratio भी document करें ताकि बाकी टीमों को उन choices पर भरोसा हो।
ईमेल टेम्पलेट परीक्षण
ईमेल क्लाइंट opacity और blend modes जैसी CSS सुविधाएँ हटा देते हैं, जिससे वास्तविक प्रस्तुत रंग आपके स्रोत से भिन्न हो सकते हैं। पठनीयता सत्यापित करने के लिए इनबॉक्स तक पहुँचने वाले अंतिम अग्रभूमि और पृष्ठभूमि मानों का परीक्षण करें।
एक्सेसिबिलिटी मानकों का अध्ययन
WCAG सीखने वाले विद्यार्थी विभिन्न रंग युगलों के साथ प्रयोग कर सकते हैं और तुरंत देख सकते हैं कि अनुपात कैसे बदलता है। एक समय में एक चैनल समायोजित करने से यह समझ विकसित होती है कि चमक का बोधगम्य कंट्रास्ट से क्या संबंध है।

WCAG कंट्रास्ट अनुपात आवश्यकताएँ

नीचे दी गई तालिका विभिन्न सामग्री प्रकारों और अनुपालन स्तरों के लिए WCAG 2.1 द्वारा आवश्यक न्यूनतम कंट्रास्ट अनुपातों का सारांश प्रस्तुत करती है। बड़ा टेक्स्ट सामान्य भार पर 18px (24 CSS पिक्सेल) या उससे अधिक, अथवा बोल्ड भार पर 14px (18.66 CSS पिक्सेल) या उससे अधिक के रूप में परिभाषित है।

स्तरन्यूनतम अनुपातकिस पर लागूटिप्पणी
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

Luminance, AA और AAA की व्याख्या

कंट्रास्ट अनुपात गणना के तीन चरण हैं: प्रत्येक रंग के लिए luminance की गणना करना, अनुपात निकालना, और उसे WCAG सीमाओं से तुलना करना।

सापेक्ष Luminance
0 (काला) से 1 (सफेद) तक की एकल संख्या जो दर्शाती है कि कोई रंग कितना चमकीला दिखाई देता है। यह sRGB गामा वक्र की अरैखिकता और लाल, हरे व नीले रंगों के प्रति मानव आँख की असमान संवेदनशीलता को ध्यान में रखती है। शुद्ध हरे (#00FF00) की luminance 0.7152 है, जबकि शुद्ध नीले (#0000FF) की केवल 0.0722।
WCAG AA
अधिकांश कानूनी मानकों द्वारा आवश्यक आधारभूत एक्सेसिबिलिटी स्तर, जिसमें EU का European Accessibility Act (EAA) और संयुक्त राज्य अमेरिका का Section 508 शामिल हैं। AA सामान्य टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट के लिए 3:1 अनुपात की माँग करता है। अधिकांश डिज़ाइन सिस्टम सभी टेक्स्ट तत्वों के लिए न्यूनतम AA को लक्ष्य बनाते हैं।
WCAG AAA
उन्नत स्तर जो उस सामग्री के लिए है जो अधिकतम संभव दर्शकों द्वारा, जिनमें गंभीर दृष्टि बाधा वाले उपयोगकर्ता शामिल हैं, पढ़ी जानी चाहिए। AAA सामान्य टेक्स्ट के लिए 7:1 और बड़े टेक्स्ट के लिए 4.5:1 की माँग करता है। कम ही संपूर्ण साइटें सभी पेजों पर AAA प्राप्त करती हैं, परंतु कानूनी सूचनाओं और चिकित्सा जानकारी जैसी महत्वपूर्ण सामग्री अक्सर इसे लक्ष्य बनाती है।

कोड उदाहरण

WCAG कंट्रास्ट अनुपात को programmatically कैलकुलेट करें। प्रत्येक उदाहरण WCAG 2.x से relative luminance formula और contrast ratio calculation implement करता है। तुलना के लिए सफेद background पर काले और नील-बैंगनी रंग के जोड़ों का test किया गया है।

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 — AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs — tested contrast ratios */

/* 12.63:1 — passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

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

टेक्स्ट के लिए अच्छा कंट्रास्ट अनुपात क्या है?
वेब पर बॉडी टेक्स्ट के लिए कम से कम 4.5:1 (WCAG AA) का लक्ष्य रखें। 7:1 से ऊपर के अनुपात WCAG AAA को पूरा करते हैं और विस्तृत पठन के लिए अधिक सुविधाजनक हैं। सफेद पृष्ठभूमि पर काला रंग 21:1 का अधिकतम अनुपात देता है, लेकिन सफेद पृष्ठभूमि पर गहरा धूसर (#1e293b) भी लगभग 12.6:1 देता है, जो AAA से काफी ऊपर है।
WCAG में बड़ा टेक्स्ट किसे माना जाता है?
WCAG बड़े टेक्स्ट को सामान्य भार पर 18px (24 CSS पिक्सेल) या बोल्ड भार पर 14px (18.66 CSS पिक्सेल) के रूप में परिभाषित करती है। बड़े टेक्स्ट को निम्न कंट्रास्ट सीमा मिलती है क्योंकि बड़े अक्षर पहचानने में सरल होते हैं। CSS में 1px बराबर 0.75pt है, इसलिए 18pt बराबर 24px है।
क्या WCAG AA कानूनी रूप से अनिवार्य है?
कई देशों में, हाँ। European Accessibility Act (EAA), जो जून 2025 में लागू होता है, WCAG 2.1 AA को refer करता है। US Rehabilitation Act की Section 508 federal agencies के लिए WCAG 2.0 AA पूरा करना अनिवार्य बनाती है। Americans with Disabilities Act (ADA) की interpretation US courts ने WCAG AA standard के अनुसार accessible websites की requirement के रूप में की है। Canada, Australia और UK में भी ऐसे ही कानून हैं।
सापेक्ष luminance की गणना कैसे होती है?
प्रत्येक sRGB चैनल मान (0-255) को 255 से विभाजित किया जाता है, फिर रैखिक बनाया जाता है: 0.04045 या उससे कम मान 12.92 से विभाजित होते हैं, और उससे अधिक मान ((c + 0.055) / 1.055) ^ 2.4 द्वारा रूपांतरित होते हैं। तीनों रैखिकीकृत चैनलों को ITU-R BT.709 गुणांकों (0.2126 R, 0.7152 G, 0.0722 B) से भारित करके जोड़ा जाता है। परिणाम 0 और 1 के बीच की संख्या होती है।
WCAG कंट्रास्ट सूत्र में 0.05 ऑफसेट क्यों उपयोग होता है?
0.05 ऑफसेट शून्य से विभाजन को रोकता है जब रंगों में से एक शुद्ध काला हो (luminance = 0)। यह परिवेशी प्रकाश और स्क्रीन परावर्तन को भी ध्यान में रखता है जो गहरे से गहरे पिक्सेल की बोधगम्य चमक को थोड़ा बढ़ा देते हैं। इस ऑफसेट के बिना, किसी भी गहरे रंग पर काला रंग अनंत या भ्रामक रूप से उच्च अनुपात देता।
क्या दो रंग AA पर उत्तीर्ण होने के बाद भी पढ़ने में कठिन हो सकते हैं?
हाँ। WCAG कंट्रास्ट अनुपात, रंगत के अंतर को नहीं बल्कि luminance के अंतर को मापता है। संतृप्त लाल पर संतृप्त हरा रंग तकनीकी रूप से अनुपात सीमा पर उत्तीर्ण हो सकता है जबकि कुछ दर्शकों, विशेष रूप से लाल-हरे रंग दृष्टि दोष वाले लोगों के लिए, पढ़ने में असुविधाजनक हो। ऐसे रंगों को pair करना जो luminance और रंगत दोनों में अलग हों, आमतौर पर बेहतर results देता है।
WCAG 2.x कंट्रास्ट और APCA में क्या अंतर है?
WCAG 2.x एक सरल luminance अनुपात उपयोग करता है जो अग्रभूमि और पृष्ठभूमि को सममित रूप से मानता है। APCA (Advanced Perceptual Contrast Algorithm), जिसे WCAG 3.0 के लिए प्रस्तावित किया गया है, एक बोधात्मक चमक मॉडल उपयोग करता है जो ध्रुवता को ध्यान में रखता है: प्रकाश पृष्ठभूमि पर गहरा टेक्स्ट, समान luminance अंतर पर गहरी पृष्ठभूमि पर प्रकाश टेक्स्ट से भिन्न बोधगम्य कंट्रास्ट देता है। APCA अभी भी एक कार्यशील मसौदा है और किसी भी विनियमन में WCAG 2.x पद्धति को प्रतिस्थापित नहीं किया है।