CSS में browser contrasting colors अपने-आप कैसे चुनता है

 (webkit.org)
2 पॉइंट द्वारा GN⁺ 2025-05-19 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • contrast-color() फ़ंक्शन का उपयोग करने पर button जैसी अलग-अलग background colors के अनुसार browser काला या सफेद font color अपने-आप चुन लेता है
  • बड़े प्रोजेक्ट्स में भी text readability बनाए रखना आसान हो जाता है और maintenance efficiency बढ़ती है
  • फिलहाल Safari Technology Preview में WCAG 2 का official algorithm इस्तेमाल होता है, जो वास्तविक human perception से अलग हो सकता है
  • अगली पीढ़ी के APCA algorithm को WCAG 3 development process में शामिल करने पर चर्चा चल रही है, जो बेहतर luminance contrast evaluation का वादा करता है
  • केवल black-and-white contrast से आगे भी भविष्य में कई color options और accessibility improvements जोड़े जाने की संभावना है

परिचय और contrast-color() लाने की पृष्ठभूमि

  • ऐसे design में जहाँ कई buttons या interface components पर अलग-अलग background colors इस्तेमाल होते हैं, font color (text color) की readability बहुत महत्वपूर्ण होती है
  • अब तक developers को background color और text color का सही combination खुद चुनना पड़ता था, लेकिन बड़े प्रोजेक्ट्स में management complexity और errors का जोखिम बढ़ जाता है
  • contrast-color() CSS फ़ंक्शन का उपयोग करने पर developer को सिर्फ background color तय करना होता है, और browser अपने-आप काले या सफेद font color में से ज़्यादा contrast वाला रंग चुन लेता है
  • इस तरीके से maintenance और design work की efficiency काफ़ी बेहतर हो जाती है
  • इसे सरल रूप में color: contrast-color(रंग); की तरह declare करके इस्तेमाल किया जा सकता है

contrast-color() उपयोग का उदाहरण

  • button के background color variable में मनचाहा रंग सेट करें, और text color के लिए contrast-color() इस्तेमाल करें ताकि अपने-आप काले या सफेद में से contrast वाला एक रंग चुना जाए
  • एक समय में सिर्फ एक रंग manage करना पड़ता है, इसलिए design policy बदलने या dark/light mode support देने पर maintenance आसान हो जाता है
button {
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
}
  • Relative Color Syntax का उपयोग करने पर hover state के लिए भी background color और text color को consistent तरीके से manage किया जा सकता है

accessibility से जुड़ी बातें और algorithm की व्याख्या

  • contrast-color() का उपयोग करने से सभी accessibility समस्याएँ अपने-आप हल नहीं हो जातीं
  • कुछ मध्यम brightness वाले background colors में काला और सफेद, दोनों ही ज़रूरी मानक तक नहीं पहुँचते
  • अभी Safari Technology Preview में इस्तेमाल होने वाला WCAG 2 algorithm official web accessibility standard है
    • यह algorithm contrast ratio के आधार पर चुनता है, लेकिन कभी-कभी वास्तविक visual luminance contrast से अलग नतीजे दे सकता है
  • उदाहरण के लिए, #317CFF blue background पर मशीन के हिसाब से काले रंग का contrast ज़्यादा निकल सकता है, लेकिन वास्तव में सफेद रंग पढ़ने में बेहतर लगता है
  • इसी आलोचना और सुधार की मांग के चलते, अगली पीढ़ी के accessibility standard (WCAG 3) में बेहतर APCA (Accessible Perceptual Contrast Algorithm) को शामिल करने पर चर्चा चल रही है
  • APCA मानव perception की विशेषताओं को ध्यान में रखकर color contrast की गणना करता है, इसलिए यह वास्तविक readability को बेहतर ढंग से सुनिश्चित करता है

वास्तविक वातावरण में पर्याप्त contrast देना

  • CSS की @media (prefers-contrast: more) media query का उपयोग करने पर user accessibility preferences के अनुसार अतिरिक्त high-contrast styles लागू किए जा सकते हैं
@media (prefers-contrast: more) {
  /* 더 높은 대조 스타일 정의 */
}
  • उदाहरण के लिए, यदि brand का मुख्य रंग #2DAD4E जैसा हल्का हरा है, तो भविष्य में contrast-color() सफेद चुन भी ले, तब भी छोटे text के लिए contrast पर्याप्त न हो सकता है
  • APCA algorithm लागू करने पर font size और weight के अनुसार ज़रूरी minimum contrast requirements को विस्तार से देखा जा सकता है, जिससे व्यावहारिक design decisions लेने में मदद मिलती है
    • वास्तव में 24px/400 weight text पर सफेद रंग उपयुक्त हो सकता है, लेकिन और पतले FONT या छोटे text के लिए अधिक गहरे background color की सिफारिश की जाती है
  • design team light/dark mode, prefers-contrast preferences आदि को ध्यान में रखकर हर स्थिति के लिए color palette को variables के रूप में आसानी से manage कर सकती है
