Color Accessibility

This helps you design color palettes and interfaces that work for users with color vision deficiency. You'll use it when picking colors for data visualizations, status indicators, form validation, or any UI elements where color carries meaning. It covers WCAG contrast ratios (4.5:1 for AA, 7:1 for AAA), testing tools like WebAIM and color blindness simulators, and the critical rule of never using color alone to convey information. The reference guides walk through contrast standards, simulating different types of color blindness, and validation workflows. Honestly, the most valuable part is the reminder that red-green combinations fail for a significant portion of users, and that patterns or icons should always accompany color coding.

skills.sh installs: 624
GitHub stars: 379
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add aj-geddes/useful-ai-prompts --skill color-accessibility --agent claude-code

Installs into .claude/skills of the current project.

Files

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)