如何利用对比度计算给定背景色的文本前景对比色？

要解决这个问题，核心是基于WCAG（Web内容无障碍指南）的对比度规则和相对亮度计算公式来推导。以下是具体方法：

1. 核心公式定义 #

对比度计算公式 #

两种颜色的对比度（C）由相对亮度决定，公式为：

C = (L₁ + 0.05) / (L₂ + 0.05)

其中：

• L₁：两种颜色中相对亮度更高的值（范围0~1）
• L₂：两种颜色中相对亮度更低的值（范围0~1）
• 结果C≥1，WCAG AAA级标准要求C≥7.0，AA级要求C≥4.5

相对亮度计算公式 #

相对亮度（L）基于sRGB颜色空间计算，步骤如下：

1. 将R/G/B通道值（0_{255）转换为0}1的非线性值：channel = 通道值 / 255
2. 转换为线性值：

   if channel ≤ 0.03928:
       linear_channel = channel / 12.92
   else:
       linear_channel = ((channel + 0.055) / 1.055) ** 2.4
   

3. 计算最终相对亮度：

   L = 0.2126 * R_linear + 0.7152 * G_linear + 0.0722 * B_linear
   

2. 求解前景色的步骤 #

假设已知背景色Bg(Rbg, Gbg, Bbg)和目标对比度C_target，按以下步骤推导前景色：

步骤1：计算背景色的相对亮度L_bg #

按照上述相对亮度公式，先算出背景色的L_bg值。

步骤2：判断前景色的亮度方向 #

对比度公式存在两种可能的场景，需分别验证可行性：

场景A：前景色比背景色亮（L_fg > L_bg）

此时对比度公式变形为：

L_fg = C_target * (L_bg + 0.05) - 0.05

若计算结果L_fg ≤ 1.0，说明存在符合要求的亮色前景；若L_fg > 1.0，则该场景不可行（相对亮度上限为1.0，即纯白色）。

场景B：前景色比背景色暗（L_fg < L_bg）

此时对比度公式变形为：

L_fg = (L_bg + 0.05) / C_target - 0.05

若计算结果L_fg ≥ 0，说明存在符合要求的暗色前景；若L_fg < 0，则该场景不可行（相对亮度下限为0，即纯黑色）。

步骤3：生成符合L_fg的前景色 #

若某场景有可行解，最简单的方式是生成灰色（R=G=B），反向推导步骤如下：

1. 灰色的线性通道值等于L_fg（因为R_linear=G_linear=B_linear=L_fg）
2. 将线性值转换回0~255的sRGB值：

   if linear_channel ≤ 0.03928:
       srgb_value = linear_channel * 12.92 * 255
   else:
       srgb_value = (linear_channel ** (1/2.4) * 1.055 - 0.055) * 255
   

3. 将结果取整到0~255范围，得到灰色的R/G/B值。

3. 示例：背景色为红色（RGB(255,0,0)），目标对比度7.0 #

步骤1：计算L_bg #

• R=255 → 非线性值=1.0 → 线性值=((1.0+0.055)/1.055)^2.4=1.0
• G=0、B=0 → 线性值均为0
• L_bg = 0.2126*1 + 0 + 0 = 0.2126

步骤2：验证两种场景 #

• 场景A：L_fg =7*(0.2126+0.05)-0.05≈1.7882，大于1.0，不可行
• 场景B：L_fg=(0.2126+0.05)/7 -0.05≈-0.0125，小于0，不可行

结论：红色背景无法通过任何纯色（包括黑白灰）达到7.0的对比度——白色与红色的对比度约为4.0，黑色与红色的对比度约为5.25，均低于目标值。此时只能选择对比度尽可能高的颜色（如黑色），或调整背景色的亮度来满足要求。

注意事项 #

• 对比度的上限由背景色的亮度决定：纯黑/纯白背景的最大对比度为21，中间亮度的背景（如L≈0.5）最大对比度仅约1.91，无法达到高对比度要求。
• 若需要非灰色的前景色，只要保证其相对亮度等于计算出的L_fg即可，颜色的色相可自由选择。

内容的提问来源于stack exchange，提问作者Karthik Raja AKR