--button-color: #2DAD4E;

@media (prefers-contrast: more) {
  @media (prefers-color-scheme: light) {
    --button-color: #419543;
  }
  @media (prefers-color-scheme: dark) {
    --button-color: #77CA8B;
  }
}
button {
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
  font-size: 1.5rem;
  font-weight: 500;
}
  • मुख्य बात यह है कि contrast-color() की वजह से रंगों का प्रबंधन background color को केंद्र में रखकर किया जा सकता है, और text color contrast pair browser अपने-आप बना देता है

काले और सफेद से आगे

  • मौजूदा contrast-color() अभी केवल दो विकल्प, काला और सफेद, में से चुनता है, लेकिन शुरुआती version में कई colors में से चुनने की सुविधा भी थी
  • CSS Working Group भविष्य में algorithm changes और compatibility को ध्यान में रखते हुए पहले simple version (सिर्फ black/white selection) दे रहा है, और आगे चलकर custom color options तथा मनचाहा minimum contrast threshold तय करने जैसी extensions की भी योजना है
  • साधारण ज़रूरतों के लिए यह पहले से ही काफ़ी उपयोगी है
  • यह फ़ंक्शन background color के अलावा border और दूसरे visual elements पर भी अलग-अलग तरीकों से इस्तेमाल किया जा सकता है

निष्कर्ष और संदर्भ जानकारी

  • अगली पीढ़ी के accessibility standard के लागू होने के बाद, contrast-color() algorithm बदलकर contrast का बेहतर automatic selection support करेगा
  • तब तक यह खास तौर पर तब उपयोगी है जब मुख्य background color साफ़ तौर पर बहुत हल्का या बहुत गहरा हो
  • इसे text के अलावा कई तरह के UI elements पर भी व्यापक रूप से लागू किया जा सकता है
  • APCA (Accessible Perceptual Contrast Algorithm) जैसे आधुनिक accessibility algorithms पर नज़र बनाए रखना उपयोगी रहेगा

संदर्भ सामग्री

  • APCA की official documentation और APCA Contrast Calculator में अलग-अलग examples और evaluation criteria देखे जा सकते हैं
  • CSSWG में contrast-color फ़ंक्शन से जुड़ी standardization discussion जारी है
  • WebKit या संबंधित communities में राय साझा की जा सकती है और feedback में भाग लिया जा सकता है

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

