wcag-audit-perceivable-color-blindness

wcag-audit-perceivable-color-blindness

Simulate how colors appear to users with different types of color blindness

0スター
0フォーク
更新日 1/19/2026
SKILL.md
readonlyread-only
name
wcag-audit-perceivable-color-blindness
description

Simulate how colors appear to users with different types of color blindness

When to Use

Use this tool when designing color schemes to ensure accessibility for users with color vision deficiencies, testing color-dependent information, or validating color contrast for different types of color blindness.

Usage

Command Line

node scripts/simulate.js --color "#FF0000" --type protanopia
node scripts/simulate.js --color "rgb(255,0,0)" --type deuteranopia
node scripts/simulate.js --color "#00FF00" --type tritanopia

JSON Input

node scripts/simulate.js --json '{"color": "#FF0000", "type": "protanopia"}'

Parameters

  • --color: Color to simulate (hex, rgb)
  • --type: Type of color blindness (protanopia, deuteranopia, tritanopia)
  • --json: JSON input with color and type properties

Supported Color Blindness Types

  • Protanopia: Red-blind (missing red cones)
  • Deuteranopia: Green-blind (missing green cones)
  • Tritanopia: Blue-blind (missing blue cones)

Output

Returns JSON with simulated color values:

{
  "original": "#FF0000",
  "simulated": "#5A5A5A",
  "type": "protanopia",
  "description": "Red-blind simulation"
}

Examples

Simulate red color for protanopia

$ node scripts/simulate.js --color "#FF0000" --type protanopia
Original: #FF0000 (rgb(255,0,0))
Protanopia: #5A5A5A (rgb(90,90,90))
This red appears as a dark gray to someone with protanopia

Test multiple colors

$ node scripts/simulate.js --color "#00FF00" --type deuteranopia
Original: #00FF00 (rgb(0,255,0))
Deuteranopia: #8C8C8C (rgb(140,140,140))
This green appears as a medium gray to someone with deuteranopia

Best Practices

  1. Don't rely on color alone: Use shapes, patterns, or text labels in addition to color
  2. Test critical color combinations: Check that important information remains distinguishable
  3. Consider contrast: Even with color blindness simulation, ensure adequate contrast ratios
  4. Test all types: Check designs against all three main types of color blindness

Learn More

For more information about Agent Skills and how they extend AI capabilities.

You Might Also Like

Related Skills

fix

fix

243Kdev-testing

Use when you have lint errors, formatting issues, or before committing code to ensure it passes CI.

facebook avatarfacebook
入手
peekaboo

peekaboo

179Kdev-testing

Capture and automate macOS UI with the Peekaboo CLI.

openclaw avataropenclaw
入手
frontend-testing

frontend-testing

128Kdev-testing

Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Vitest, RTL, unit tests, integration tests, or write/review test requests.

langgenius avatarlanggenius
入手
frontend-code-review

frontend-code-review

127Kdev-testing

Trigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support both pending-change reviews and focused file reviews while applying the checklist rules.

langgenius avatarlanggenius
入手
code-reviewer

code-reviewer

92Kdev-testing

Use this skill to review code. It supports both local changes (staged or working tree) and remote Pull Requests (by ID or URL). It focuses on correctness, maintainability, and adherence to project standards.

google-gemini avatargoogle-gemini
入手
session-logs

session-logs

90Kdev-testing

Search and analyze your own session logs (older/parent conversations) using jq.

moltbot avatarmoltbot
入手