पृष्ठभूमि के रंग के आधार पर सफेद या काले रंग में फ़ॉन्ट रंग कैसे तय किया जाए?

Question

मैं इस तरह के कुछ चित्र दिखाना चाहता हूं

भरण का रंग डेटा बेस में हेक्स (उदा: ClassX -> रंग: # 66FFFF) रंग के साथ एक क्षेत्र द्वारा तय किया जाता है। अब, मैं चयनित रंग के साथ भरण के ऊपर डेटा दिखाना चाहता हूं (जैसे ऊपर की छवि में) लेकिन मुझे यह जानने की आवश्यकता है कि क्या रंग गहरा या हल्का है, इसलिए मुझे पता है कि क्या शब्द सफेद या काले रंग में होने चाहिए। क्या उधर रास्ता है? टी.के.एस

Comments

संबंधित (लेकिन यह भी ड्यूप्स): stackoverflow.com/questions/3942878/... stackoverflow.com/questions/3116260/...

— JYelton

Answer 1

इसी तरह के सवाल के मेरे जवाब पर निर्माण ।

आपको अलग-अलग लाल, हरे और नीले रंग की तीव्रता पाने के लिए हेक्स कोड को 3 टुकड़ों में तोड़ना होगा। कोड के प्रत्येक 2 अंक हेक्साडेसिमल (बेस -16) अंकन में एक मूल्य का प्रतिनिधित्व करते हैं। मैं यहाँ रूपांतरण के विवरण में नहीं जाऊँगा, उन्हें देखना आसान है।

एक बार जब आपके पास व्यक्तिगत रंगों के लिए तीव्रता होती है, तो आप रंग की समग्र तीव्रता निर्धारित कर सकते हैं और संबंधित पाठ चुन सकते हैं।

if (red*0.299 + green*0.587 + blue*0.114) > 186 use #000000 else use #ffffff

186 की दहलीज सिद्धांत पर आधारित है, लेकिन स्वाद के लिए समायोजित किया जा सकता है। 150 की सीमा के नीचे की टिप्पणियों के आधार पर आपके लिए बेहतर काम हो सकता है।

---

संपादित करें: ऊपर सरल है और यथोचित रूप से अच्छी तरह से काम करता है, और लगता है कि StackOverflow में यहाँ अच्छी स्वीकृति है। हालांकि, नीचे दी गई टिप्पणियों में से एक यह दिखाता है कि कुछ परिस्थितियों में डब्ल्यू 3 सी दिशानिर्देशों का अनुपालन नहीं हो सकता है। इसके साथ मैं एक संशोधित रूप प्राप्त करता हूं जो हमेशा दिशानिर्देशों के आधार पर उच्चतम विपरीत चुनता है। यदि आपको W3C नियमों के अनुरूप होने की आवश्यकता नहीं है, तो मैं ऊपर दिए गए सरल सूत्र के साथ रहना चाहूँगा।

W3C अनुशंसाओं में विपरीत के लिए दिया गया सूत्र है (L1 + 0.05) / (L2 + 0.05), जहां L1सबसे हल्के रंग L2का प्रकाश है और 0.0-1.0 के पैमाने पर सबसे अंधेरे का प्रकाश है। काले रंग की चमक 0.0 है और सफेद 1.0 है, इसलिए उन मूल्यों को प्रतिस्थापित करने से आप उच्चतम विपरीत के साथ एक का निर्धारण कर सकते हैं। यदि काले रंग के विपरीत सफेद के लिए विपरीत से अधिक है, तो काले रंग का उपयोग करें, अन्यथा सफेद रंग का उपयोग करें। रंग की चमक को देखते हुए आप परीक्षण के रूप Lमें परीक्षण कर रहे हैं :

if (L + 0.05) / (0.0 + 0.05) > (1.0 + 0.05) / (L + 0.05) use #000000 else use #ffffff

यह बीजगणित को सरल बनाता है:

if L > sqrt(1.05 * 0.05) - 0.05

या लगभग:

if L > 0.179 use #000000 else use #ffffff

केवल एक ही चीज की गणना करना है L। वह सूत्र भी दिशा - निर्देशों में दिया गया है और यह लग रहा है कि sRGB से रैखिक RGB में रूपांतरण के बाद ITU-R सिफारिश BT.709 के लिए luminance है।

for each c in r,g,b:
    c = c / 255.0
    if c <= 0.03928 then c = c/12.92 else c = ((c+0.055)/1.055) ^ 2.4
L = 0.2126 * r + 0.7152 * g + 0.0722 * b

0.179 की सीमा को तब से नहीं बदला जाना चाहिए क्योंकि यह डब्ल्यू 3 सी दिशानिर्देशों से बंधा है। यदि आप अपनी पसंद के अनुसार परिणाम नहीं पाते हैं, तो ऊपर दिए गए सरल सूत्र का प्रयास करें।

Comments

Tks मार्क। कुछ बदलाव की कोशिश की: केवल पहले अंक (कम सटीक लेकिन अधिक वजन के साथ अंक) द्वारा लाल हरे और नीले रंग की गणना की गई। 186 के बजाय 9 का उपयोग किया। 9. मेरे लिए थोड़ा बेहतर काम करता है, विशेष रूप से साग के साथ।

— डीजेपीबी

यह सूत्र बहुत गलत है। एक उदाहरण लेने के लिए, यह पीले रंग #D6B508को 171 का मूल्य देता है , इसलिए एक सफेद विपरीत। इसके विपरीत काला होना चाहिए, लेकिन इसकी पुष्टि की जानी चाहिए: webaim.org/resources/contrastchecker )

— मैकगर्लगेल

@MarkRansom हाँ, मेरी आँखों के लिए काला उस पीले रंग के साथ बहुत अच्छा लगता है। चूंकि मैं रंगों के सीमित सेट के साथ काम कर रहा हूं, मैं 186 से कट-ऑफ को कम मूल्य पर स्थानांतरित करने में सक्षम था।

— मैकगर्लगेल

इस उत्तर में दिए गए दो सूत्रों की तुलना करने वाला एक और डेमो यहां दिया गया है। कलर पिकर (हाल के फ़ायरफ़ॉक्स या क्रोम में) का उपयोग करके आप किसी भी रंग के विपरीत की जांच कर सकते हैं।

— chetstone

थोड़ी देर के लिए @ चेटस्टोन के डेमो के साथ खेलने के बाद, मुझे लगता है कि सिंपल फॉर्मूला मेरे लिए सबसे अच्छा काम करता है, सिवाय इसके कि मैं दहलीज की सिफारिश से असहमत हूं। शुद्ध हरे रंग के परिणामों के आधार पर, मैंने थ्रेसहोल्ड को 149 पर सेट करने की कोशिश की और यह मेरी राय में बहुत बेहतर काम करता है। मैंने इसे प्रदर्शित करने के लिए वास्तव में गूंगा बना दिया ; आप मूल सुझाव को देखने के लिए शीर्ष पर थ्रेशोल्ड को बदलने का प्रयास कर सकते हैं।

— मिरल

Answer 2

मैं इस कोड का कोई श्रेय नहीं लेता क्योंकि यह मेरा नहीं है, लेकिन मैं इसे भविष्य में जल्दी खोजने के लिए दूसरों के लिए यहां छोड़ देता हूं:

मार्क रैंसम के उत्तर के आधार पर, यहां सरल संस्करण के लिए एक कोड स्निपेट दिया गया है:

function pickTextColorBasedOnBgColorSimple(bgColor, lightColor, darkColor) {
  var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
  var r = parseInt(color.substring(0, 2), 16); // hexToR
  var g = parseInt(color.substring(2, 4), 16); // hexToG
  var b = parseInt(color.substring(4, 6), 16); // hexToB
  return (((r * 0.299) + (g * 0.587) + (b * 0.114)) > 186) ?
    darkColor : lightColor;
}

और यहाँ उन्नत संस्करण के लिए कोड स्निपेट है:

function pickTextColorBasedOnBgColorAdvanced(bgColor, lightColor, darkColor) {
  var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
  var r = parseInt(color.substring(0, 2), 16); // hexToR
  var g = parseInt(color.substring(2, 4), 16); // hexToG
  var b = parseInt(color.substring(4, 6), 16); // hexToB
  var uicolors = [r / 255, g / 255, b / 255];
  var c = uicolors.map((col) => {
    if (col <= 0.03928) {
      return col / 12.92;
    }
    return Math.pow((col + 0.055) / 1.055, 2.4);
  });
  var L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
  return (L > 0.179) ? darkColor : lightColor;
}

उनका उपयोग करने के लिए बस कॉल करें:

var color = '#EEACAE' // this can be any color
pickTextColorBasedOnBgColorSimple(color, '#FFFFFF', '#000000');

इसके अलावा, धन्यवाद Alxऔर chetstone।

Comments

मैंने साधारण फ़ंक्शन का उपयोग किया, और इसे थोड़ा और नीचे ले isDark(bgColor)'color': isDark(color)?'white':'black'

— जाया

मेरे लिए एक जादू की तरह काम किया। आपका बहुत बहुत धन्यवाद! यह php में किया था, हालांकि बस वाक्यविन्यास और कार्यों को परिवर्तित करना।

— CezarBastos

Answer 3

इस (जावास्क्रिप्ट कोड) के बारे में कैसे?

/**
 * Get color (black/white) depending on bgColor so it would be clearly seen.
 * @param bgColor
 * @returns {string}
 */
getColorByBgColor(bgColor) {
    if (!bgColor) { return ''; }
    return (parseInt(bgColor.replace('#', ''), 16) > 0xffffff / 2) ? '#000' : '#fff';
}

Comments

यह ज्यादातर समय काम करता है लेकिन i.imgur.com/3pOUDe5.jpg जैसे मामले हैं जो अजीब लगते हैं, पृष्ठभूमि का रंग वास्तव में आरजीबी (6, 247, 241) है;

— मैडप्रॉप्स

मैं सराहना करता हूं कि यह उन मामलों में एक विपरीत गणना करने के लिए एक अपेक्षाकृत सस्ता तरीका है जहां आपने पहले से ही रंग को आरजीबी मूल्यों में परिवर्तित नहीं किया है (ऐसा नहीं है कि बहुत मुश्किल है, सिर्फ अतिरिक्त गणित कदम)

— 5

Answer 4

इसके अतिरिक्त अंकगणितीय समाधानों में, एआई न्यूरल नेटवर्क का उपयोग करना भी संभव है। फायदा यह है कि आप इसे अपने स्वाद और ज़रूरतों के हिसाब से तैयार कर सकते हैं (यानी चमकीले संतृप्त लाल रंग पर ऑफ-व्हाइट टेक्स्ट अच्छा दिखता है और उतना ही पठनीय है जितना काला)।

यहां एक साफ-सुथरा जावास्क्रिप्ट डेमो है जो अवधारणा को दिखाता है। आप डेमो में ही अपना JS फॉर्मूला भी तैयार कर सकते हैं।

https://harthur.github.io/brain/

नीचे कुछ चार्ट दिए गए हैं जिनसे मुझे समस्या के आसपास अपना दिमाग लगाने में मदद मिली । पहले चार्ट में, हल्कापन एक निरंतर 128 है, जबकि ह्यू और संतृप्ति में भिन्नता है। दूसरे चार्ट में, संतृप्ति एक निरंतर 255 है, जबकि ह्यू और लपट अलग-अलग है।

Answer 5

यहाँ Android के लिए जावा में मेरा समाधान है:

// Put this method in whichever class you deem appropriate
// static or non-static, up to you.
public static int getContrastColor(int colorIntValue) {
    int red = Color.red(colorIntValue);
    int green = Color.green(colorIntValue);
    int blue = Color.blue(colorIntValue);
    double lum = (((0.299 * red) + ((0.587 * green) + (0.114 * blue))));
    return lum > 186 ? 0xFF000000 : 0xFFFFFFFF;
}

// Usage
// If Color is represented as HEX code:
String colorHex = "#484588";
int color = Color.parseColor(colorHex);

// Or if color is Integer:
int color = 0xFF484588;

// Get White (0xFFFFFFFF) or Black (0xFF000000)
int contrastColor = WhateverClass.getContrastColor(color);

Comments

क्या यह वास्तव में 'परफेक्ट' है? शुद्ध हरे रंग की पृष्ठभूमि का प्रयास करें, # 00FF00।

— एंड्रियास रिब्रांडैंड

यह सच है कि यह सभी रंगों के लिए परीक्षण नहीं किया गया है .... लेकिन जो उपयोगकर्ताओं को परेशान करने के लिए डिज़ाइन नहीं किया गया था, उनके लिए एक शुद्ध हरे रंग की पृष्ठभूमि का उपयोग कौन करेगा?

— mwieczorek

@mwieczorek वे लोग जो उपयोगकर्ता द्वारा तैयार की गई सामग्री या बेतरतीब ढंग से चयनित रंगों पर भरोसा करते हैं।

— मार्क प्लानो-लेसे

Answer 6

@MarkRansom के उत्तर के आधार पर, मैंने एक PHP स्क्रिप्ट बनाई जो आप यहाँ पा सकते हैं:

function calcC($c) {
    if ($c <= 0.03928) {
        return $c / 12.92;
    }
    else {
        return pow(($c + 0.055) / 1.055, 2.4);
    }
}

function cutHex($h) {
    return ($h[0] == "#") ? substr($h, 1, 7) : $h;
}

function hexToR($h) {
    return hexdec(substr(cutHex($h), 0, 2));
}

function hexToG($h) {
    return hexdec(substr(cutHex($h), 2, 2)); // Edited
}

function hexToB($h) {
    return hexdec(substr(cutHex($h), 4, 2)); // Edited
}

function computeTextColor($color) {
    $r = hexToR($color);
    $g = hexToG($color);
    $b = hexToB($color);
    $uicolors = [$r / 255, $g / 255, $b / 255];


    $c = array_map("calcC", $uicolors);

    $l = 0.2126 * $c[0] + 0.7152 * $c[1] + 0.0722 * $c[2];
    return ($l > 0.179) ? '#000000' : '#ffffff';
}

Answer 7

यह UIColor के विस्तार के रूप में मार्क रैंसम के उत्तर का एक स्विफ्ट संस्करण है

extension UIColor {

// Get the rgba components in CGFloat
var rgba: (red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat) {
    var red: CGFloat = 0, green: CGFloat = 0, blue: CGFloat = 0, alpha: CGFloat = 0

    getRed(&red, green: &green, blue: &blue, alpha: &alpha)

    return (red, green, blue, alpha)
}

/// Return the better contrasting color, white or black
func contrastColor() -> UIColor {
    let rgbArray = [rgba.red, rgba.green, rgba.blue]

    let luminanceArray = rgbArray.map({ value -> (CGFloat) in
        if value < 0.03928 {
            return (value / 12.92)
        } else {
            return (pow( (value + 0.55) / 1.055, 2.4) )
        }
    })

    let luminance = 0.2126 * luminanceArray[0] +
        0.7152 * luminanceArray[1] +
        0.0722 * luminanceArray[2]

    return luminance > 0.179 ? UIColor.black : UIColor.white
} }

Answer 8

यह केवल एक उदाहरण है जो किसी तत्व पर क्लिक करते समय SVG चेकमार्क का रंग बदल देगा। यह क्लिक किए गए तत्व की पृष्ठभूमि-रंग के आधार पर चेकमार्क रंग को काले या सफेद में सेट करेगा।

checkmarkColor: function(el) {
    var self = el;
    var contrast = function checkContrast(rgb) {
        // @TODO check for HEX value

        // Get RGB value between parenthesis, and remove any whitespace
        rgb = rgb.split(/\(([^)]+)\)/)[1].replace(/ /g, '');

        // map RGB values to variables
        var r = parseInt(rgb.split(',')[0], 10),
            g = parseInt(rgb.split(',')[1], 10),
            b = parseInt(rgb.split(',')[2], 10),
            a;

        // if RGBA, map alpha to variable (not currently in use)
        if (rgb.split(',')[3] !== null) {
            a = parseInt(rgb.split(',')[3], 10);
        }

        // calculate contrast of color (standard grayscale algorithmic formula)
        var contrast = (Math.round(r * 299) + Math.round(g * 587) + Math.round(b * 114)) / 1000;

        return (contrast >= 128) ? 'black' : 'white';
    };

    $('#steps .step.color .color-item .icon-ui-checkmark-shadow svg').css({
        'fill': contrast($(self).css('background-color'))
    });
}

