颜色可访问性
概述
可访问的颜色设计确保所有用户，包括那些有色觉缺陷的人，都能访问和理解信息。
何时使用
- 创建调色板
- 设计数据可视化
- 测试界面设计
- 状态指示器和警报
- 表单验证状态
- 图表和图形
指南
1. 颜色对比度标准
WCAG 对比度比例：
WCAG AA（最低）：
- 普通文本：4.5:1
- 大型文本（18pt+）：3:1
- UI组件和图形元素：3:1
- 焦点指示器：3:1
WCAG AAA（增强）：
- 普通文本：7:1
- 大型文本：4.5:1
- 更适合可访问性
---
测试对比度：
工具：
- WebAIM 对比度检查器
- 颜色对比度分析器
- Figma 插件
- 浏览器 DevTools
公式（WCAG）：
对比度 = (L1 + 0.05) / (L2 + 0.05)
其中 L = 相对亮度
示例对：
好的（通过AA）：
- 黑色（#000000）在白色（#FFFFFF）= 21:1 ✓
- 白色在深蓝色（#003366）= 12.6:1 ✓
- 深灰色（#333333）在浅灰色（#EEEEEE）= 10:1 ✓
差的（失败）：
- 浅灰色（#CCCCCC）在白色（#FFFFFF）= 1.3:1 ✗
- 黄色（#FFFF00）在白色（#FFFFFF）= 1.07:1 ✗
2. 色觉缺陷模拟
# 为色觉缺陷设计
class ColorAccessibility:
COLOR_DEFICIENCY_TYPES = {
'Protanopia': '红盲（1%男性）',
'Deuteranopia': '绿盲（1%男性）',
'Tritanopia': '蓝黄盲（非常罕见）',
'Monochromacy': '完全色盲（非常罕见）'
}
def simulate_vision_deficiency(self, color, deficiency_type):
"""模拟不同眼睛下的颜色"""
# 色盲模拟
simulated_colors = {
'normal': color,
'protanopia': self.apply_protanopia_filter(color),
'deuteranopia': self.apply_deuteranopia_filter(color),
'tritanopia': self.apply_tritanopia_filter(color)
}
return simulated_colors
def check_palette_accessibility(self, color_palette):
"""验证整个调色板的可访问性"""
issues = []
# 检查对比度比例
for color_pair in self.generate_pairs(color_palette):
contrast = self.calculate_contrast(color_pair[0], color_pair[1])
if contrast < 4.5:
issues.append({
'type': '低对比度',
'colors': color_pair,
'ratio': contrast,
'severity': '严重'
})
# 检查色盲区分
for deficiency in self.COLOR_DEFICIENCY_TYPES:
simulated = self.simulate_for_deficiency(color_palette, deficiency)
if not self.are_colors_distinguishable(simulated):
issues.append({
'type': '色盲',
'deficiency': deficiency,
'severity': '高'
})
return {
'palette': color_palette,
'issues': issues,
'is_accessible': len(issues) == 0,
'recommendations': self.generate_recommendations(issues)
}
def generate_recommendations(self, issues):
"""建议调色板改进"""
return [
'使用图案或图标区分（不仅仅用颜色）',
'增加对比度比例',
'使用经过测试的可访问颜色组合',
'发布前用色盲模拟器测试'
]
3. 可访问的颜色使用
颜色使用指南：
状态指示器：
错误：
颜色：#D32F2F（红色）
对比度：最低4.5:1
附加：错误图标，文本“错误”
不要：仅使用红色，没有其他指示
成功：
颜色：#388E3C（绿色）
对比度：最低4.5:1
附加：勾选图标，文本“成功”
不要：仅使用绿色
警告：
颜色：#F57C00（橙色）
对比度：最低4.5:1
附加：警告图标，文本“警告”
不要：仅使用橙色
信息：
颜色：#1976D2（蓝色）
对比度：最低4.5:1
附加：信息图标，文本“信息”
不要：仅使用蓝色
---
数据可视化：
图表和图形：
- 使用8+颜色组合以适应色盲
- 包括图案或纹理
- 直接标记元素（不仅仅图例）
- 使用色盲友好的调色板
推荐调色板：
- ColorBrewer（为可访问性而设计）
- Okabe-Ito 调色板
- Paul Tol 颜色
热图：
- 仅使用顺序调色板
- 避免红绿组合
- 使用模拟器测试
---
UI组件状态：
按钮状态：
- 默认：主色
- 悬停：稍暗
- 禁用：灰色，对比度降低
- 焦点：轮廓指示器（不仅仅颜色）
- 活动：更深的阴影
表单验证：
- 无效：红色+错误图标+消息
- 有效：绿色+勾选图标（可选）
- 必填：无特殊颜色，使用文本标签
交互元素：
- 焦点：可见轮廓或环
- 选中：勾选或勾选图标+颜色
- 悬停：下划线+颜色变化
- 不要：仅用颜色表示状态
4. 测试和验证
// 测试颜色可访问性
class ColorAccessibilityTesting {
testColorPalette(palette) {
return {
contrast_test: this.validateContrast(palette),
colorblind_test: this.simulateColorBlindness(palette),
usage_test: this.testColorUsage(palette),
tools_used: [
'WebAIM 对比度检查器',
'Color Oracle 模拟器',
'WAVE 可访问性检查器'
]
};
}
validateContrast(palette) {
const results = [];
for (let color of palette) {
const contrast = this.calculateLuminance(color);
results.push({
color: color,
luminance: contrast,
passes_aa: contrast >= 4.5,
passes_aaa: contrast >= 7.0
});
}
return results;
}
simulateColorBlindness(palette) {
return {
protanopia: this.convertToProtanopia(palette),
deuteranopia: this.convertToDeuteranopia(palette),
tritanopia: this.convertToTritanopia(palette),
all_distinguishable: this.checkDistinguishability(palette)
};
}
}
最佳实践
✅ 做
- 确保最低4.5:1对比度（WCAG AA）
- 使用色盲模拟器测试
- 使用图案或图标与颜色
- 用文本标记状态，不仅仅用颜色
- 与色盲用户进行真实测试
- 在设计系统中记录颜色使用
- 选择可访问的调色板
- 对有序数据使用顺序颜色
- 验证所有颜色组合
- 包括焦点指示器
❌ 不做
- 仅用颜色传达信息
- 创建低对比度文本
- 假设用户正确看到颜色
- 使用红绿组合
- 忘记焦点状态
- 混合太多颜色（>5-8）
- 一起使用纯红色和纯绿色
- 跳过对比度测试
- 假设AA足够（AAA更好）
- 在测试中忽略色盲
颜色可访问性提示
- 8%的男性有红绿色盲
- Deuteranopia 和 protanopia 最常见
- 总是用模拟器测试（Color Oracle, Coblis）
- 使用图案区分，不仅仅用颜色
- 在上下文中测试颜色（不仅仅孤立）