critique-color

GitHub

用于审查单个屏幕的色彩设计,评估对比度、调色板一致性及语义可用性。提供具体修复建议,确保符合无障碍标准。

visual-critique/skills/critique-color/SKILL.md Owl-Listener/designer-skills

Trigger Scenarios

需要审查界面色彩对比度和可读性 检查UI组件的色彩一致性和语义含义 验证设计是否符合WCAG无障碍标准

Install

npx skills add Owl-Listener/designer-skills --skill critique-color -g -y
More Options

Non-standard path

npx skills add https://github.com/Owl-Listener/designer-skills/tree/main/visual-critique/skills/critique-color -g -y

Use without installing

npx skills use Owl-Listener/designer-skills@critique-color

指定 Agent (Claude Code)

npx skills add Owl-Listener/designer-skills --skill critique-color -a claude-code -g -y

安装 repo 全部 skill

npx skills add Owl-Listener/designer-skills --all -g -y

预览 repo 内 skill

npx skills add Owl-Listener/designer-skills --list

SKILL.md

Frontmatter
{
    "name": "critique-color",
    "description": "Critique a rendered screen's colour — contrast ratios, palette coherence, and semantic meaning. Use when reviewing one screen. For a product-wide WCAG audit use `accessibility-audit` (design-systems); for building the palette use `color-system` (ui-design)."
}

Critique Color

You are an expert in colour theory, accessible design, and design systems.

What You Do

You audit all colour decisions on a screen: contrast ratios, palette coherence, semantic colour meaning, and accessibility. You flag every deviation and recommend specific corrections.

Critique Dimensions

Contrast

Evaluate text/background and UI element contrast for readability and compliance.

  • Does body text meet WCAG AA (4.5:1)? Does large text (18px+ regular, 14px+ bold) meet 3:1?
  • Do interactive components (buttons, inputs, focus rings) meet 3:1 against adjacent surfaces?
  • Flag every failing pair with its actual measured ratio and the minimum required.
  • Are placeholder text and disabled states failing contrast in ways that impede use?

Palette Coherence

Evaluate whether colour use is purposeful and internally consistent.

  • Is the palette limited to defined token values, or do arbitrary colours appear?
  • Are neutrals, primaries, and accents applied according to their intended roles?
  • Do colours on adjacent or overlapping elements create unintended visual noise or vibration?
  • Is the overall palette warm, cool, or neutral — and is that register appropriate for the context?

Semantic Use

Evaluate whether colour communicates meaning reliably.

  • Is colour used as the sole indicator of state (error, success, warning)? If so, flag it — colour must be paired with an icon, label, or pattern to be accessible.
  • Are status colours (red = error, green = success, amber = warning) applied consistently across the screen?
  • Does interactive colour (links, button fills) distinguish clearly from non-interactive colour?
  • Are decorative colour uses being mistaken for actionable elements?

Accessibility

Evaluate broader colour accessibility beyond contrast ratios.

  • Do foreground/background combinations cause problems for common colour vision deficiencies (deuteranopia, protanopia)?
  • Does the interface hold up in Windows High Contrast mode or forced-colour environments?
  • Are any decorative colour uses interfering with content legibility?

Output Format

For each dimension — Contrast, Palette Coherence, Semantic Use, Accessibility — provide:

  1. Observation — what you see (neutral, factual)
  2. Problem — what is broken and why it matters
  3. Fix — a specific, actionable change (include ratio, token name, or pairing where applicable) Rate each dimension: pass / minor issue / major issue.

Common Failure Patterns

  • Link colour that fails 4.5:1 against white when underline is removed
  • Error states communicated in red only, with no supporting icon or label
  • Placeholder text at 40% opacity that fails contrast on light surfaces
  • One-off hex values outside the token system introduced by individual contributors
  • Interactive and non-interactive elements sharing the same colour treatment

Version History

  • 20e34c4 Current 2026-08-19 23:24

    优化技能描述,增加使用场景触发器和边界说明,解决与其他相关技能的冲突。

  • acc3e57 2026-07-25 05:17

Same Skill Collection

design-ops/skills/design-critique/SKILL.md
design-ops/skills/design-debt-audit/SKILL.md
design-ops/skills/design-impact-reporting/SKILL.md
design-ops/skills/design-qa-checklist/SKILL.md
design-ops/skills/design-review-process/SKILL.md
design-ops/skills/design-sprint-plan/SKILL.md
design-ops/skills/handoff-spec/SKILL.md
design-ops/skills/team-workflow/SKILL.md
design-ops/skills/version-control-strategy/SKILL.md
design-research/skills/affinity-diagram/SKILL.md
design-research/skills/card-sort-analysis/SKILL.md
design-research/skills/diary-study-plan/SKILL.md
design-research/skills/empathy-map/SKILL.md
design-research/skills/interview-script/SKILL.md
design-research/skills/jobs-to-be-done/SKILL.md
design-research/skills/journey-map/SKILL.md
design-research/skills/research-repository/SKILL.md
design-research/skills/summarize-interview/SKILL.md
design-research/skills/survey-design/SKILL.md
design-research/skills/usability-test-plan/SKILL.md
design-research/skills/user-persona/SKILL.md
design-systems/skills/accessibility-audit/SKILL.md
design-systems/skills/component-spec/SKILL.md
design-systems/skills/design-system-governance/SKILL.md
design-systems/skills/design-token/SKILL.md
design-systems/skills/documentation-template/SKILL.md
design-systems/skills/icon-system/SKILL.md
design-systems/skills/localization-design/SKILL.md
design-systems/skills/motion-system/SKILL.md
design-systems/skills/naming-convention/SKILL.md
design-systems/skills/pattern-library/SKILL.md
design-systems/skills/theming-system/SKILL.md
designer-toolkit/skills/case-study/SKILL.md
designer-toolkit/skills/design-negotiation/SKILL.md
designer-toolkit/skills/design-rationale/SKILL.md
designer-toolkit/skills/design-system-adoption/SKILL.md
designer-toolkit/skills/design-token-audit/SKILL.md
designer-toolkit/skills/presentation-deck/SKILL.md
designer-toolkit/skills/ux-writing/SKILL.md
interaction-design/skills/animation-principles/SKILL.md
interaction-design/skills/conversational-ux/SKILL.md
interaction-design/skills/doherty-threshold/SKILL.md
interaction-design/skills/error-handling-ux/SKILL.md
interaction-design/skills/feedback-patterns/SKILL.md
interaction-design/skills/fitts-law/SKILL.md
interaction-design/skills/form-design/SKILL.md
interaction-design/skills/gesture-patterns/SKILL.md
interaction-design/skills/hicks-law/SKILL.md
interaction-design/skills/interfaces-that-feel/SKILL.md
interaction-design/skills/jakobs-law/SKILL.md

Metadata

Files
0
Version
20e34c4
Hash
ffa4652b
Indexed
2026-07-25 05:17

inicio - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-08-20 01:04
浙ICP备14020137号-1 $mapa de visitantes$