如何根据任意格式背景色自动设置黑白文本颜色？

一、修复Less contrast函数在Angular中的使用问题 #

你提到Less的contrast()函数是理想方案，但less.modifyvars报错。可以改用CSS变量+Less混合的方式，无需直接操作Less的JS API：

1. 在全局样式中定义Less混合与CSS变量绑定：

@text-dark: #000;
@text-light: #fff;
@contrast-threshold: 80%;

.auto-text-color(@bg-color) {
  color: contrast(@bg-color, @text-dark, @text-light, @contrast-threshold);
}

.dynamic-bg {
  background-color: var(--bg-color);
  .auto-text-color(var(--bg-color));
}

2. 在Angular组件中动态设置CSS变量：

// 组件类中
setBackgroundColor(bgColor: string, targetElement?: HTMLElement) {
  // 全局生效
  document.documentElement.style.setProperty('--bg-color', bgColor);
  // 或仅针对单个元素
  if (targetElement) {
    targetElement.style.setProperty('--bg-color', bgColor);
  }
}

这种方式既保留了Lesscontrast()的成熟计算逻辑，又适配Angular的样式体系，避免了Less API调用报错问题。

二、纯JS方案：原生处理所有颜色格式转RGB并计算对比度 #

无需额外Angular库，原生JS结合Canvas即可处理所有CSS颜色格式（hex、rgb、rgba、hsl、hsla、颜色名称等）：

1. 编写核心计算函数：

// 将任意CSS颜色转为RGB对象
function colorToRgb(color: string): {r: number, g: number, b: number} {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  if (!ctx) return {r: 0, g: 0, b: 0};
  
  ctx.fillStyle = color;
  const rgbStr = ctx.fillStyle; // 自动转为rgb()格式
  const match = rgbStr.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
  if (!match) return {r: 0, g: 0, b: 0};
  
  return {
    r: parseInt(match[1]),
    g: parseInt(match[2]),
    b: parseInt(match[3])
  };
}

// 按WCAG标准计算相对亮度
function getRelativeLuminance(r: number, g: number, b: number): number {
  const [rs, gs, bs] = [r, g, b].map(val => {
    const v = val / 255;
    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

// 根据背景亮度返回文本颜色（阈值可调整）
function getTextColor(bgColor: string, threshold = 0.5): string {
  const {r, g, b} = colorToRgb(bgColor);
  const luminance = getRelativeLuminance(r, g, b);
  return luminance > threshold ? '#000' : '#fff';
}

2. 在Angular组件中使用：

import { ViewChild, ElementRef } from '@angular/core';

// 组件类中
@ViewChild('targetElement') targetElement!: ElementRef;

setDynamicBgAndText(bgColor: string) {
  const el = this.targetElement.nativeElement;
  el.style.backgroundColor = bgColor;
  el.style.color = getTextColor(bgColor);
}

这个方案完全不依赖预处理器，适配所有颜色格式，且选中文本不会出现像素问题（直接设置纯色）。

三、简化CSS方案：优化mix-blend-mode效果 #

如果之前的mix-blend-mode方案效果不佳，可结合color-scheme属性优化浏览器适配：

.dynamic-element {
  background-color: var(--bg-color);
  color-scheme: light dark;
  mix-blend-mode: difference;
}

该方案兼容性和可控性略逊于前两种，适合简单场景快速实现。

内容的提问来源于stack exchange，提问作者Kvasimodo