这是马克·兰森的答案的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"

用所有24位的颜色测试怎么样?

请注意，YIQ方法将返回1.9:1的最小对比度，这不会通过AA和AAA WCAG2.0测试，假设阈值为128。

对于W3C方法，它将返回最小对比度4.58:1，通过AA和AAA测试的大文本，AA测试的小文本，它不会通过AAA测试的小文本的每一种颜色。

我在@SudoPlz提出的高级函数的基础上做了一个函数，它也考虑了浅色和深色:

function getTextColor (bgColor, lightColor = '#FFFFFF', darkColor = '#000000') {

  const getLuminance = function (hexColor) {
    var color = (hexColor.charAt(0) === '#') ? hexColor.substring(1, 7) : hexColor
    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 => col <= 0.03928 ? col / 12.92 : ((col + 0.055) / 1.055) ** 2.4)

    return (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
  }

  var L = getLuminance(bgColor)
  var L1 = getLuminance(lightColor)
  var L2 = getLuminance(darkColor)

  return (L > Math.sqrt((L1 + 0.05) * (L2 + 0.05)) - 0.05) ? darkColor : lightColor;
}

因此，如果深色文本不是黑色而是栗色，灰色背景上的推荐文本颜色会变成白色:

getTextColor('#808080')
"#000000"

getTextColor('#808080', '#FFFFFF', '#800000')
"#FFFFFF"

以防有人关心Mark Ransom回答的SCSS版本:

@use 'sass:color' as *;
@use 'sass:math' as *;

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

@function pickTextColorBasedOnBgColorAdvanced(
  $bgColor,
  $lightColor,
  $darkColor
) {
  $r: red($bgColor);
  $g: green($bgColor);
  $b: blue($bgColor);
  $ui_r: $r / 255;
  $ui_g: $g / 255;
  $ui_b: $b / 255;

  $ui_r_c: col_r($ui_r);
  $ui_g_c: col_r($ui_g);
  $ui_b_c: col_r($ui_b);

  $L: (0.2126 * $ui_r_c) + (0.7152 * $ui_g_c) + (0.0722 * $ui_b_c);
  @if ($L > 0.179) {
    @return $darkColor;
  } @else {
    @return $lightColor;
  }
}

这只是一个示例，它将在单击元素时更改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

当使用androidx. composer .ui.graphics. color时，接受的答案在Android上从未工作过。然后我发现在Android Jetpack Compose中实际上有内置的luminance()函数，该函数返回[0,1]之间的亮度值。文档说明:“基于WCAG 2.0中定义的相对亮度公式，W3C推荐标准2008年12月11日。”

以下是官方源代码。

使用示例:

fun Color.generateOnColor()
        : Color {
    return if (luminance() > 0.5f) {
        Color.Black.copy(alpha = .8f)
    } else {
        Color.White
    }
}