颜色转换与对比度检查（WCAG）

更新于 2026-10-17

设计稿上的浅灰文字在屏幕上看着还行，投到会议室大屏就"消失"了；或者前端改按钮颜色，被问"这个色值到底是多少"。颜色问题最后都会落到两件事：格式换算和对比度够不够。

一次拿到八种写法

颜色转换的输入支持 #3b82f6、#abc、rgb(59,130,246)、hsl(217,91%,60%)，以及 red 这类颜色名；也可以用取色器直接点选。输出一次给全：

• HEX、HEX 缩写、HEX 带透明度
• RGB、RGBA
• HSL、HSV、CMYK

两个注意点：HEX 的 4 位与 8 位写法，最后一位是透明度；CMYK 是由 RGB 换算的近似值，屏幕取色参考可以，印刷前请以印厂的色彩配置为准。

对比度检查怎么用

1. 在"对比度检查"里分别填前景色与背景色（正文场景就是文字色与底色）。
2. 看实时预览：示例文字会按这组配色渲染，下方给出等级——AAA（最严）、AA、AA Large（仅大号字达标），不达标会标红。
3. 不达标就调亮度：用"明暗梯度"的 9 级深浅点一个更深的颜色继续换算，直到等级过线；"建议前景色"会按对比度自动给出黑或白，可直接用于按钮文字。

目标怎么定

• 正文文字：追求 AA 及以上；
• 大号字（按 WCAG 定义，约 18pt 以上、或 14pt 加粗）：AA Large 是底线；
• 图标与细线也要单独检查——小尺寸下对比不足比文字更容易"糊掉"。

配色起名、跟设计师沟通色差时，"最近色名"会按色差给出最接近的常用颜色名，比如"深青（teal）"，比只报色值更好沟通。

常见问题

CMYK 数值能直接给印厂吗

不建议当作最终值。CMYK 是从 RGB 近似换算的，实际印刷受纸张、油墨与印厂配置影响，请以印厂的色彩管理为准。

为什么"建议前景色"只有黑或白

因为这组合的对比度最高——同色背景上黑字或白字的可读性最稳，按钮、徽标文字色优先参考它。

大号字的"大"是多大

按 WCAG 的口径：约 24px 上下（18pt），或约 19px 以上的加粗字（14pt bold）。没到这个尺寸按正文字号的要求（AA）检查。

页面整体配色怎么快速过一遍

逐个"前景/背景"组合检查即可。重点位置：正文、按钮文字、输入框提示文字、底部版权这类最容易被忽视的地方。