mcpField
C
color-accessibility

color-accessibility

github.com/aj-geddes设计与 UI373621 次安装34 周前更新
代码仓库

关于 color-accessibility

color-accessibility 是面向设计人员的无障碍色彩设计指南，涵盖对比度、色觉缺陷模拟和验证方法，帮助避免仅靠颜色传递信息。

主要功能

  1. 01WCAG 对比度标准
  2. 02色觉缺陷模拟指导
  3. 03无障碍配色建议
  4. 04色彩测试与验证

适用场景

  1. 01创建无障碍调色板
  2. 02检查图表和数据可视化
  3. 03设计状态标识和表单提示

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill color-accessibility

安装后在 Claude Code 中输入/color-accessibility确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
accessible-color-usage.md
color-contrast-standards.md
color-vision-deficiency-simulation.md
testing-validation.md
templates/
component-template.tsx

详细介绍

色彩无障碍

目录

概述

无障碍色彩设计可确保所有用户（包括存在色觉缺陷的用户）都能获取并理解信息。

适用场景

  • 创建调色板
  • 设计数据可视化
  • 测试界面设计
  • 状态指示器和提醒
  • 表单验证状态
  • 图表和示意图

快速入门

最简可运行示例：

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

// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南内容
色彩对比度标准色彩对比度标准
色觉缺陷模拟色觉缺陷模拟
无障碍色彩用法无障碍色彩用法
测试与验证测试与验证

最佳实践

✅ 应该
  • 确保对比度至少达到 4.5:1（WCAG AA）
  • 使用色盲模拟器进行测试
  • 将图案或图标与颜色搭配使用
  • 使用文字标注状态，不要只依赖颜色
  • 邀请色盲用户参与测试
  • 在设计系统中记录颜色用法
  • 选择无障碍调色板
  • 为有序数据使用渐变色
  • 验证所有颜色组合
  • 添加焦点指示器
❌ 不应该
  • 只用颜色传达信息
  • 创建低对比度文本
  • 假设用户都能正确辨别颜色
  • 使用红绿色组合
  • 忽略焦点状态
  • 混用过多颜色（>5-8 种）
  • 同时使用纯红色和纯绿色
  • 跳过对比度测试
  • 假设 AA 标准足够（AAA 更佳）
  • 在测试中忽略色盲问题

评论

支持 Markdown