onClickExtColor: function(evt) {
    var self = this;

    self.checkmarkColor(evt.currentTarget);
}

---

https://gist.github.com/dcondrey/183971f17808e9277572

Answer 9

मैं परिवर्तित करने के लिए इस JavaScript कार्य का उपयोग rgb/ rgbaकरने के लिए 'white'या 'black'।

function getTextColor(rgba) {
    rgba = rgba.match(/\d+/g);
    if ((rgba[0] * 0.299) + (rgba[1] * 0.587) + (rgba[2] * 0.114) > 186) {
        return 'black';
    } else {
        return 'white';
    }
}

आप इनमें से किसी भी प्रारूप में प्रवेश कर सकते हैं और यह आउटपुट 'black'या'white'

• rgb(255,255,255)
• rgba(255,255,255,0.1)
• color:rgba(255,255,255,0.1)
• 255,255,255,0.1

Comments

अब इसे शुद्ध हरे रंग की पृष्ठभूमि के साथ आज़माएँ: # 00FF00

— एंड्रियाज रिब्रांडैंड

इसके लिए शुक्रिया! स्विफ्ट में अनुवादित और इसका उपयोग मेरे ios ऐप में किया!

— लुकास पी।

Answer 10

मार्क का विस्तृत जवाब शानदार काम करता है। यहाँ जावास्क्रिप्ट में एक कार्यान्वयन है:

