色彩可访问性指南：WCAG对比度标准、色盲模拟与最佳实践

color-accessibility by aj-geddes/useful-ai-prompts

212 周安装量

144 GitHub Stars

GitHub

安装命令

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

设计测试用户体验

🇨🇳中文介绍

色彩可访问性

概述

可访问的色彩设计确保所有用户，包括有色觉缺陷的用户，都能访问和理解信息。

使用场景

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

快速开始

最小工作示例：

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/ 目录下的详细实现：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

指南	内容
色彩对比度标准	色彩对比度标准
色觉缺陷模拟	色觉缺陷模拟
可访问的色彩使用	可访问的色彩使用
测试与验证	测试与验证

🇺🇸English

Color Accessibility

Overview
When to Use
Quick Start
Reference Guides
Best Practices

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

Quick Start

Minimal working example:

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)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Color Contrast Standards	Color Contrast Standards
Color Vision Deficiency Simulation	Color Vision Deficiency Simulation
Accessible Color Usage	Accessible Color Usage
Testing & Validation	Testing & Validation

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

❌ 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

Weekly Installs

169

Repository

aj-geddes/usefu…-prompts

GitHub Stars

116

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode145

gemini-cli140

codex138

cursor123

claude-code122

github-copilot122