color-accessibility

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Color Accessibility

色彩可访问性

Overview

概述

Accessible color design ensures all users, including those with color vision deficiency, can access and understand information.

色彩可访问性设计确保包括色觉障碍用户在内的所有用户都能获取并理解信息。

When to Use

适用场景

Creating color palettes
Designing data visualizations
Testing interface designs
Status indicators and alerts
Form validation states
Charts and graphs

创建调色板
设计数据可视化
测试界面设计
状态指示器与警报
表单验证状态
图表与图形

Instructions

操作指南

1. Color Contrast Standards

1. 色彩对比度标准

yaml

WCAG Contrast Ratios:

WCAG AA (Minimum):
  - Normal text: 4.5:1
  - Large text (18pt+): 3:1
  - UI components & graphical elements: 3:1
  - Focus indicators: 3:1

WCAG AAA (Enhanced):
  - Normal text: 7:1
  - Large text: 4.5:1
  - Better for accessibility

---

Testing Contrast:

Tools:
  - WebAIM Contrast Checker
  - Color Contrast Analyzer
  - Figma plugins
  - Browser DevTools

Formula (WCAG):
  Contrast = (L1 + 0.05) / (L2 + 0.05)
  Where L = relative luminance

Example Pairs:

Good (Pass AA):
  - Black (#000000) on White (#FFFFFF) = 21:1 ✓
  - White on Dark Blue (#003366) = 12.6:1 ✓
  - Dark Gray (#333333) on Light Gray (#EEEEEE) = 10:1 ✓

Poor (Fail):
  - Light Gray (#CCCCCC) on White (#FFFFFF) = 1.3:1 ✗
  - Yellow (#FFFF00) on White (#FFFFFF) = 1.07:1 ✗

yaml

WCAG Contrast Ratios:

WCAG AA (最低标准):
  - 常规文本: 4.5:1
  - 大文本(18pt及以上): 3:1
  - UI组件与图形元素: 3:1
  - 焦点指示器: 3:1

WCAG AAA (增强标准):
  - 常规文本: 7:1
  - 大文本: 4.5:1
  - 更适合可访问性需求

---

Testing Contrast:

工具:
  - WebAIM Contrast Checker
  - Color Contrast Analyzer
  - Figma插件
  - 浏览器开发者工具

计算公式(WCAG):
  Contrast = (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. Color Vision Deficiency Simulation

2. 色觉障碍模拟

python

undefined

python

undefined

Design for color vision deficiency

为色觉障碍用户设计色彩

class ColorAccessibility: COLOR_DEFICIENCY_TYPES = { 'Protanopia': 'Red-blind (1% male)', 'Deuteranopia': 'Green-blind (1% male)', 'Tritanopia': 'Blue-yellow blind (very rare)', 'Monochromacy': 'Complete color blindness (very rare)' }

def simulate_vision_deficiency(self, color, deficiency_type):
    """Simulate how color appears to different eyes"""
    # Color blind simulation
    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):
    """Validate entire palette for accessibility"""
    issues = []

    # Check contrast ratios
    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': 'Low contrast',
                'colors': color_pair,
                'ratio': contrast,
                'severity': 'Critical'
            })

    # Check color blind differentiation
    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': 'Color blindness',
                'deficiency': deficiency,
                'severity': 'High'
            })

    return {
        'palette': color_palette,
        'issues': issues,
        'is_accessible': len(issues) == 0,
        'recommendations': self.generate_recommendations(issues)
    }

def generate_recommendations(self, issues):
    """Suggest palette improvements"""
    return [
        'Use patterns or icons to differentiate (not just color)',
        'Increase contrast ratios',
        'Use tested accessible color combinations',
        'Test with color blindness simulator before launch'
    ]

undefined

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': 'Low contrast',
                'colors': color_pair,
                'ratio': contrast,
                'severity': 'Critical'
            })

    # 检查色盲用户能否区分色彩
    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': 'Color blindness',
                'deficiency': deficiency,
                'severity': 'High'
            })

    return {
        'palette': color_palette,
        'issues': issues,
        'is_accessible': len(issues) == 0,
        'recommendations': self.generate_recommendations(issues)
    }

def generate_recommendations(self, issues):
    """提出调色板改进建议"""
    return [
        '使用图案或图标来区分(不只是色彩)',
        '提高对比度',
        '使用经过测试的可访问色彩组合',
        '上线前使用色盲模拟器测试'
    ]

undefined

3. Accessible Color Usage

3. 可访问色彩使用规范

yaml

Color Usage Guidelines:

Status Indicators:

Error:
  Color: #D32F2F (red)
  Contrast: 4.5:1 minimum
  Additional: Error icon, text "Error"
  Don't: Use ONLY red, no other indication

Success:
  Color: #388E3C (green)
  Contrast: 4.5:1 minimum
  Additional: Checkmark icon, text "Success"
  Don't: Use ONLY green

Warning:
  Color: #F57C00 (orange)
  Contrast: 4.5:1 minimum
  Additional: Warning icon, text "Warning"
  Don't: Use ONLY orange

Info:
  Color: #1976D2 (blue)
  Contrast: 4.5:1 minimum
  Additional: Info icon, text "Info"
  Don't: Use ONLY blue

---

Data Visualization:

Charts & Graphs:
  - Use 8+ color combinations for color blindness
  - Include patterns or textures
  - Label elements directly (not legend only)
  - Use colorblind-friendly palettes

