对于企业服务来说，终端用户往往需要更详细的信息分类方式，而标签无疑是一个很好的解决方案。如果标签只提供几种颜色，可能无法满足每个用户的实际需求。然后系统需要为用户提供颜色选择。事实上，我们根本无法预测用户选择的是哪种颜色，所以如果当前用户选择黑色作为背景色，而当前字体颜色也是黑色，则该标签无法使用。如果要求用户在配置背景颜色的同时还要配置文字颜色，那么这个标签功能就有点鸡肋了。让用户觉得我们的开发水平有问题。所以我们需要想办法解决这个问题。问题分析对于彩色转灰度，有一个著名的公式。我们可以将十六进制代码分成3部分以获得单独的红色、绿色和蓝色强度。使用该算法逐个修改像素的颜色，可以将当前彩色图片变为灰度图像。gray=r*0.299+g*0.587+b*0.114但是对于亮色和暗色，公式计算后会得到不同的值，对于不同的当前值，我们可以通过取反得到当前文字颜色.即：consttextColor=(r*0.299+g*0.587+b*0.114)>186？'#000':'#FFF'当然，186不是一个确定的值，你可以根据自己的需要调整一个新的值。通过这个算法可以传入不同的背景颜色，得到白色和黑色，或者自定义更合适的文字颜色。完善代码当然，解决方案虽然很简单，但是中间还是涉及到一些转换问题，这里简单的传值如下。/***@parambackgroundColor字符串可以传递给#FFFBBC|流血细胞|FFBBCC*/exportfunctioncontrastTextColor(backgroundHexColor:string){lethex=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){thrownewError('背景颜色无效。'+backgroundHexColor);}constr=parseInt(hex.slice(0,2),16)constg=parseInt(hex.slice(2,4),16)constb=parseInt(hex.slice(4,6),16)如果([r,g,b].some(x=>Number.isNaN(x))){thrownewError('无效的背景颜色。'+backgroundHexColor);}consttextColor=(r*0.299+g*0.587+b*0.114)>186？'#000':'#FFF'returntextColor}我们也可以在其中添加rgb颜色和转换逻辑。/***@parambackgroundColorstring*/exportfunctioncontrastTextColor(backgroundHexColor:string){//都转换成十六进制格式，可以传入rgb(222,33,44)。//如果当前长度string参数大于7rgb(,,)至少8个字符，当前传入的值被认为是rgb并转换constbackgroundHexColor=backgroundColor.length>7?convertRGBToHex(backgroundColor):backgroundColor//...codebehind}/**获取背景色中的多个值，即rgb(2,2,2)=>[2,2,2]*/constrgbRegex=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$//**十进制转十六进制，*characteraftercalculation在字符串前面加0，同时取最后两位。使返回值必须是两位数*如E=>0E|FF=>0FF=>FF*/consthex=(x:string)=>("0"+parseInt(x).toString(16)).slice(-2);functionconvertRGBToHex(rgb:string):字符串{constbg=rgb.match(rgbRegex);if(!bg){//返回空字符串，后面判断长度为6时会报错。这里不要操作return''}return("#"+hex(bg[1])+hex(bg[2])+hex(bg[3])).toUpperCase();}当然我们也缓存可以在其中添加代码以减少计算量。//使用map缓存constcolorByBgColor=newMap()//缓存错误字符串constCACHE_ERROR='error'exportfunctioncontrastTextColor(backgroundColor:string){//获取缓存constcacheColor=colorByBgColor.get(backgroundColor)if(cacheColor){//当前缓存错误，直接报错if(cacheColor===CACHE_ERROR){thrownewError('Invalidbackgroundcolor.'+backgroundColor);}returncolorByBgColor.get(backgroundColor)}//...if(hex.length!==6){//直接缓存错误colorByBgColor.set(backgroundColor,CACHE_ERROR)thrownewError('Invalidbackgroundcolor.'+backgroundColor);}//...if([r,g,b].some(x=>Number.isNaN(x))){//直接缓存错误colorByBgColor.set(backgroundColor,CACHE_ERROR)thrownewError('Invalidbackground颜色。'+backgroundColor);}consttextColor=(r*0.299+g*0.587+b*0.114)>186？'#000':'#FFF'//缓存数据colorByBgColor.set(backgroundColor,textColor)returntextColor}代码库中可以看到完整代码转换问题颜色。当然，如果您不需要严格遵守W3C指南，目前的代码已经足够好了。但如果你需要严格遵守，你可以参考http://stackoverflow.com/a/39...和https://www.w3.org/TR/WCAG20/。鼓励如果您觉得这篇文章不错，希望您能给我一些鼓励，帮我在我的github博客下star。博客地址参考stackoverflow问题
