色觉友好设计指南 — 6个无障碍设计要点

点击要点查看详细说明。

不要仅靠颜色区分信息

像"红色按钮代表删除、绿色按钮代表保存"这样只依赖颜色的设计,色觉差异用户将无法区分。应同时搭配图标、文字或图案。

谨慎使用红绿组合

由于红绿色觉异常是最常见的类型,将红色与绿色并排对比来区分信息的设计需要格外注意。

确保足够的明度对比

只要明度(亮度)差异足够明显,即使无法区分颜色本身,也更容易识别不同的元素。

结合使用图案和纹理

在图表中,与其仅靠颜色区分类别,不如同时加入斜线、点状等图案,这样能大幅提升无障碍程度。

用色觉模拟器提前检查

善用设计工具中的色觉模拟功能,提前查看实际色觉差异用户眼中的设计效果,是很重要的习惯。

直接标注,而非依赖图例

与其让用户对照远处的图例来辨认颜色,不如直接在图表元素旁边标注名称,这样无论色觉能力如何都能理解。

全球约8%的男性存在色觉异常

色觉差异比想象中更为常见。设计师和开发者如果能采用照顾这类用户的设计,就能为相当一部分用户带来更好的体验。

想确认自己的色觉情况?

如果想做一个简单的色觉自测,也可以参考我们的色盲色弱简易自测工具。

常见问题

色觉友好设计对非色觉差异人群也有帮助吗?

是的。提高明度对比并结合使用图案的设计,对低视力人群、老年人,以及在明亮户外环境下看屏幕的所有用户来说,都能提升可读性。

哪里能找到色觉友好的配色方案?

像Okabe-Ito配色方案这样经过色觉友好性验证的公开方案是现成的选择,也可以使用配色生成工具亲自检查对比度来制作。