Recommended Palettes:
  - ColorBrewer (designed for accessibility)
  - Okabe-Ito palette
  - Paul Tol colors

Heat Maps:
  - Sequential palettes only
  - Avoid red-green combinations
  - Test with simulator

---

UI Component States:

Button States:
  - Default: Primary color
  - Hover: Slightly darker
  - Disabled: Gray with reduced contrast
  - Focus: Outline indicator (not color alone)
  - Active: Darker shade

Form Validation:
  - Invalid: Red + error icon + message
  - Valid: Green + checkmark icon (optional)
  - Required: No special color, use text label

Interactive Elements:
  - Focus: Visible outline or ring
  - Selected: Checkmark or checkmark icon + color
  - Hover: Underline + color change
  - Don't: Use color alone to indicate state

yaml

Color Usage Guidelines:

状态指示器:

错误:
  色彩: #D32F2F (红色)
  对比度: 最低4.5:1
  补充: 错误图标 + 文本“Error”
  禁忌: 仅使用红色，无其他提示

成功:
  色彩: #388E3C (绿色)
  对比度: 最低4.5:1
  补充: 对勾图标 + 文本“Success”
  禁忌: 仅使用绿色

警告:
  色彩: #F57C00 (橙色)
  对比度: 最低4.5:1
  补充: 警告图标 + 文本“Warning”
  禁忌: 仅使用橙色

信息:
  色彩: #1976D2 (蓝色)
  对比度: 最低4.5:1
  补充: 信息图标 + 文本“Info”
  禁忌: 仅使用蓝色

---

数据可视化:

图表与图形:
  - 使用8种及以上适用于色盲的色彩组合
  - 包含图案或纹理
  - 直接标注元素(不依赖仅图例)
  - 使用色盲友好型调色板

推荐调色板:
  - ColorBrewer(专为可访问性设计)
  - Okabe-Ito调色板
  - Paul Tol色彩集

热力图:
  - 仅使用连续调色板
  - 避免红绿色组合
  - 使用模拟器测试

---

UI组件状态:

按钮状态:
  - 默认: 主色调
  - 悬停: 稍深色调
  - 禁用: 灰色，降低对比度
  - 焦点: 轮廓指示器(不单独使用色彩)
  - 激活: 更深色调

表单验证:
  - 无效: 红色 + 错误图标 + 提示信息
  - 有效: 绿色 + 对勾图标(可选)
  - 必填: 无特殊色彩，使用文本标签

交互元素:
  - 焦点: 可见轮廓或环形提示
  - 选中: 对勾或对勾图标 + 色彩
  - 悬停: 下划线 + 色彩变化
  - 禁忌: 仅使用色彩表示状态

4. Testing & Validation

4. 测试与验证

javascript

// Test color accessibility

class ColorAccessibilityTesting {
  testColorPalette(palette) {
    return {
      contrast_test: this.validateContrast(palette),
      colorblind_test: this.simulateColorBlindness(palette),
      usage_test: this.testColorUsage(palette),
      tools_used: [
        'WebAIM Contrast Checker',
        'Color Oracle simulator',
        'WAVE accessibility checker'
      ]
    };
  }

  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)
    };
  }
}

javascript

// 测试色彩可访问性

class ColorAccessibilityTesting {
  testColorPalette(palette) {
    return {
      contrast_test: this.validateContrast(palette),
      colorblind_test: this.simulateColorBlindness(palette),
      usage_test: this.testColorUsage(palette),
      tools_used: [
        'WebAIM Contrast Checker',
        'Color Oracle simulator',
        'WAVE accessibility checker'
      ]
    };
  }

  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)
    };
  }
}

Best Practices

最佳实践

✅ DO

✅ 建议

Ensure 4.5:1 contrast minimum (WCAG AA)
Test with color blindness simulator
Use patterns or icons with color
Label states with text, not color alone
Test with real users with color blindness
Document color usage in design system
Choose accessible color palettes
Use sequential colors for ordered data
Validate all color combinations
Include focus indicators

确保最低4.5:1的对比度(WCAG AA标准)
使用色盲模拟器测试
结合图案或图标与色彩使用
用文本而非仅色彩标注状态
与色觉障碍用户一起测试
在设计系统中记录色彩使用规范
选择可访问的调色板
对有序数据使用连续色彩
验证所有色彩组合
包含焦点指示器

❌ DON'T

❌ 避免

Use color alone to convey information
Create low-contrast text
Assume users see colors correctly
Use red-green combinations
Forget about focus states
Mix too many colors (>5-8)
Use pure red and pure green together
Skip contrast testing
Assume AA is sufficient (AAA better)
Ignore color blindness in testing

仅使用色彩传递信息
创建低对比度文本
假设用户能正确感知所有色彩
使用红绿色组合
忽略焦点状态
使用过多色彩(超过5-8种)
将纯红色与纯绿色搭配使用
跳过对比度测试
认为AA标准足够(AAA标准更佳)
在测试中忽略色觉障碍用户

Color Accessibility Tips

色彩可访问性小贴士

8% of males have red-green color blindness
Deuteranopia and protanopia are most common
Always test with simulator (Color Oracle, Coblis)
Use patterns to differentiate, not just color
Test colors in context (not in isolation)

约8%的男性患有红绿色盲
绿色盲(Deuteranopia)和红色盲(Protanopia)最为常见
务必使用模拟器测试(如Color Oracle、Coblis)
使用图案而非仅色彩来区分元素
在实际场景中测试色彩(而非孤立测试)