function lum(rgb) {
    var lrgb = [];
    rgb.forEach(function(c) {
        c = c / 255.0;
        if (c <= 0.03928) {
            c = c / 12.92;
        } else {
            c = Math.pow((c + 0.055) / 1.055, 2.4);
        }
        lrgb.push(c);
    });
    var lum = 0.2126 * lrgb[0] + 0.7152 * lrgb[1] + 0.0722 * lrgb[2];
    return (lum > 0.179) ? '#000000' : '#ffffff';
}

फिर इस फ़ंक्शन lum([111, 22, 255])को सफेद या काला पाने के लिए कॉल कर सकते हैं ।

Answer 11

मैंने ऐसा कुछ भी कभी नहीं किया है, लेकिन हेक्स 7 एफ (एफएफ / 2) के औसत रंग के खिलाफ प्रत्येक रंग के मूल्यों की जांच करने के लिए एक फ़ंक्शन लिखने के बारे में क्या। यदि तीन में से दो रंग 7F से अधिक हैं, तो आप गहरे रंग के साथ काम कर रहे हैं।

Answer 12

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

कोड नीचे दिया गया है:

 public static class ColorExtension
{       
    public static int PerceivedBrightness(this Color c)
    {
        return (int)Math.Sqrt(
        c.R * c.R * .299 +
        c.G * c.G * .587 +
        c.B * c.B * .114);
    }
    public static Color ContrastColor(this Color iColor, Color darkColor,Color lightColor)
    {
        //  Counting the perceptive luminance (aka luma) - human eye favors green color... 
        double luma = (iColor.PerceivedBrightness() / 255);

        // Return black for bright colors, white for dark colors
        return luma > 0.5 ? darkColor : lightColor;
    }
    public static Color ContrastColor(this Color iColor) => iColor.ContrastColor(Color.Black);
    public static Color ContrastColor(this Color iColor, Color darkColor) => iColor.ContrastColor(darkColor, Color.White);
    // Converts a given Color to gray
    public static Color ToGray(this Color input)
    {
        int g = (int)(input.R * .299) + (int)(input.G * .587) + (int)(input.B * .114);
        return Color.FromArgb(input.A, g, g, g);
    }
}

