← Back to Skills

color-contrast-checker

v1.0.0 approved Utilities ⬇ 2 ↑ 2/7d updated today
USK v3 ✅ Verified ⚡ Auto-Convert
⬇ Download
Install Guide↓
🤖 Agent install commands (curl / MCP / Claude Desktop)
▸ curl one-liner
curl -L -o color-contrast-checker.skill   "https://aiskillstore.io/v1/agent/skills/8759b318-894b-476e-a534-944a645e6c01/download?platform=ClaudeCode"
▸ MCP tool call (after registering Skill Store MCP)
{
  "tool": "download_skill",
  "arguments": {
    "skill_id": "8759b318-894b-476e-a534-944a645e6c01",
    "platform": "ClaudeCode"
  }
}
▸ Claude Desktop / Cursor MCP config (one-time)
{
  "mcpServers": {
    "skill-store": {
      "url": "https://aiskillstore.io/mcp/"
    }
  }
}
📖 Full agent API guide: /llms.txt  ·  MCP server card

WCAG 2.1 color contrast analysis, fix suggestions, palette matrix, and anti-pattern audit — zero external dependencies.

# accessibility # a11y # wcag # color # contrast # ui # design # palette # color-blindness

Basic Info

Owner 👤 aiskillstore-team Category Utilities Registered 2026-04-29 Last Updated 2026-04-29 Latest Version 1.0.0 Packaged At 2026-04-29 Vetting Status approved Downloads 2 Checksum (SHA256) db806149dd0ddcf274b5797880af0af57e3adb9fa3023d9409504d153c004225

⚡ AGENT INFO USK v3

Capabilities
wcag_contrast_check fix_suggestion_lab palette_matrix_audit color_antipattern_scan korean_verdict
Permissions
✗ network
✗ filesystem
✗ subprocess
Interface
type: cli   entry_point: main.py   runtime: python3   call_pattern: stdin_stdout
Agent API
# 스킬 스키마 조회 (에이전트가 호출 방법을 파악) GET /v1/agent/skills/8759b318-894b-476e-a534-944a645e6c01/schema # 플랫폼별 자동 변환 다운로드 GET /v1/agent/skills/8759b318-894b-476e-a534-944a645e6c01/download?platform=OpenClaw GET /v1/agent/skills/8759b318-894b-476e-a534-944a645e6c01/download?platform=ClaudeCode GET /v1/agent/skills/8759b318-894b-476e-a534-944a645e6c01/download?platform=ClaudeCodeAgentSkill GET /v1/agent/skills/8759b318-894b-476e-a534-944a645e6c01/download?platform=Cursor GET /v1/agent/skills/8759b318-894b-476e-a534-944a645e6c01/download?platform=GeminiCLI GET /v1/agent/skills/8759b318-894b-476e-a534-944a645e6c01/download?platform=CodexCLI GET /v1/agent/skills/8759b318-894b-476e-a534-944a645e6c01/download?platform=CustomAgent

Installation

Compatible Platforms any

1
Install the skill using openclaw_skill_manager.py.
python openclaw_skill_manager.py --install color-contrast-checker
2
Verify installation
python openclaw_skill_manager.py --list-installed
3
Install a specific version (optional)
python openclaw_skill_manager.py --install color-contrast-checker --version 1.0.0
1
Download the skill package.
curl -O https://aiskillstore.io/v1/skills/8759b318-894b-476e-a534-944a645e6c01/download
2
Place it in the Claude Code commands directory.
unzip color-contrast-checker.skill -d ~/.claude/commands/color-contrast-checker/
3
Use it as a slash command in Claude Code.
/color-contrast-checker
1
Download the Agent Skills package.
curl -O https://aiskillstore.io/v1/agent/skills/8759b318-894b-476e-a534-944a645e6c01/download?platform=ClaudeCodeAgentSkill
2
Unzip it into the Claude Code skills directory.
unzip color-contrast-checker-agent-skill-*.skill -d ~/.claude/skills/color-contrast-checker/
3
Restart Claude Code — the skill is auto-loaded at session start. No slash command needed.
1
Download the Cursor-converted package.
curl -O https://aiskillstore.io/v1/agent/skills/8759b318-894b-476e-a534-944a645e6c01/download?platform=Cursor
2
Unzip and place it in a permanent location.
unzip color-contrast-checker-cursor-*.skill -d ~/.cursor/skills/color-contrast-checker/
3
Add the MCP server config to .cursor/mcp.json, then restart Cursor.
cat ~/.cursor/skills/color-contrast-checker/cursor_mcp_config.json
1
Download the Gemini CLI-converted package.
curl -O https://aiskillstore.io/v1/agent/skills/8759b318-894b-476e-a534-944a645e6c01/download?platform=GeminiCLI
2
Unzip and place it in a permanent location.
unzip color-contrast-checker-geminicli-*.skill -d ~/.gemini/skills/color-contrast-checker/
3
Add the MCP server config to ~/.gemini/settings.json, then restart Gemini CLI.
cat ~/.gemini/skills/color-contrast-checker/gemini_settings_snippet.json
1
Download the Codex CLI-converted package.
curl -O https://aiskillstore.io/v1/agent/skills/8759b318-894b-476e-a534-944a645e6c01/download?platform=CodexCLI
2
Unzip and place it in a permanent location.
unzip color-contrast-checker-codexcli-*.skill -d ~/.codex/skills/color-contrast-checker/
3
Add the MCP server config to ~/.codex/config.toml, then restart Codex CLI.
cat ~/.codex/skills/color-contrast-checker/codex_config_snippet.toml
1
Download the skill package via REST API.
GET https://aiskillstore.io/v1/skills/8759b318-894b-476e-a534-944a645e6c01/download
2
Place it in your agent platform's skills directory.
cp color-contrast-checker.skill ./skills/
3
Fetch platform-specific details via the Install Guide API.
GET https://aiskillstore.io/v1/skills/8759b318-894b-476e-a534-944a645e6c01/install-guide?platform=CustomAgent

