生成一对明暗兼容的随机十六进制颜色代码的技术问询

你当前的补色方案存在缺陷——比如灰色的补色还是灰色，两者亮度接近，导致文本和背景对比度不足，无法清晰区分。要解决这个问题，核心是基于相对亮度计算来确保文本与背景的明暗差满足可读性要求，以下是具体实现方案：

关键：相对亮度计算（WCAG标准） #

采用Web内容无障碍指南（WCAG）的相对亮度公式，能准确衡量颜色明暗，公式逻辑如下：

1. 将RGB通道值（0-255）转换为0-1的浮点数：channel = value / 255.0
2. 对每个通道进行非线性转换：
   • 若channel <= 0.03928，则channel = channel / 12.92
   • 否则，channel = ((channel + 0.055) / 1.055) ^ 2.4
3. 计算相对亮度：L = 0.2126*R + 0.7152*G + 0.0722*B
   • 结果范围0（最暗）~1（最亮）

实现方案（Go语言） #

方案1：最可靠的黑/白文本色 #

直接根据背景色亮度选择黑色或白色作为文本色，确保对比度达标：

package main

import (
	"fmt"
	"math"
	"math/rand"
	"time"
)

type RGB struct {
	R, G, B uint8
}

// 计算颜色的相对亮度
func getRelativeBrightness(c RGB) float64 {
	r := float64(c.R) / 255.0
	g := float64(c.G) / 255.0
	b := float64(c.B) / 255.0

	// 对通道值进行非线性转换
	convertChannel := func(v float64) float64 {
		if v <= 0.03928 {
			return v / 12.92
		}
		return math.Pow((v + 0.055) / 1.055, 2.4)
	}

	r = convertChannel(r)
	g = convertChannel(g)
	b = convertChannel(b)

	return 0.2126*r + 0.7152*g + 0.0722*b
}

// 生成兼容的背景与文本颜色对
func generateColorPair() (bg, text RGB) {
	rand.Seed(time.Now().UnixNano())
	// 随机生成背景色
	bg = RGB{
		R: uint8(rand.Intn(256)),
		G: uint8(rand.Intn(256)),
		B: uint8(rand.Intn(256)),
	}

	bgLuminance := getRelativeBrightness(bg)
	// 亮背景配黑色文本，暗背景配白色文本
	if bgLuminance > 0.5 {
		text = RGB{0, 0, 0}
	} else {
		text = RGB{255, 255, 255}
	}
	return
}

// 将RGB颜色转换为十六进制代码
func toHexColor(c RGB) string {
	return fmt.Sprintf("#%02X%02X%02X", c.R, c.G, c.B)
}

func main() {
	bgColor, textColor := generateColorPair()
	fmt.Printf("背景色: %s, 文本色: %s\n", toHexColor(bgColor), toHexColor(textColor))
}

方案2：调整补色亮度生成彩色文本色 #

如果希望文本色也是彩色而非黑/白，可以基于原补色调整亮度，确保对比度达标：

// 调整颜色的亮度至目标值
func adjustLuminance(c RGB, targetLuminance float64) RGB {
	currentL := getRelativeBrightness(c)
	ratio := targetLuminance / currentL

	adjustChannel := func(v uint8) uint8 {
		newVal := float64(v) * ratio
		if newVal < 0 {
			return 0
		}
		if newVal > 255 {
			return 255
		}
		return uint8(newVal)
	}

	return RGB{adjustChannel(c.R), adjustChannel(c.G), adjustChannel(c.B)}
}

// 生成彩色的背景与文本颜色对
func generateColoredColorPair() (bg, text RGB) {
	rand.Seed(time.Now().UnixNano())
	bg = RGB{
		R: uint8(rand.Intn(256)),
		G: uint8(rand.Intn(256)),
		B: uint8(rand.Intn(256)),
	}

	// 生成原始补色
	complement := RGB{255 - bg.R, 255 - bg.G, 255 - bg.B}
	bgL := getRelativeBrightness(bg)
	complementL := getRelativeBrightness(complement)

	// 检查对比度是否满足WCAG AA级要求（≥4.5:1）
	contrast := (math.Max(bgL, complementL) + 0.05) / (math.Min(bgL, complementL) + 0.05)
	if contrast >= 4.5 {
		text = complement
	} else {
		// 调整补色亮度：亮背景调暗补色，暗背景调亮补色
		targetL := 0.1
		if bgL <= 0.5 {
			targetL = 0.9
		}
		text = adjustLuminance(complement, targetL)
	}
	return
}

对比度验证 #

通过公式(L1 + 0.05)/(L2 + 0.05)计算对比度，结果≥4.5即满足WCAG AA级标准，确保文本清晰可读。

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