पहुंच और सौंदर्यशास्त्र के लिए पृष्ठभूमि की चमक के अनुसार टेक्स्ट उपस्थिति को अनुकूलित करना

आज के डिजिटल परिदृश्य में, पहुंच और दृश्य अपील सुनिश्चित करना अत्यंत महत्वपूर्ण है। इसका एक महत्वपूर्ण तत्व पाठ और उसकी पृष्ठभूमि के बीच अंतर है, खासकर कम दृष्टि वाले उपयोगकर्ताओं के लिए। इसे संबोधित करने के लिए, डिजाइनर अक्सर ऐसी तकनीकों का उपयोग करते हैं जो पृष्ठभूमि की चमक के आधार पर पाठ की उपस्थिति को समायोजित करते हैं।

एक दृष्टिकोण में प्लगइन्स या स्क्रिप्ट का उपयोग करना शामिल है जो गतिशील रूप से पाठ का रंग बदलते हैं या पूर्वनिर्धारित छवियों/आइकन को स्वैप करते हैं। ये उपकरण आम तौर पर मूल तत्व की पृष्ठभूमि में कवर किए गए पिक्सेल की औसत चमक की गणना करते हैं और तदनुसार पाठ को समायोजित करते हैं। उदाहरण के लिए, यदि पृष्ठभूमि गहरे रंग की है, तो पाठ सफेद हो जाएगा या आइकन हल्के संस्करण में बदल जाएंगे। परिभाषित पृष्ठभूमि वाले निकटतम माता-पिता के लिए।

वर्ल्ड वाइड वेब कंसोर्टियम (W3C) और अन्य उद्योग विशेषज्ञ पहुंच के लिए रंग कंट्रास्ट पर मूल्यवान संसाधन और सिफारिशें प्रदान करते हैं:

• की अनुमानित चमक की गणना एक रंग

W3C एल्गोरिदम RGB रंग मानों के आधार पर अग्रभूमि और पृष्ठभूमि कंट्रास्ट की गणना करने के लिए एक सीधा दृष्टिकोण प्रदान करता है। किसी रंग की चमक निम्न सूत्र का उपयोग करके निर्धारित की जाती है:

चमक = (0.299 * आर 0.587 * जी 0.114 * बी) / 1000

brightness = (0.299 * R   0.587 * G   0.114 * B) / 1000

निम्नलिखित जावास्क्रिप्ट कोड पृष्ठभूमि चमक के आधार पर पाठ रंग को समायोजित करने के लिए W3C एल्गोरिदम के कार्यान्वयन को प्रदर्शित करता है:

const rgb = [255, 0, 0]; // प्रदर्शन के लिए बेतरतीब ढंग से रंग अपडेट करें सेटइंटरवल(सेटकॉन्ट्रास्ट, 1000); फ़ंक्शन सेटकंट्रास्ट() { // RGB मानों को बेतरतीब ढंग से अपडेट करें आरजीबी[0] = गणित.राउंड(गणित.यादृच्छिक() * 255); आरजीबी[1] = मैथ.राउंड(मैथ.रैंडम() * 255); आरजीबी[2] = मैथ.राउंड(मैथ.रैंडम() * 255); // W3C सूत्र का उपयोग करके चमक की गणना करें स्थिरांक चमक = Math.round(((parseInt(rgb[0]) * 299) (parseInt(rgb[1]) * 587) (parseInt(rgb[2]) * 114)) / 1000); // चमक के आधार पर टेक्स्ट और पृष्ठभूमि रंग सेट करें स्थिरांक textColour = (चमक> 125)? 'श्याम सफेद'; स्थिरांक पृष्ठभूमि रंग = 'आरजीबी(' आरजीबी[0] ',' आरजीबी[1] ',' आरजीबी[2] ')'; $('#bg').css('color', textColour); $('#bg').css('पृष्ठभूमि-रंग', पृष्ठभूमिरंग); }

const rgb = [255, 0, 0];

// Randomly update colors for demonstration
setInterval(setContrast, 1000);

function setContrast() {
  // Randomly update RGB values
  rgb[0] = Math.round(Math.random() * 255);
  rgb[1] = Math.round(Math.random() * 255);
  rgb[2] = Math.round(Math.random() * 255);

  // Calculate brightness using the W3C formula
  const brightness = Math.round(((parseInt(rgb[0]) * 299)  
                       (parseInt(rgb[1]) * 587)  
                       (parseInt(rgb[2]) * 114)) / 1000);

  // Set text and background colors based on brightness
  const textColour = (brightness > 125) ? 'black' : 'white';
  const backgroundColour = 'rgb('   rgb[0]   ','   rgb[1]   ','   rgb[2]   ')';
  $('#bg').css('color', textColour);
  $('#bg').css('background-color', backgroundColour);
}

प्लगइन्स, स्क्रिप्ट और उद्योग की सर्वोत्तम प्रथाओं का उपयोग करके, डिजाइनर पृष्ठभूमि चमक के आधार पर टेक्स्ट रंग और आइकन उपस्थिति के समायोजन को स्वचालित कर सकते हैं। यह दृष्टिकोण पहुंच को बढ़ाता है, दृश्य अपील में सुधार करता है, और वेब सामग्री एक्सेसिबिलिटी दिशानिर्देशों (डब्ल्यूसीएजी) के साथ संरेखित होता है।