Rails中如何计算与背景色对比度最佳的文本颜色

核心逻辑基于WCAG 2.1网页可读性标准实现，不需要局限在黑白两色里选，整体思路分三层：

1. 先实现基础的对比度计算能力 #

所有判断的基础是准确算出两个颜色的实际可读对比度，先写几个基础工具方法：

# 十六进制颜色转RGB标准化值，支持#fff、#ffffff两种简写格式
def hex_to_rgb(hex)
  hex = hex.delete('#')
  hex = hex.chars.map { |c| c * 2 }.join if hex.length == 3
  hex.scan(/../).map { |segment| segment.to_i(16) / 255.0 }
end

# 单颜色通道转线性值，适配人眼感知特性
def linearize_channel(value)
  value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4
end

# 计算颜色的相对亮度（取值范围0~1，0是纯黑，1是纯白）
def get_luminance(hex_color)
  r, g, b = hex_to_rgb(hex_color).map { |v| linearize_channel(v) }
  0.2126 * r + 0.7152 * g + 0.0722 * b
end

# 计算两个颜色的对比度比值，值越大可读性越好
def get_contrast(color_a, color_b)
  l1 = get_luminance(color_a)
  l2 = get_luminance(color_b)
  brighter, darker = [l1, l2].maxmax
  (brighter + 0.05) / (darker + 0.05)
end

行业通用的合格阈值是：正文文本对比度至少达到4.5:1，大字号标题至少达到3:1，最优可读性区间在6:1~8:1之间。

2. 非黑白的文本色选取方案 #

根据业务场景选下面两种方案就行，都能跳出纯黑纯白的限制：

• 预定义色板匹配（推荐优先用）
  提前把业务设计规范里允许使用的文本色整理成色板数组，比如品牌主色的不同明暗阶、不同深浅的中性灰、低饱和辅助色都放进去。传入背景色之后，遍历色板里的所有颜色，逐个计算和背景色的对比度，先筛掉所有达不到合格阈值的颜色，再从剩下的颜色里挑对比度落在最优区间的即可，想选风格更协调的就优先挑和背景色同色系或者邻近色系的结果。
  这个方案是生产环境用得最多的，颜色完全可控，不会跑出设计规范外的奇怪配色，遍历十几个色值也几乎没有性能开销。
• 动态生成适配色
  如果做的是高自定义场景（比如用户自定义主题、DIY看板），需要动态生成不限定范围的配色，可以转HSL色彩空间处理：
  1. 把背景色从RGB转成HSL格式，拿到对应的色相、饱和度、明度值
  2. 优先保留和背景色一致的色相，沿着明度轴调整，找饱和度适中（一般30%~60%之间视觉舒适度最高）、同时对比度达标的颜色
  3. 如果同色相区间找不到满足对比度的颜色，再往互补色方向偏移找适配色，不要直接拉到纯黑纯白，适当保留一点色相值就不会显得生硬。
     色彩空间转换不用自己硬写，直接用成熟的color gem就行，各类色彩格式互转都封装好了，能省很多调试的功夫。

3. Rails落地的实用细节 #

• 如果是用户实时调整主题色的交互场景，把这套计算逻辑写一份JS版本放前端跑就行，不用每次请求后端，响应速度更快；如果是服务端渲染静态页面、生成邮件模板这类场景，直接用后端Ruby方法计算即可。
• 筛选颜色的时候加个饱和度过滤规则，饱和度超过80%的高饱和色直接排除，这类颜色当文本很容易造成视觉疲劳。
• 给计算结果加一层Rails缓存，同一个背景色对应的适配文本色算过一次就存起来，避免重复计算。

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