news view

帮助色盲和色弱使用软件

在做 Web 设计的时候, 应该考虑色盲和色弱的人更方便使用软件. 这部分内容常被称作 accessibility, 缩写为 a11y, 中文常被称作无障碍.

色盲和色弱的基本认知

色盲和色弱是常见的视觉障碍,大约影响全球 8% 的男性和 0.5% 的女性人口。主要分为以下几类:

设计原则

从设计角度, 应该区分两种设计模式, 普通模式和色彩增强模式. 或者合并为一种设计模式, 支持色盲和色弱和普通用户一样正常与软件进行交互.

一般的做法是除了颜色, 要给出额外的图形信息. 比如做国内股市大盘设计时:

  1. 涨, 不仅用红色字体, 还要用向上的箭头.
  2. 跌, 不仅用绿色字体, 还要用向下的箭头.

同时, 我们也可以注意使用高对比度颜色. 比如不同颜色时, 如红色和绿色, 使用高对比度颜色, 那么色盲和色弱的人也能很容易区分.

还有增加额外的线条来增加区分度.

技术实现

从前端角度, 如果设计单独为色盲和色弱的人设计了一套 UI, 那么尽量通过额外加载 CSS 的方式进行处理.

  1. 基础
  2. 非色盲, 色弱
  3. 色盲, 色弱

普通模式加载 1 + 2, 色彩增强模式加载 1 + 3.

也可以使用普通 + 扩展的方式:

  1. 普通
  2. 色盲, 色弱

色彩增强模式加载 1, 色彩增强模式加载 1 + 2. 要确保 2 覆盖 1.

模拟与测试

对于 Web 开发来说, 可以通过 Chrome 的开发者工具, 来模拟色盲和色弱.

  1. 打开 Chrome 开发者工具.
  2. 选择更多工具.
  3. Rendering 中, 选择 Emulate vision deficiencies.
  4. 可以选择一些情况进行模拟.
- web - design - color - accessibility
iugo