在做 Web 设计的时候, 应该考虑色盲和色弱的人更方便使用软件. 这部分内容常被称作 accessibility, 缩写为 a11y, 中文常被称作无障碍.
色盲和色弱是常见的视觉障碍,大约影响全球 8% 的男性和 0.5% 的女性人口。主要分为以下几类:
从设计角度, 应该区分两种设计模式, 普通模式和色彩增强模式. 或者合并为一种设计模式, 支持色盲和色弱和普通用户一样正常与软件进行交互.
一般的做法是除了颜色, 要给出额外的图形信息. 比如做国内股市大盘设计时:
同时, 我们也可以注意使用高对比度颜色. 比如不同颜色时, 如红色和绿色, 使用高对比度颜色, 那么色盲和色弱的人也能很容易区分.
还有增加额外的线条来增加区分度.
从前端角度, 如果设计单独为色盲和色弱的人设计了一套 UI, 那么尽量通过额外加载 CSS 的方式进行处理.
普通模式加载 1 + 2, 色彩增强模式加载 1 + 3.
也可以使用普通 + 扩展的方式:
色彩增强模式加载 1, 色彩增强模式加载 1 + 2. 要确保 2 覆盖 1.
对于 Web 开发来说, 可以通过 Chrome 的开发者工具, 来模拟色盲和色弱.