CSS में ब्राउज़र अपने-आप contrast color कैसे चुनता है

 (webkit.org)
2 पॉइंट द्वारा GN⁺ 2025-05-19 | अभी कोई टिप्पणी नहीं है. | WhatsApp पर शेयर करें
  • CSS contrast-color() अक्सर बदलने वाले रंगों, जैसे button background, के अनुसार ब्राउज़र को काला या सफेद text color चुनने देता है, जिससे color pair अलग से manage करने का बोझ कम होता है
  • color: contrast-color(var(--button-color)); की तरह base color देने पर background color बदलने के साथ ज़्यादा contrast देने वाला विकल्प फिर से calculate होता है
  • अभी Safari Technology Preview WCAG 2 contrast algorithm का उपयोग करता है, इसलिए #317CFF background पर काला text चुनता है, लेकिन मानवीय perception में सफेद ज़्यादा स्वाभाविक लग सकता है
  • यह फीचर accessibility अपने-आप guarantee नहीं करता; palette, text size, font weight, और prefers-contrast जैसी design validation अभी भी ज़रूरी है
  • CSS Working Group ने WCAG 3 contrast algorithm पर चर्चा पूरी होने तक इस फीचर को काला/सफेद चयन तक सीमित रखा है, और बाद में इसे ज़्यादा जटिल color-selection tools तक बढ़ाया जा सकता है

contrast-color() रंग प्रबंधन का बोझ कैसे कम करता है

  • वेबसाइट या web app में अलग-अलग background color वाले button बनाते समय, background गहरा हो तो सफेद text और हल्का हो तो काला text रखना पड़ता है
  • पहले --button-color और --button-text-color दोनों define करके color pair manage करने पड़ते थे, और बड़े project या कई teams वाले माहौल में इन combinations को लगातार सही रखना मुश्किल हो जाता था
  • CSS में contrast-color() को base color देने पर ब्राउज़र काले और सफेद में से ज़्यादा contrast वाला रंग चुन लेता है
color: contrast-color(purple);
  • button पर background color variable और contrast-color() साथ में लागू किए जा सकते हैं
button {
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
}
  • इस तरीके में सिर्फ एक background color define करना होता है, text color ब्राउज़र अपने-आप तय कर लेता है

एक ही variable से state-wise colors निकालना

  • Relative Color Syntax को साथ में इस्तेमाल करने पर base button color से hover color बनाया जा सकता है, और हर state का text color भी contrast-color() से calculate किया जा सकता है
:root {
  --button-color: purple;
  --hover-color: oklch(from var(--button-color) calc(l + .2) c h);
}
button {
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
  text-box: cap alphabetic; /* vertically centers the text */
}
button:hover {
  background-color: var(--hover-color);
  color: contrast-color(var(--hover-color));
}
  • इसका नतीजा CodePen example में देखा जा सकता है, और Safari 26.0 या उससे ऊपर, या supported browsers में button color को dynamically बदला जा सकता है

WCAG 2-आधारित calculation से आने वाले अटपटे नतीजे

  • contrast-color() accessibility contrast issues को अपने-आप पूरी तरह हल नहीं करता
  • कुछ background colors ऐसे हो सकते हैं जिनमें काले या सफेद किसी के साथ भी पर्याप्त contrast न बने, इसलिए designer, developer और tester की जाँच ज़रूरी है
  • मई 2025 तक Safari Technology Preview का implementation WCAG 2 algorithm का उपयोग करता है
    • #317CFF नीले background पर WCAG 2 काले text का contrast 5.45:1 calculate करता है
    • उसी background पर सफेद text का contrast 3.84:1 calculate होता है
    • contrast-color() बड़ा अंक होने के कारण काला चुनता है
  • लेकिन मानवीय perception में इस combination में सफेद बेहतर लग सकता है, और WCAG 2 color contrast algorithm की लंबे समय से आलोचना होती रही है