Answer 13

अगर मेरी तरह आप एक RGBA संस्करण की तलाश में थे जो अल्फा को ध्यान में रखता है, तो यहां एक है जो उच्च विपरीतता के लिए वास्तव में अच्छी तरह से काम करता है।

function getContrastColor(R, G, B, A) {
  const brightness = R * 0.299 + G * 0.587 + B * 0.114 + (1 - A) * 255;

  return brightness > 186 ? "#000000" : "#FFFFFF";
}

Answer 14

यह केवल आधार R का उपयोग करते हुए, मार्क रैनसम के उत्तर का एक R संस्करण है।

hex_bw <- function(hex_code) {

  myrgb <- as.integer(col2rgb(hex_code))

  rgb_conv <- lapply(myrgb, function(x) {
    i <- x / 255
    if (i <= 0.03928) {
      i <- i / 12.92
    } else {
      i <- ((i + 0.055) / 1.055) ^ 2.4
    }
    return(i)
  })

 rgb_calc <- (0.2126*rgb_conv[[1]]) + (0.7152*rgb_conv[[2]]) + (0.0722*rgb_conv[[3]])

 if (rgb_calc > 0.179) return("#000000") else return("#ffffff")

}

> hex_bw("#8FBC8F")
[1] "#000000"
> hex_bw("#7fa5e3")
[1] "#000000"
> hex_bw("#0054de")
[1] "#ffffff"
> hex_bw("#2064d4")
[1] "#ffffff"
> hex_bw("#5387db")
[1] "#000000"

