前端与移动
颜色与可访问性工具
网页上的颜色工作分两头:一头是挑一组搭配起来好看的颜色,另一头是确保这组颜色对所有看到它的人都能用。把设计稿里的颜色在格式之间转换、从一个基色生成一整套色阶配色,以及核对文字在背景上是否依然清晰可读,这几件事几乎每个界面都会碰到,任何一件做错了上线之后都很快能看出来。
颜色空间转换一次显示同一颜色的七种格式,包括 HEX、RGB、HSL、HSV、CMYK、Lab 和 OKLCH,不用在工具间来回猜换算。可访问性方面,颜色对比度检查按 WCAG 阈值核对前背景色,APCA 对比度计算器用更新的感知模型判断可读性。色觉差异模拟把颜色和图片放在几种模拟视觉模型下对比,发现色盲用户看不清的配色。
5 个工具
颜色与可访问性工具常见问题
WCAG 对比度和 APCA 有什么区别?
WCAG 的对比度是一个简单的亮度公式,对浅色和深色文字的处理并不完全符合人眼实际感知。APCA 更贴近感知层面的对比效果。颜色对比度检查按 WCAG 阈值判断,APCA 对比度计算器则用更新的 APCA 模型核对同一组颜色。
怎么检查一套配色方案对色盲用户是否可用?
模拟视觉缺陷是唯一靠得住的检查办法,因为色盲影响的是颜色感知本身,光看原图是看不出问题的。色觉差异模拟可以把颜色和图片放在几种模拟视觉模型下并排对比。
什么时候该用 OKLCH 而不是 HSL?
OKLCH 设计上追求感知均匀,调整明度数值不会像 HSL 有时那样连带改变颜色看起来的饱和程度。颜色空间转换会把同一个颜色的 OKLCH 值和 HEX、RGB、HSL、HSV、CMYK、Lab 放在一起,方便直接对比。