Oh MyUtils

WCAG रंग कंट्रास्ट चेकर - रंग पहुँच जाँच ऑनलाइन

WCAG 2.1 AA और AAA अनुपालन के लिए रंग कंट्रास्ट अनुपात जाँचें। सामान्य टेक्स्ट, बड़े टेक्स्ट और UI घटकों के लिए तुरंत परिणाम — 100% क्लाइंट-साइड।

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

WCAG रंग कंट्रास्ट चेकर क्या है?

WCAG रंग कंट्रास्ट चेकर एक ऑनलाइन टूल है जो दो रंगों के बीच कंट्रास्ट अनुपात की गणना करता है और मूल्यांकन करता है कि क्या संयोजन WCAG 2.1 सुलभता मानकों को पूरा करता है। यह दो स्तरों पर अनुपालन जांचता है: AA (न्यूनतम, सामान्य टेक्स्ट 4.5:1) और AAA (उन्नत, सामान्य टेक्स्ट 7:1)।

इस टूल का उपयोग कैसे करें?

HEX, RGB या HSL प्रारूप का उपयोग करके अग्रभूमि रंग दर्ज करें, या कलर पिकर का उपयोग करें। पृष्ठभूमि रंग भी दर्ज करें। कंट्रास्ट अनुपात तुरंत प्रदर्शित होता है। WCAG अनुपालन तालिका और वैकल्पिक रंग सुझाव देखें।

क्या मेरा रंग डेटा सुरक्षित है?

आपका रंग डेटा 100% सुरक्षित है और आपके ब्राउज़र से बाहर नहीं जाता। गणना पूरी तरह से क्लाइंट-साइड JavaScript में चलती है। कोई डेटा किसी सर्वर को नहीं भेजा जाता।

WCAG AA और AAA में क्या अंतर है?

WCAG AA अधिकांश सुलभता कानूनों द्वारा आवश्यक न्यूनतम स्तर है। WCAG AAA उन्नत स्तर है जो बेहतर पठनीयता प्रदान करता है।

WCAG में 'बड़ा टेक्स्ट' क्या है?

WCAG 2.1 के अनुसार, बड़ा टेक्स्ट कम से कम 18pt (24px) सामान्य वजन या 14pt (18.5px) बोल्ड वजन का होता है।

कंट्रास्ट अनुपात सूत्र क्या है?

WCAG 2.1 कंट्रास्ट अनुपात तीन चरणों में गणना की जाती है: गामा सुधार, सापेक्ष चमक गणना, और अनुपात गणना। परिणाम 1:1 से 21:1 तक होता है।

'UI घटक' का क्या अर्थ है?

WCAG 2.1 SC 1.4.11 सूचना देने वाले दृश्य तत्वों जैसे फ़ील्ड बॉर्डर, बटन आउटलाइन और आइकन के लिए न्यूनतम 3:1 कंट्रास्ट अनुपात की आवश्यकता है।

कोड उदाहरण

// WCAG Color Contrast Checker

function sRGBtoLinear(channel) {
  const c = channel / 255;
  return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
}

function getRelativeLuminance(r, g, b) {
  return (
    0.2126 * sRGBtoLinear(r) +
    0.7152 * sRGBtoLinear(g) +
    0.0722 * sRGBtoLinear(b)
  );
}

function getContrastRatio(fg, bg) {
  const l1 = getRelativeLuminance(...fg);
  const l2 = getRelativeLuminance(...bg);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

function checkWCAG(ratio) {
  return {
    ratio: parseFloat(ratio.toFixed(2)),
    aa: {
      normalText: ratio >= 4.5,
      largeText: ratio >= 3,
      uiComponents: ratio >= 3,
    },
    aaa: {
      normalText: ratio >= 7,
      largeText: ratio >= 4.5,
    },
  };
}

// Usage
const fg = [26, 26, 26];
const bg = [255, 255, 255];
const ratio = getContrastRatio(fg, bg);
console.log(`Contrast Ratio: ${ratio.toFixed(2)}:1`);

const result = checkWCAG(ratio);
console.log('AA Normal Text:', result.aa.normalText ? 'Pass' : 'Fail');
console.log('AAA Normal Text:', result.aaa.normalText ? 'Pass' : 'Fail');

संबंधित उपकरण