Security Vetting Report

Vetting Result APPROVED

Findings: ["메타데이터 경고: 권장 필드 없음: 'requirements' (SKILL.md v2 권장)", "메타데이터 경고: 권장 필드 없음: 'changelog' (SKILL.md v2 권장)"]

✅ No security risks found.

AI Review Stage

Reviewer gemini Risk Level 🟢 Low Review Summary WCAG 색상 대비 검사 및 제안 스킬로, 선언된 권한을 준수하며 악성 코드나 외부 통신이 없습니다.
Reasoning

스킬 메타데이터와 제공된 Python 코드 파일(main.py, lib/color_parser.py, lib/wcag_calc.py, lib/suggester.py, lib/auditor.py)을 분석했습니다. 1. **권한 일치 여부**: 메타데이터에 선언된 `permissions`는 `network: false`, `filesystem: false`, `subprocess: false`입니다. 코드 검토 결과, `os` 모듈은 `sys.path` 조작을 위한 `os.path.dirname`에만 사용되었으며, 파일 시스템 접근(읽기/쓰기), 네트워크 통신(소켓, HTTP 요청 등), 외부 프로세스 실행(`subprocess`, `os.system` 등)을 수행하는 코드는 발견되지 않았습니다. 이는 선언된 권한과 실제 코드가 완벽하게 일치함을 의미합니다. 2. **악의적 코드 여부**: 데이터 탈취, 시스템 파괴, 난독화 등의 악의적 목적을 가진 코드는 발견되지 않았습니다. 코드는 WCAG 색상 대비 계산, 색상 파싱, 수정 제안, 팔레트 감사 등 스킬의 명시된 기능만을 수행합니다. 정적 분석 결과에서도 'red_flags_found' 및 'obfuscation_warnings'가 없음을 확인했습니다. 3. **선언되지 않은 외부 통신**: 코드 내에서 어떠한 형태의 외부 네트워크 통신도 시도하지 않습니다. 4. **사용자 데이터 무단 수집/전송**: 스킬은 표준 입력(stdin)으로 데이터를 받아 처리하고, 표준 출력(stdout)으로 결과를 반환하는 `stdin_stdout` 패턴을 따릅니다. 사용자 데이터를 저장하거나 외부로 전송하는 기능은 없습니다. 5. **코드 품질 및 목적 일치**: 코드는 모듈화가 잘 되어 있고, 각 파일은 명확한 역할을 수행합니다. WCAG 2.1 가이드라인에 따른 색상 대비 계산 및 관련 기능을 충실히 구현하고 있으며, 스킬의 설명과 목적에 부합하는 고품질의 코드입니다. 한국어 주석과 설명도 잘 포함되어 있습니다. 결론적으로, 이 스킬은 보안 위험이 없으며 안전하게 배포될 수 있습니다.

Version History

Version USK v3 Vetting Status Packaged At Downloads Changelog
v1.0.0 approved 2026-04-29 ⬇ 2

Examples 10

Representative input/output examples for this skill. Agents can use these to understand how to invoke the skill and what output to expect.

check_black_white
# check# wcag# aaa

Classic black-on-white — known 21:1 result | 흑백 최대 대비비 검증

📥 Input
{
  "action": "check",
  "background": "#ffffff",
  "foreground": "#000000",
  "ui_element": "normal_text"
}
📤 Output
{
  "background_hex": "#ffffff",
  "foreground_hex": "#000000",
  "level": "aaa",
  "level_ko": "AAA \uc6b0\uc218",
  "passing_threshold": 4.5,
  "ratio": 21.0,
  "ui_element": "normal_text",
  "wcag_aa": true,
  "wcag_aaa": true
}
check_fail_low_contrast
# check# fail# normal_text