Answer 15

@SoBiT, मैं आपके उत्तर को देख रहा था, जो अच्छा लग रहा है, लेकिन इसमें एक छोटी सी गलती है। आपका फ़ंक्शन hexToG, और hextoB को एक छोटे से संपादन की आवश्यकता है। मूल में अंतिम संख्या स्ट्रिंग की लंबाई है, और इसलिए इस मामले में 4 या 6 के बजाय इसका "2" होना चाहिए।

function hexToR($h) {
    return hexdec(substr(cutHex($h), 0, 2));
}
function hexToG($h) {
    return hexdec(substr(cutHex($h), 2, 2));
}
function hexToB($h) {
    return hexdec(substr(cutHex($h), 4, 2));
}

Answer 16

LESS का एक अच्छा contrast()कार्य है जो मेरे लिए अच्छी तरह से काम करता है, http://lesscss.org/functions/#color-operion-strast देखें

"चुनें कि कौन से दो रंग दूसरे के साथ सबसे बड़ा कंट्रास्ट प्रदान करते हैं। यह सुनिश्चित करने के लिए उपयोगी है कि एक पृष्ठभूमि के खिलाफ एक रंग पठनीय है, जो एक्सेसिबिलिटी अनुपालन के लिए भी उपयोगी है। यह फ़ंक्शन कंपास में एसएएस के विपरीत फ़ंक्शन के समान कार्य करता है। डब्ल्यूसीएजी 2.0 के अनुसार, रंगों की तुलना उनके गामा-सुधारे हुए लूमा मूल्य के उपयोग से की जाती है, न कि उनके हल्केपन की। "

