根据背景色自适应文本颜色

针对企业服务来讲，最终用户每每须要更加细化的信息分类方式，而打标签无疑是很是好的解决方案。

若是标签仅仅只提供几种颜色可能没法知足各个用户的实际需求。那么系统就须要为用户提供颜色选择。事实上咱们彻底没法预知用户选择了何种颜色，那么若是当前用户选择了黑色做为背景色，同时当前的字体颜色也是黑色，该标签就没法使用。若是配置背景色的同时还要求用户配置文字颜色，那么这个标签功能未免有些鸡肋。让用户以为咱们的开发水平有问题。

因此须要寻找一种解决方案来搞定这个问题。

问题解析

对于彩色转灰度，有一个著名的公式。咱们能够把十六进制的代码分红3个部分，以得到单独的红色，绿色和蓝色的强度。用此算法逐个修改像素点的颜色能够将当前的彩色图片变为灰色图像。

gray = r * 0.299 + g * 0.587 + b * 0.114

可是针对明亮和阴暗的颜色，通过公式的计算后必定会得到不一样的数值，而针对当前不一样值，咱们取反就能够获得当前的文本颜色。即：

const textColor = (r * 0.299 + g * 0.587 + b * 0.114) > 186 ? '#000' : '#FFF'

固然了，186 并非一个肯定的数值，你能够根据本身的需求调整一个新的数值。经过该算法,传入不一样的背景色，就能够获得白色和黑色，或者自定义出比较合适的文本颜色。

完善代码

固然，虽然解决的方法很是简单，可是中间仍是涉及了一些进制转换问题，这里简单传递数值以下所示。

/**
 * @param backgroundColor 字符串 传入  #FFFBBC | FBC | FFBBCC 都可
 */
export function contrastTextColor(backgroundHexColor: string) {
  let hex = backgroundHexColor
  
  // 若是当前传入的参数以 # 开头,去除当前的
  if (hex.startsWith('#')) {
    hex = hex.substring(1);
  }
  // 若是当前传入的是 3 位小数值，直接转换为 6 位进行处理
  if (hex.length === 3) {
    hex = [hex[0], hex[0], hex[1], hex[1], hex[2], hex[2]].join('')
  }

  if (hex.length !== 6) {
    throw new Error('Invalid background color.' + backgroundHexColor);
  }

  const r = parseInt(hex.slice(0, 2), 16)
  const g = parseInt(hex.slice(2, 4), 16)
  const b = parseInt(hex.slice(4, 6), 16)
  
  if ([r,g,b].some(x => Number.isNaN(x))) {
     throw new Error('Invalid background color.' + backgroundHexColor);
  }

  const textColor = (r * 0.299 + g * 0.587 + b * 0.114) > 186 ? '#000' : '#FFF'
  return textColor
}

咱们还能够在其中添加 rgb 颜色，以及转换逻辑。

/**
 * @param backgroundColor 字符串
 */
export function contrastTextColor(backgroundHexColor: string) {
  // 均转换为 hex 格式， 能够传入 rgb(222,33,44)。
  // 若是当前字符串参数长度大于 7 rgb(,,) 最少为 8 个字符，则认为当前传入的数值为 rgb，进行转换
  const backgroundHexColor = backgroundColor.length > 7 ? convertRGBToHex(backgroundColor) : backgroundColor
  
  // ... 后面代码
}

/** 获取背景色中的多个值,即 rgb(2,2,2) => [2,2,2] */
const rgbRegex = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/

/** 转换 10 进制为 16 进制, 
  * 计算完成后时字符串前面加 0，同时取后两位数值。使得返回的数值必定是 两位数
  * 如 E => 0E  |  FF => 0FF => FF
  */
const hex = (x: string) => ("0" + parseInt(x).toString(16)).slice(-2);

function convertRGBToHex(rgb: string): string {
  const bg = rgb.match(rgbRegex);
  
  if (!bg) {
    // 返回空字符串，在后面判断长度为 6 时候会报错。不在此处进行操做
    return ''
  }
  
  return ("#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3])).toUpperCase();
}

固然了，咱们也能够在其中添加缓存代码，以便于减小计算量。

// 使用 map 来缓存 
const colorByBgColor = new Map()
// 缓存错误字符串
const CACHE_ERROR = 'error'

export function contrastTextColor(backgroundColor: string) {
  // 获取缓存
  const cacheColor = colorByBgColor.get(backgroundColor)
  if (cacheColor) {
    // 当前缓存错误，直接报错
    if (cacheColor === CACHE_ERROR) {
      throw new Error('Invalid background color.' + backgroundColor);
    }
    return colorByBgColor.get(backgroundColor)
  }
  
  // ...
  if (hex.length !== 6) {
    // 直接缓存错误
    colorByBgColor.set(backgroundColor, CACHE_ERROR)
    throw new Error('Invalid background color.' + backgroundColor);
  }
  
  // ...
  
  if ([r,g,b].some(x => Number.isNaN(x))) {
    // 直接缓存错误
    colorByBgColor.set(backgroundColor, CACHE_ERROR)
    throw new Error('Invalid background color.' + backgroundColor);
  }

  const textColor = (r * 0.299 + g * 0.587 + b * 0.114) > 186 ? '#000' : '#FFF'
  // 缓存数据
  colorByBgColor.set(backgroundColor, textColor)
  return textColor
}

完整代码能够在代码库中 转换问题颜色 中看到。

固然了，若是你不须要严格遵循 W3C 准则，当前代码已经足够使用。可是若是你须要严格遵循你能够参考 http://stackoverflow.com/a/39... 以及 https://www.w3.org/TR/WCAG20/。

鼓励一下

若是你以为这篇文章不错，但愿能够给与我一些鼓励，在个人 github 博客下帮忙 star 一下。
博客地址

参考资料

stackoverflow 问题