Gray-on-light-gray — fails AA | 낮은 대비비 AA 미달 케이스

📥 Input
{
  "action": "check",
  "background": "#f5f5f5",
  "foreground": "#767676",
  "ui_element": "normal_text"
}
📤 Output
{
  "level": "fail",
  "level_ko": "\ubd88\ud569\uaca9 (\uae30\uc900 \ubbf8\ub2ec)",
  "passing_threshold": 4.5,
  "ratio": 4.48,
  "wcag_aa": false,
  "wcag_aaa": false
}
suggest_fix_gray_text
# suggest_fix# aa# auto

Auto-suggest darker gray to pass AA | 미달 회색 텍스트의 합격 대안 자동 제안

📥 Input
{
  "action": "suggest_fix",
  "adjust": "fg",
  "background": "#f5f5f5",
  "foreground": "#767676",
  "target_level": "aa"
}
📤 Output
{
  "suggestions": [
    {
      "background": "#f5f5f5",
      "distance_lab": 1.5,
      "foreground": "#737373",
      "ratio": 4.6
    }
  ]
}
palette_audit_small
# palette_audit# matrix

3-color palette contrast matrix | 3색 팔레트 대비비 행렬

📥 Input
{
  "action": "palette_audit",
  "colors": [
    {
      "color": "#000000",
      "name": "black"
    },
    {
      "color": "#ffffff",
      "name": "white"
    },
    {
      "color": "#808080",
      "name": "gray"
    }
  ],
  "ui_element": "normal_text"
}
📤 Output
{
  "colors": [
    {
      "hex": "#000000",
      "name": "black"
    },
    {
      "hex": "#ffffff",
      "name": "white"
    },
    {
      "hex": "#808080",
      "name": "gray"
    }
  ],
  "summary": {
    "aa_only": 1,
    "aaa": 1,
    "fail": 1,
    "total_pairs": 3
  },
  "ui_element": "normal_text"
}
audit_antipatterns
# audit# accessibility# color-blindness

Anti-pattern scan on a risky palette | 위험 팔레트 안티패턴 전체 검사

📥 Input
{
  "action": "audit",
  "palette": [
    {
      "color": "#ff0000",
      "name": "danger_red"
    },
    {
      "color": "#00aa00",
      "name": "success_green"
    },
    {
      "color": "#fefefe",
      "name": "near_white"
    }
  ]
}
📤 Output
{
  "summary": {
    "error": 1,
    "info": 3,
    "warning": 1
  },
  "total_colors": 3
}
check_named_color
# check# named_color# large_text

CSS named color input | CSS 색상명 입력 지원

📥 Input
{
  "action": "check",
  "background": "white",
  "foreground": "cornflowerblue",
  "ui_element": "large_text"
}
📤 Output
{
  "level": "aa",
  "ratio": 3.0,
  "wcag_aa": true
}
check_rgb_function
# check# rgb_function# ui_component

rgb() function format input | rgb() 형식 입력

📥 Input
{
  "action": "check",
  "background": "rgb(255, 255, 255)",
  "foreground": "rgb(0, 0, 0)",
  "ui_element": "ui_component"
}
📤 Output
{
  "level": "aaa",
  "ratio": 21.0,
  "wcag_aa": true
}
suggest_fix_aaa
# suggest_fix# aaa

Suggest fix targeting AAA level | AAA 기준 통과 색상 제안

📥 Input
{
  "action": "suggest_fix",
  "adjust": "fg",
  "background": "#ffffff",
  "foreground": "#555555",
  "target_level": "aaa"
}
📤 Output
{
  "suggestions": [
    {
      "background": "#ffffff",
      "distance_lab": 2.5,
      "foreground": "#595959",
      "ratio": 7.0
    }
  ]
}
error_missing_action
# error# validation

Error case — missing action field | 에러: action 필드 누락

📥 Input
{
  "background": "#ffffff",
  "foreground": "#000000"
}
📤 Output
{
  "error": {
    "code": "MISSING_FIELD",
    "message": "Missing required field: \u0027action\u0027."
  }
}
error_bad_color
# error# color_parse

Error case — unrecognized color format | 에러: 잘못된 색상 형식

📥 Input
{
  "action": "check",
  "background": "#ffffff",
  "foreground": "not_a_color",
  "ui_element": "normal_text"
}
📤 Output
{
  "error": {
    "code": "COLOR_PARSE_ERROR",
    "message": "Unrecognized color format: \u0027not_a_color\u0027."
  }
}

All examples are also available via the agent API: /v1/agent/skills/8759b318-894b-476e-a534-944a645e6c01/schema

Reviews & Ratings

No reviews yet. Be the first to leave one!

✍️ Write a Review