उदाहरण:

p {
    a: contrast(#bbbbbb);
    b: contrast(#222222, #101010);
    c: contrast(#222222, #101010, #dddddd);
    d: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 30%);
    e: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 80%);
}

आउटपुट:

p {
    a: #000000 // black
    b: #ffffff // white
    c: #dddddd
    d: #000000 // black
    e: #ffffff // white
}

Answer 17

हेक्स से काले या सफेद:

function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result
    ? [
        parseInt(result[1], 16),
        parseInt(result[2], 16),
        parseInt(result[3], 16)
      ]
    : [0, 0, 0];
}

function lum(hex) {
  var rgb = hexToRgb(hex)
  var lrgb = [];
  rgb.forEach(function(c) {
    c = c / 255.0;
    if (c <= 0.03928) {
      c = c / 12.92;
    } else {
      c = Math.pow((c + 0.055) / 1.055, 2.4);
    }
    lrgb.push(c);
  });
  var lum = 0.2126 * lrgb[0] + 0.7152 * lrgb[1] + 0.0722 * lrgb[2];
  return lum > 0.179 ? "#000000" : "#ffffff";
}

Answer 18

मार्क के जवाब के आधार पर iOS के लिए उद्देश्य-सी संस्करण कोड:

- (UIColor *)contrastForegroundColor {
CGFloat red = 0, green = 0, blue = 0, alpha = 0;
[self getRed:&red green:&green blue:&blue alpha:&alpha];
NSArray<NSNumber *> *rgbArray = @[@(red), @(green), @(blue)];
NSMutableArray<NSNumber *> *parsedRGBArray = [NSMutableArray arrayWithCapacity:rgbArray.count];
for (NSNumber *item in rgbArray) {
    if (item.doubleValue <= 0.03928) {
        [parsedRGBArray addObject:@(item.doubleValue / 12.92)];
    } else {
        double newValue = pow((item.doubleValue + 0.055) / 1.055, 2.4);
        [parsedRGBArray addObject:@(newValue)];
    }
}

double luminance = 0.2126 * parsedRGBArray[0].doubleValue + 0.7152 * parsedRGBArray[1].doubleValue + 0.0722 * parsedRGBArray[2].doubleValue;

return luminance > 0.179 ? UIColor.blackColor : UIColor.whiteColor;
}

