颜色格式入门：HEX、RGB、HSL 与无障碍对比度

三种写法描述的是同一件事

• HEX（#6366F1）：紧凑、易复制，CSS 里最常见；
• RGB（rgb(99, 102, 241)）：每个通道 0–255，便于程序计算与插值；
• HSL（hsl(239, 84%, 67%)）：色相 / 饱和度 / 亮度，贴近人的直觉，调色时最好用。

几个常用色对照

为什么必须关注对比度

WCAG 对可读性的最低要求是：正文文本对比度 ≥ 4.5:1，18pt 以上大字或加粗标题 ≥ 3:1，图标与边框等非文本元素 ≥ 3:1。浅灰字配白底看起来很“高级”，但对比度常常不足 3:1，在户外或老年用户眼中几乎不可读。

实操建议

1. 用 HSL 做色阶：固定 H 与 S，只调 L（如 95% / 85% / 70% / 50%），就能得到一套协调的浅到深；
2. 深色模式单独选色：直接把浅色主题反转会过曝或发灰，应分别挑选背景与前景；
3. 交互态也要达标：按钮悬停、禁用态、输入框边框同样影响可读性；
4. 别只靠眼睛判断：用对比度检查工具算一遍，成本极低。

常见问题

为什么 #FFF 能简写？当三个通道的两位十六进制相同时才能缩成三位（#FFFFFF → #FFF），#F0F0F0 就不能简写。8 位 HEX 是什么？后两位是 alpha 透明度，如 #6366F180 表示约 50% 不透明。

一套实用的配色流程

1. 先定主色：用 HSL 选一个色相，固定饱和度（如 70%）不再变动；
2. 生成层级：只调亮度 L，得到页面底色（97%）、卡片色（99%）、主色（55%）、强调色（45%）与正文文字色（25%）；
3. 校验对比度：文字与背景用对比度工具确认 ≥ 4.5:1，不足就继续拉开 L 的差距；
4. 再定功能色：成功、警告、错误各选一个色相，同样按 L 生成深浅两套，便于深色模式直接复用。

三个常见错误

• 在白底上用浅灰文字：观感高级，但对比度常常不足 3:1，可读性很差；
• 深色模式直接反转颜色：会导致过曝或发灰，应为每个层级单独挑亮度；
• 只靠眼睛判断：人眼对亮度差异并不敏感，务必用对比度计算工具核验。

实战案例：三个调色踩坑

1. “设计稿颜色在网页上偏了”：设计稿用了 Display P3 广色域，网页按 sRGB 显示。修复：在设计工具里导出 sRGB，或对关键色做映射。
2. “改了颜色但对比度不够”：正文与背景对比度建议达到 WCAG AA（4.5:1）。修复：用对比度校验，必要时调明度而不是硬改色相。
3. “hover 态深浅分不清”：直接改透明度在不同背景上表现不稳。修复：用同色系的明度色阶，而不是半透明叠加。

常见问题（FAQ）

#rgb 和 #rrggbb 有什么区别？#rgb 是简写，#f00 展开为 #ff0000，位深相同、可无损互转。HSL 的 L 单位是百分比吗？是，别写成 0–255，这是常见错误。半透明色怎么表示？用 rgba(r,g,b,a) 或 8 位 HEX（#rrggbbaa）。怎么快速得到一组协调色？固定色相、只调明度与饱和度即可得到同色系色阶。

动手试试：颜色转换、进制转换

色觉障碍与替代编码

• 别只靠红绿区分状态：红绿是最常见的混淆对，错误 / 成功状态应同时用图标或文字标注；
• 灰度自检：把界面转成灰度看信息是否仍然可读，这是最省事的自检方法；
• 对比度同时算两种模式：浅色通过不代表深色通过，两套主题都要校验；
• 图表配色：多系列图表用明度差异而非仅靠色相区分，并给出数据标签。

透明度与对比度

计算对比度时应使用叠加后的实际显示色，而不是半透明色的声明值。半透明白字叠在浅色图上可能远低于 4.5:1，解决方式是给文字加半透明遮罩层或实色背景，再重新校验。

焦点态必须可见

键盘用户依赖焦点轮廓判断当前位置，用 outline: none 取消后必须提供等价的可见替代（如自绘描边加对比色）。焦点态同样需要满足 3:1 对比度，否则等于把键盘用户拒之门外，这也是无障碍审查中最常被指出的问题之一。