समान लाइटनेस, अलग सापेक्ष चमक

Moyoutil में #FF0000 और #00FF00 डालने पर hsl(0, 100%, 50%) और hsl(120, 100%, 50%) मिलते हैं। दोनों की HSL लाइटनेस 50% है, लेकिन WCAG sRGB सापेक्ष चमक क्रमशः 0.2126 और 0.7152 है। ये अलग मात्राएँ हैं। CSS Color 4 भी बताता है कि HSL लाइटनेस दृष्टिगत रूप से समान अंतर वाला पैमाना नहीं है।

50% HSL लाइटनेस वाले लाल और हरे रंग की सापेक्ष चमक तथा सफेद के साथ कंट्रास्ट
स्वनिर्मित गणना चित्र। Y WCAG सापेक्ष चमक है; नीचे के अनुपात प्रत्येक रंग की #FFFFFF से तुलना करते हैं। रंगों के साथ कोड और संख्याएँ भी हैं।

W3C CSS Color 4 §7: HSL

RGB चैनलों का सीधे औसत न निकालें

WCAG में 0–255 के चैनल को 255 से भाग देकर रैखिक बनाया जाता है, फिर R, G और B को 0.2126, 0.7152 और 0.0722 भार दिए जाते हैं। कंट्रास्ट (L1 + 0.05) / (L2 + 0.05) है, जिसमें हल्के और गहरे रंग की सापेक्ष चमक ली जाती है। सफेद के साथ लाल लगभग 3.9985:1 और हरा लगभग 1.3722:1 है। दिखाए गए मान चार दशमलव स्थान तक गोल हैं; अनुपालन तय करने के लिए गोल मान न लें।

नीचे का कोड अलग पुनरुत्पादन उदाहरण है। Moyoutil HEX, RGB और HSL बदलता है; कंट्रास्ट अनुपात या WCAG अनुपालन नहीं दिखाता। वास्तविक डिजाइन में टेक्स्ट और पृष्ठभूमि रंग साथ जाँचें। पारदर्शिता, चित्र और ग्रेडिएंट पृष्ठभूमि इस अपारदर्शी ठोस रंग वाले उदाहरण के दायरे से बाहर हैं।

const linear = n => {
  const s = n / 255;
  return s <= 0.04045 ? s / 12.92
    : ((s + 0.055) / 1.055) ** 2.4;
};
const luminance = rgb => {
  const [r, g, b] = rgb.map(linear);
  return 0.2126*r + 0.7152*g + 0.0722*b;
};
const contrast = (a, b) => {
  const x = luminance(a), y = luminance(b);
  return (Math.max(x,y)+0.05)
       / (Math.min(x,y)+0.05);
};
console.log(contrast([255,0,0], [255,255,255]).toFixed(4));
console.log(contrast([0,255,0], [255,255,255]).toFixed(4));
// 3.9985
// 1.3722

W3C WCAG 2.2: relative luminance and contrast ratio

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

क्या एक कंट्रास्ट अनुपात से पूरी सुलभता सिद्ध होती है?

नहीं। यह लेख केवल दो अपारदर्शी रंगों का कंट्रास्ट गणना करता है। टेक्स्ट आकार, उपयोग संदर्भ और अन्य सुलभता आवश्यकताएँ अलग जाँचें।