1 टिप्पणियां

 
GN⁺ 2025-05-19
Hacker News टिप्पणियाँ

  • इस समस्या को हल करने के लिए मैं ऐसा टूल बना रहा हूँ जो डिजाइन चरण में color pairs के लिए सरल और पूर्वानुमेय WCAG/ACPA contrast ratio वाली palette तैयार करे। https://www.inclusivecolors.com/ साइट desktop पर और ज़्यादा फीचर्स देती है। एक तरीका यह है कि 100 (हल्का रंग) से 900 (गहरा रंग) तक graded color swatches बनाए जाएँ, और उदाहरण के लिए 700 grade का रंग 100 grade के साथ, 800 grade का रंग 200 grade के साथ साफ contrast दे, इस हिसाब से lightness adjust की जाए। इससे red-700 vs gray-100, green-800 vs yellow-200 जैसे combinations में बिना lightness check किए भी भरोसेमंद contrast मिलेगा, यह पता रहता है। Contrast मेनू में WCAG की तुलना में APCA algorithm कितना सख्त है, खासकर हल्के background पर गहरे text के मामले में, यह भी देखा जा सकता है। यही वजह है कि dark theme में WCAG का इस्तेमाल नहीं करना चाहिए। Examples मेनू में Tailwind और IBM Carbon palette के examples देखें तो हर grade में saturation और hue non-linear तरीके से बदलते हैं, इसलिए सिर्फ black/white में optimal contrast चुनना आसान है, लेकिन branding महत्वपूर्ण हो तो सिर्फ brightness adjust करके colors निकालना काफ़ी जटिल समस्या बन जाती है.

  • lch का इस्तेमाल करके ऐसा ही कुछ किया जा सकता है

     --text: lch(from var(--bg) calc((49.44 - l) * infinity) 0 0);

    स्रोत: https://til.jakelazaroff.com/css/…

    • LCH भी बढ़िया है, लेकिन OKLCH उससे भी बेहतर है। https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl/… इस लेख ने मेरी सोच पूरी तरह बदल दी। यह सच में कमाल का टूल है। हैरानी की बात यह है कि मेरे designer दोस्तों में से किसी को भी OKLCH के बारे में पता नहीं था। यह तरीका बहुत-सी समस्याएँ हल करता है.

    • CSS function जो callback की तरह parameters ले सके, ऐसा मैं पहली बार देख रहा हूँ। यह सच में दिलचस्प concept है। सोच रहा हूँ कि lch के अलावा क्या इस स्टाइल के और भी functions हैं.

    • Lea Verou ने इसी तरह के workaround पर एक अच्छा लेख लिखा है। https://lea.verou.me/blog/2024/contrast-color/

  • यह लेख automatic contrast selection के फायदे और नुकसान का शानदार overview देता है। अगर आप कोई simple site बना रहे हैं, तो यह तरीका आसान है और सही contrast जल्दी दे देता है।
    लेकिन अगर बड़े पैमाने पर WCAG compliance चाहिए, तो इससे बचना चाहिए और एक असली semantic formatting token layer चाहिए। Semantic tokens development speed बढ़ाते हैं, और सिर्फ black/white switching की तुलना में ज़्यादा visually pleasing contrast दे सकते हैं। Semantic token layer की अच्छी बात यह है कि theme बनाना बहुत आसान हो जाता है, इसलिए light/dark theme लगभग बिना अतिरिक्त लागत के संभव हो जाते हैं। अगर brand colors WCAG2 में fail हो जाते हैं, तो WCAG2/APCA के लिए अलग theme बनाकर compliance भी पाई जा सकती है और बेहतर contrast भी दिया जा सकता है।
    मैं Figma में variables/tokens stream पर काम करता हूँ, और Figma तथा Atlassian के dark mode implementation में भी शामिल रहा हूँ। Tokens, themes, accessibility colors आदि पर कोई सवाल हो तो बेझिझक पूछें.

    • मैं जानना चाहूँगा कि semantic tokens से आपका मतलब具体 क्या है। ऐसी सुविधा न होने की वजह से मैंने अपने बड़े project में color-relative calculation और contrast colors के लिए CSS-in-JS का इस्तेमाल किया था। उम्मीद है ऐसी तकनीकें जल्द व्यापक रूप से अपनाई जाएँगी.

    • आख़िरी 2/3 हिस्सा बहुत लंबा है और कुछ बनावटी-सा लगता है। company site/app में ऐसी function पर निर्भर रहना जोखिम भरा है, क्योंकि output color predict नहीं किया जा सकता। WebKit अगर bug fix करे तो color result बदल भी सकता है.

  • अभी भी यह मानना मुश्किल है कि contrast color browser vendors के फैसले के अनुसार तय हो और वह हमेशा सही या predictable हो। क्या कभी ऐसा deterministic standard बनेगा जिसमें सभी browsers एक ही result दें? यह function असल में UX team के design-stage support tool जैसा लगता है.

    • लेख के अनुसार standard में calculation method साफ़ तौर पर define की गई है

    • 'चुनता है' जैसा शब्द थोड़ा ambiguous लगता है। असल में algorithm color compute करता है

    • लिंक में दिए APCA example formula में जो errors या confusion हैं उन्हें छोड़ दें, तो वह 100% सही काम करता है। अगर पूरी consistency चाहिए, तो जब दोनों candidate colors (हल्का/गहरा दोनों) acceptable हों, तब background color की lightness (L*) के आधार पर, जैसे L* 60 या उससे ऊपर हो तो हल्का वाला चुन लें। इससे 100% consistency मिल जाएगी.

  • बड़े project में इस बात का अलग से ध्यान रखना मुश्किल है कि कहीं buttons ऐसे रंग में न बदल जाएँ कि दिखें ही नहीं, जैसे गहरे button पर काला text। लेकिन मेरा ख़याल था कि release से पहले सारे buttons को manually check कर लिया जाए। या फिर पूरी team में पहले से rule बना दिया जाए कि dark buttons पर black text कभी नहीं होगा। perceptual contrast और mathematical contrast का फर्क दिलचस्प लगा। इसे अपने workflow में लागू करूँगा.

    • हाँ, buttons की पूरी manual checking संभव है, लेकिन इस तरह करने पर pre-regression testing में कई हफ़्ते, कभी-कभी महीनों तक लग सकते हैं। बड़े project में आसानी से हज़ारों buttons होते हैं, और कई buttons सिर्फ खास option combinations या workflows में ही दिखाई देते हैं

    • APCA को देखें तो perceptual contrast calculation संभव है

  • जब system colors लोकप्रिय थे, तब मैंने button styles बनाए थे। देखने में तो बढ़िया लगते थे, लेकिन contrast ratio क्या होगी यह पता नहीं चलता था, इसलिए किसी ने JavaScript से getComputedStyle लेकर calculation की थी। अगर contrast खराब हो तो दूसरा color candidate इस्तेमाल करते थे, या मजबूरी में text-shadow से text के आसपास contrast effect बढ़ा देते थे। calculation method अब याद नहीं, लेकिन लगता है 3 RGB values का average लेकर तुलना की जा सकती है। blue में average value कम होगी, तो शायद white text को प्राथमिकता दी जा सकती है.

  • कम-से-कम light/dark theme में active, focus, hover, link, visited जैसे pseudo-classes के लिए अच्छे color recommendations मिलें तो अच्छा होगा। Material UI इसमें disabled, before, after states भी जोड़ता है.

  • मैंने पहले background color के आधार पर black/white text चुनने के तरीके पर एक video tutorial बनाया था। मेरा तरीका simple था: color को grayscale में बदलो और फिर तय करो कि black या white में से क्या इस्तेमाल करना है। मज़ेदार काम था। video बनाने में मैं बहुत अच्छा नहीं हूँ।
    https://youtu.be/tUJvE4xfTgo?si=vFlegFA_7lzijfSR (Portuguese पर ध्यान दें)

    • दिलचस्प बात यह है कि दूसरे comment में ठीक यही काम करने वाला color-space formula बताया गया था।
      https://news.ycombinator.com/item?id=44015990
      video ठीक लग रहा है। code अच्छा दिखता है, लेकिन मुझे Portuguese नहीं आती इसलिए content का आकलन नहीं कर सकता.

  • जब आप पूरा color scheme खुद चुन रहे हैं, तो फिर contrast button text color चुनना शुरू से खुद चुनने की तुलना में आसान क्यों माना जाए, यह समझ नहीं आता। यह feature शायद सिर्फ उसी बहुत extreme स्थिति में ज़रूरी होगा जहाँ background colors तो मनमाने चुने जाते हों लेकिन foreground color (button text color) नहीं चुना जा सकता। असली समस्या तो वह है जहाँ text को images या विभिन्न backgrounds पर हमेशा readable रखना हो, और यह feature उसे बिल्कुल handle नहीं करता। इसलिए यह सिर्फ बहुत सीमित स्थितियों में ही उपयोगी लगता है। ऐसे feature के लिए नया verb बनाना, feature को सिर्फ black/white selection तक सीमित रखना, और ऊपर से सबसे कमजोर contrast algorithm (WCAG 2) इस्तेमाल करना—यह सब निराशाजनक है। कमाल है.

    • सिर्फ इसलिए कि आपको किसी tool की ज़रूरत नहीं पड़ी, उसे तुरंत ख़ारिज कर देना ठीक नहीं लगता। कई websites में users मनमाने colors चुनते हैं, या uploaded सामग्री से colors extract किए जाते हैं। accessibility का ध्यान रखने वाली sites में ऐसे मामलों के लिए automatic contrast calculation ज़रूरी हो जाता है। अगर ऐसी built-in CSS functionality आ जाए, तो basic accessibility भी आसानी से संभाली जा सकती है। बेशक, जो developers और advanced experience बनाना चाहते हैं, उनके लिए यह कोई बंदिश नहीं है। contrast-color npm package की तरह अगर और customization मिले तो और अच्छा होगा, लेकिन blog के अनुसार फिलहाल black/white selection algorithm को पहले step के रूप में शुरू किया गया है और आगे सुधार की योजना है।
      उदाहरण: https://coolors.co/8fbfe0-7c77b9-1d8a99-0bc9cd-14fff7

    • contrast selection algorithm के कमज़ोर होने वाली बात पर, साफ़ कहा गया है कि अभी यह WCAG 2 algorithm का पालन करता है और आगे जब WCAG 3 standardize होगा, तो उस algorithm पर आसानी से switch किया जा सकता है

  • सोच रहा हूँ कि SASS, Tailwind आदि पर लागू किए जा सकने वाले ऐसे feature के build-time alternatives हैं या नहीं। इस feature को व्यापक रूप से अपनाने में समय लगेगा, और यह भी चिंता है कि अलग-अलग platforms पर implementation एक जैसा होगा या नहीं.