Answer 19

सभी 24 बिट रंगों के साथ परीक्षण के बारे में क्या?

विदित हो कि YIQ विधि 1.9: 1 का न्यूनतम कंट्रास्ट अनुपात लौटाएगी, जो कि AA और AAA WCAG2.0 परीक्षणों को पारित नहीं करता है, और यह 128 सीमा है।

W3C विधि के लिए, यह 4.58: 1 का न्यूनतम विपरीत अनुपात लौटाएगा, जो बड़े पाठ के लिए AA और AAA परीक्षण उत्तीर्ण करेगा, और छोटे पाठ के लिए AA परीक्षण, यह हर रंग के लिए छोटे पाठ के लिए AAA परीक्षा उत्तीर्ण नहीं करेगा।

Answer 20

यहां मेरा अपना तरीका है जिसका मैं उपयोग कर रहा हूं और अब तक कोई समस्या नहीं हुई है

const hexCode = value.charAt(0) === '#' 
                  ? value.substr(1, 6)
                  : value;

const hexR = parseInt(hexCode.substr(0, 2), 16);
const hexG = parseInt(hexCode.substr(2, 2), 16);
const hexB = parseInt(hexCode.substr(4, 2), 16);
// Gets the average value of the colors
const contrastRatio = (hexR + hexG + hexB) / (255 * 3);

contrastRatio >= 0.5
  ? 'black'
  : 'white';

Answer 21

मैंने RGB रंग और पृष्ठभूमि रंग के HEX मान के आधार पर अग्रभूमि रंग का चयन करने के लिए पायथन मॉड्यूल बनाया: https://github.com/azaitsev/foreground

Answer 22

यहाँ मार्क स्विंग के अद्भुत जवाब के आधार पर जावा स्विंग के लिए मेरा कोड है:

public static Color getColorBasedOnBackground(Color background, Color darkColor, Color lightColor) {
    // Calculate foreground color based on background (based on https://stackoverflow.com/a/3943023/)
    Color color;
    double[] cL = new double[3];
    double[] colorRGB = new double[] {background.getRed(), background.getGreen(), background.getBlue()};

    for (int i = 0; i < colorRGB.length; i++)
        cL[i] = (colorRGB[i] / 255.0 <= 0.03928) ? colorRGB[i] / 255.0 / 12.92 :
                Math.pow(((colorRGB[i] / 255.0 + 0.055) / 1.055), 2.4);

    double L = 0.2126 * cL[0] + 0.7152 * cL[1] + 0.0722 * cL[2];
    color = (L > Math.sqrt(1.05 * 0.05) - 0.05) ? darkColor : lightColor;

    return color;
}