APCA और WCAG 3 में contrast algorithm पर जारी चर्चा

  • Accessible Perceptual Contrast Algorithm(APCA) उन candidates में से एक है जो WCAG 3 में शामिल हो सकता है
  • APCA Contrast Calculator #317CFF background पर काले text को Lc 38.7 और सफेद text को Lc -70.9 देता है
    • APCA score में negative value का मतलब है कि text background से ज़्यादा हल्का है
    • contrast की मात्रा compare करते समय 38.7 और 70.9 को sign हटाकर देखा जाता है
    • इस नतीजे में सफेद text का contrast ज़्यादा है
  • APCA साधारण mathematical ratio की जगह perception-based contrast को महत्व देता है, और यह मानता है कि लोग रंग और brightness के अनुसार contrast को linear तरीके से महसूस नहीं करते
  • CSS standard अभी भी existing algorithm के उपयोग की माँग करता है, लेकिन उसमें यह note शामिल है कि आगे चलकर दूसरे contrast algorithms जोड़े जा सकते हैं
  • WCAG 3 में कौन-सा algorithm इस्तेमाल होगा, और candidate algorithms की licensing कैसे संभाली जाएगी, इस पर चर्चा जारी है

वास्तविक design में किन शर्तों को साथ में जाँचना चाहिए

  • contrast-color() का बेहतर रंग चुनना और पर्याप्त contrast की guarantee देना, दोनों अलग बातें हैं
  • खासकर mid-tone colors में अलग-अलग algorithms के नतीजों में बड़ा फर्क हो सकता है
  • ज़्यादा contrast चाहने वाले users के लिए prefers-contrast media query को साथ में इस्तेमाल किया जा सकता है
@media (prefers-contrast: more) {
  /* styling with more contrast */
}
  • उदाहरण में tree nursery website के brand button background color के लिए #2DAD4E इस्तेमाल किया गया है
    • APCA के अनुसार सफेद text के साथ इसका contrast Lc -60.4 है
    • यह पर्याप्त है या नहीं, यह text size और font weight पर निर्भर करता है
    • APCA, WCAG 2 के ratio की जगह Lc -108 से 106 तक का एक single score उपयोग करता है
  • APCA Readability Criterion Bronze, Silver और Gold level targets देता है, जिससे text size और weight चुनने में मदद मिलती है
  • example calculation में सफेद text और #2DAD4E का combination 24px text पर font-weight 400 या उससे ऊपर होने पर काम करता है, और font-weight 300 के लिए कम-से-कम 41px चाहिए
  • ज़्यादा contrast माँगने वाले users के लिए light mode और dark mode में अलग colors दिए जा सकते हैं
    • light mode: ज़्यादा गहरा हरा और सफेद text, Lc -76.1
    • dark mode: ज़्यादा हल्का हरा और काला text, Lc 75.2
--button-color: #2DAD4E; /* brand green background */
@media (prefers-contrast: more) {
  @media (prefers-color-scheme: light) {
    --button-color: #419543; /* darker green background */
  }
  @media (prefers-color-scheme: dark) {
    --button-color: #77CA8B; /* lighter green background */
  }
}
button {
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
  font-size: 1.5rem; /* 1.5 * 16 = 24px at normal zoom */
  font-weight: 500;
}
  • मौजूदा माहौल में contrast-color() को WCAG 2 algorithm चलाता है, इसलिए इस example website में इसे इस्तेमाल करना मुश्किल हो सकता है
  • जिन projects में brand color ज़्यादा गहरा हरा है और काला/सफेद selection सही आता है, वहाँ यह अभी भी उपयोगी हो सकता है
  • enabled/disabled, light/dark mode, prefers-contrast जैसी कई states या options के रंग define करते समय contrast-color() खास तौर पर मददगार है

पहले इसे काला/सफेद चयन तक सीमित क्यों रखा गया

  • अभी का contrast-color() Safari Technology Preview 122 में मौजूद color-contrast() की तुलना में काफी सरल किया गया है
  • CSS Working Group ने WCAG 3 contrast algorithm पर चर्चा पूरी न होने की स्थिति में, फिलहाल इसे base color के मुकाबले काला या सफेद चुनने वाले tool के रूप में आगे बढ़ाया है
  • विकल्पों को काला/सफेद तक सीमित रखने से बाद में WCAG 2 algorithm बदलने पर websites के टूटने की संभावना कम हो जाती है
  • आगे चलकर browser user-defined color list में से चुन सके, या मनचाहा contrast level specify किया जा सके, ऐसे ज़्यादा शक्तिशाली tools आ सकते हैं
  • contrast-color() सिर्फ text color ही नहीं, बल्कि background, border जैसी कई color-setting properties में भी इस्तेमाल किया जा सकता है

संबंधित पढ़ाई

अभी कोई टिप्पणी नहीं है.

अभी कोई टिप्पणी नहीं है.