skills.rest
Owl-Listener
Owl-ListenerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

critique-color

Audit a screen's colour contrast, palette coherence, and semantic meaning against WCAG standards.

2.5k|358|Updated Mar 7, 2026
Search Tags:#wcag#contrast ratio#palette# accessibility#UI review#Design tokens#color critique
One-click install
npx skills add https://github.com/Owl-Listener/designer-skills --skill critique-color
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: critique-color
Source: https://github.com/Owl-Listener/designer-skills/tree/main/visual-critique/skills/critique-color
Command: npx skills add https://github.com/Owl-Listener/designer-skills --skill critique-color

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Colour issues on a screen — failing contrast ratios, off-token hex values, and colour-only state indicators — are easy to miss in review and expensive to fix after release. This Skill gives you a structured, expert-level critique of every colour decision on a single rendered screen.

Core Features & Use Cases

  • Contrast Auditing: Measures text, UI component, and focus-ring contrast against WCAG AA thresholds (4.5:1 for body text, 3:1 for large text and interactive elements), flagging each failing pair with its actual ratio.
  • Palette Coherence Review: Detects arbitrary one-off colours outside the design token system and checks whether neutrals, primaries, and accents follow their intended roles.
  • Semantic & Accessibility Checks: Identifies colour-only state indicators (error, success, warning) and evaluates risks for colour vision deficiencies and forced-colour modes.
  • Use Case: Before shipping a new checkout screen, run this critique to catch a red-only error state and a placeholder text colour that fails contrast, then get specific token-level fixes.

Quick Start

Ask the AI to critique the colour usage of the attached screen screenshot, covering contrast ratios, palette coherence, and semantic meaning.

Frequently Asked Questions about critique-color

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check colour contrast on a UI screen against WCAG?▼

This Skill audits text and UI element contrast against WCAG AA thresholds: 4.5:1 for body text, 3:1 for large text and interactive components. It flags every failing pair with the measured ratio and the minimum required.

What is the difference between a colour critique and a full accessibility audit?▼

A colour critique reviews one screen's contrast, palette coherence, and semantic colour use. For a product-wide WCAG audit, use the accessibility-audit skill in design-systems; for building a palette from scratch, use color-system in ui-design.

Can colour alone be used to show error or success states?▼

No. Colour must be paired with an icon, label, or pattern to be accessible, since colour-only indicators fail for users with colour vision deficiencies. The critique flags any state communicated by colour alone.

Why does placeholder text often fail contrast requirements?▼

Placeholder text is frequently rendered at reduced opacity, such as 40%, which drops it below the 4.5:1 ratio on light surfaces. The critique flags placeholder and disabled states that fail contrast in ways that impede use.

What output does the colour critique produce?▼

For each of four dimensions — Contrast, Palette Coherence, Semantic Use, Accessibility — it provides an observation, the problem and why it matters, and a specific fix with ratios or token names, plus a pass/minor/major rating.

Related Skills

Explore More Design & Creative Skills→
nexu-ionexu-io
93.2k

mobile-app

Generate pixel-accurate mobile app screen mockups using predefined archetypes and device frames.

Official
Intermediate
SAZO-KRSAZO-KR

review

Launch five parallel fresh-context code review agents until all pass.

Official
Advanced
zinohomezinohome
1

accessibility-auditor

Audit web pages for WCAG 2.1 compliance and implement accessibility fixes.

Community
Advanced
Legal-and-GeneralLegal-and-General
23

canopy-colour-foundation

Apply Canopy colour tokens and WCAG contrast rules to Angular projects.

Official
Intermediate