कवर किए गए बैकग्राउंड क्षेत्र की चमक के आधार पर टेक्स्ट रंग बदलें

डायनामिक टेक्स्ट रंग: बैकग्राउंड चमक के आधार पर

पठनीयता सुनिश्चित करने के लिए, टेक्स्ट रंग को बैकग्राउंड की चमक के आधार पर गहरा (काला) या हल्का (सफेद) सेट किया जा सकता है। यह ल्यूमिनेंस फॉर्मूला का उपयोग करके किया जाता है।

ल्यूमिनेंस फॉर्मूला

सापेक्ष ल्यूमिनेंस (WCAG मानक):

L = 0.2126 * R + 0.7152 * G + 0.0722 * B
// जहां R, G, B 0-1 रेंज में हैं (sRGB → लीनियर रूपांतरण के बाद)

सरलीकृत पूर्णांक संस्करण (0-255):

brightness = (R * 299 + G * 587 + B * 114) / 1000
// थ्रेशोल्ड: ~128 (125-130 सामान्य)

उदाहरण: रैंडम बैकग्राउंड पर अनुकूली टेक्स्ट रंग

<!DOCTYPE html>
<html>
<head>
    <style>
        #demoBox {
            width: 300px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            font-family: 'Segoe UI', sans-serif;
            border-radius: 12px;
            transition: background-color 0.5s, color 0.5s;
            border: 2px solid #333;
        }
        button {
            margin-top: 15px;
            padding: 10px 20px;
            font-size: 16px;
            background: #333;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
        }
        button:hover { background: #555; }
    </style>
</head>
<body>
    <h2>अनुकूली टेक्स्ट रंग डेमो</h2>
    <p>बटन दबाकर रैंडम बैकग्राउंड रंग उत्पन्न करें - टेक्स्ट रंग स्वचालित रूप से काला/सफेद समायोजित होगा।</p>
    
    <div id="demoBox">अनुकूली टेक्स्ट रंग</div>
    <button onclick="changeColor()">रंग बदलें</button>
    
    <script>
        const box = document.getElementById('demoBox');
        
        function getContrastColor(r, g, b) {
            // सरलीकृत ल्यूमिनेंस गणना
            const brightness = (r * 299 + g * 587 + b * 114) / 1000;
            return brightness > 128 ? 'black' : 'white';
        }
        
        function getLuminance(r, g, b) {
            // WCAG सापेक्ष ल्यूमिनेंस (sRGB → लीनियर)
            const toLinear = (c) => {
                c = c / 255;
                return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
            };
            const R = toLinear(r);
            const G = toLinear(g);
            const B = toLinear(b);
            return 0.2126 * R + 0.7152 * G + 0.0722 * B;
        }
        
        function getContrastColorWCAG(r, g, b) {
            const bgLum = getLuminance(r, g, b);
            // कंट्रास्ट अनुपात: (L1 + 0.05) / (L2 + 0.05)
            const whiteContrast = (1.05) / (bgLum + 0.05);
            const blackContrast = (bgLum + 0.05) / 0.05;
            return whiteContrast > blackContrast ? 'white' : 'black';
        }
        
        function changeColor() {
            const r = Math.floor(Math.random() * 256);
            const g = Math.floor(Math.random() * 256);
            const b = Math.floor(Math.random() * 256);
            
            const bgColor = `rgb(${r}, ${g}, ${b})`;
            // WCAG विधि अधिक सटीक है
            const textColor = getContrastColorWCAG(r, g, b);
            
            box.style.backgroundColor = bgColor;
            box.style.color = textColor;
            
            // डीबग जानकारी
            const simpleBrightness = Math.round((r * 299 + g * 587 + b * 114) / 1000);
            const wcagLum = getLuminance(r, g, b).toFixed(3);
            console.log(`RGB: ${r},${g},${b} | सरल चमक: ${simpleBrightness} | WCAG ल्यूमिनेंस: ${wcagLum} | टेक्स्ट: ${textColor}`);
        }
        
        // प्रारंभिक रंग
        changeColor();
        
        // ऑटो-चेंज (वैकल्पिक)
        // setInterval(changeColor, 2000);
    </script>
</body>
</html>

CSS-ओनली दृष्टिकोण: mix-blend-mode

आधुनिक CSS के साथ, JavaScript के बिना अनुकूली टेक्स्ट रंग:

<style>
.adaptive-text {
    /* सफेद टेक्स्ट जो बैकग्राउंड के साथ मिश्रित होता है */
    color: white;
    mix-blend-mode: difference;
    /* या */
    color: black;
    mix-blend-mode: difference;
    
    /* सुनिश्चित करें कि बैकग्राउंड ग्रे नहीं है (डिफरेंस में ग्रे अदृश्य हो जाता है) */
    isolation: isolate; /* पेरेंट पर */
}
</style>

<div style="isolation: isolate; background: #3498db; padding: 20px;">
    <h1 class="adaptive-text">यह टेक्स्ट बैकग्राउंड के अनुकूल है</h1>
</div>

व्यावहारिक उपयोग: डायनामिक कार्ड्स

<div class="card-grid">
    <article class="card" style="background: #e74c3c;">
        <h3 class="card-title">लाल कार्ड</h3>
    </article>
    <article class="card" style="background: #2ecc71;">
        <h3 class="card-title">हरा कार्ड</h3>
    </article>
    <article class="card" style="background: #3498db;">
        <h3 class="card-title">नीला कार्ड</h3>
    </article>
    <article class="card" style="background: #f39c12;">
        <h3 class="card-title">नारंगी कार्ड</h3>
    </article>
</div>

<style>
.card {
    padding: 30px;
    border-radius: 12px;
    color: white;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-title {
    mix-blend-mode: difference;
    font-size: 2rem;
    font-weight: bold;
}

पहुँच: WCAG कंट्रास्ट अनुपात

function checkContrast(r1, g1, b1, r2, g2, b2) {
    const lum1 = getLuminance(r1, g1, b1);
    const lum2 = getLuminance(r2, g2, b2);
    const lighter = Math.max(lum1, lum2);
    const darker = Math.min(lum1, lum2);
    const ratio = (lighter + 0.05) / (darker + 0.05);
    return ratio.toFixed(2);
}