Apache Echarts视障适配：是否有现成色盲友好等高对比度配置方案？

目前 Apache Echarts 并没有原生提供一键开启的全局视障适配开关，但已有一些可复用的配置和替代方案，能满足色盲友好、高对比度这类需求，不用逐个手动调整图表元素：

一、原生支持的无障碍配置 #

• ARIA 无障碍标签：开启 aria 配置后，屏幕阅读器可以识别图表的结构、数据描述，还能配合 decal 给系列添加纹理标记，弥补颜色区分的不足。示例配置：

  option = {
    aria: {
      enabled: true,
      decal: { show: true }, // 全局开启系列纹理
      label: { show: true }
    }
  };
  

• Decals 纹理区分：除了全局配置，也能单独给某个系列设置纹理，比如给红色系列加斜线、绿色系列加点，让色盲用户能通过纹理区分数据。

二、色盲友好的颜色方案（快速实现） #

Echarts 没有内置红绿色盲适配的现成主题，但可以通过两种方式快速搞定：

• 全局注册色盲友好主题：自定义一套对红绿色盲友好的调色板（比如蓝橙、蓝紫这类配色组合），注册成全局主题后，所有图表都能直接使用：

  // 注册红绿色盲友好主题
  echarts.registerTheme('colorBlindSafe', {
    color: ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd'],
    backgroundColor: '#fff',
    textStyle: { color: '#333' }
  });
  // 初始化图表时指定主题
  const myChart = echarts.init(document.getElementById('main'), 'colorBlindSafe');
  

• CSS 滤镜适配（SVG/Canvas 通用）：如果用 SVG 渲染，可通过 CSS 滤镜直接给图表容器加色盲模拟、灰度、高对比度效果；Canvas 模式下滤镜对整个画布生效，也能实现类似效果：

  /* 高对比度灰度 */
  .echarts-box svg, .echarts-box canvas {
    filter: grayscale(100%) contrast(1.8);
  }
  /* 模拟红绿色盲（protanopia） */
  .echarts-box svg, .echarts-box canvas {
    filter: matrix(0.567,0.433,0,0,0, 0.558,0.442,0,0,0, 0,0.242,0.758,0,0, 0,0,0,1,0);
  }
  

三、高对比度主题快速搭建 #

如果需要高对比度效果，直接基于默认主题修改后注册成全局主题即可，不用每个图表单独配置：

echarts.registerTheme('highContrast', {
  color: ['#0000ff', '#ff0000', '#00ff00', '#ffff00'],
  backgroundColor: '#fff',
  textStyle: { color: '#000', fontWeight: 'bold' },
  axisLine: { lineStyle: { color: '#000', width: 2 } }
});

总结 #

虽然没有现成的一键适配开关，但通过组合使用 ARIA 配置、全局主题注册和 CSS 滤镜，就能快速实现视障友好的图表效果，覆盖红绿色盲、高对比度、灰度这些需求，不用逐个调整图表元素。

内容的提问来源于stack exchange，提问作者Monerig