# Color Accessibility

> Color blindness accommodation, contrast checking, and inclusive color design.

- Skill: `dragoon0x/color-accessibility` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/color-accessibility`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/color-accessibility/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/color-accessibility

---


# Color Accessibility

## Color Vision Deficiency

### Types (approximate prevalence in males)
- **Deuteranopia** (green-blind): 1% — red/green confusion.
- **Protanopia** (red-blind): 1% — red/green confusion.
- **Tritanopia** (blue-blind): 0.003% — blue/yellow confusion.
- **Achromatopsia** (no color): 0.003% — gray only.

### Design Rules
1. **Never use color as the only indicator.** Pair with icons, text, patterns.
2. **Red + green:** Always pair with icons (checkmark/X) not just color.
3. **Test with simulators:** Chrome DevTools > Rendering > Emulate vision deficiency.
4. **Use colorblind-safe palettes:** Blue + Orange works for almost everyone.
5. **Charts:** Use patterns/textures alongside colors. Label directly.

### Safe Color Combinations
- Blue + Orange (safe for all types).
- Blue + Yellow (safe for most types).
- Dark Blue + Light Blue (value contrast).

### Dangerous Combinations
- Red + Green (most common confusion).
- Red + Brown (deuteranopia).
- Blue + Purple (tritanopia).