What is the critique-color skill?
The critique-color skill is a SKILL.md in the visual-critique plugin of Owl-Listener's designer-skills pack. It makes an AI coding agent audit every color decision on a rendered screen across four dimensions, flag each failing pair with its measured ratio and recommend a specific correction.
The critique-color skill is a SKILL.md in the visual-critique plugin of the designer-skills repository. It critiques a rendered screen's color: contrast ratios, palette coherence and semantic meaning. Use it when reviewing one screen.
The agent acts as an expert in color theory, accessible design and design systems. It audits all color decisions on the screen, flags every deviation and recommends specific corrections, including the ratio, token name or pairing where applicable.
The four dimensions
- Contrast: text and UI element contrast against WCAG AA, with every failing pair listed with its measured and required ratio.
- Palette coherence: whether colors come from defined token values and are applied by role.
- Semantic use: whether color communicates meaning reliably and is never the only indicator of state.
- Accessibility: color vision deficiencies, forced-colors environments and decorative color that hurts legibility.
Contrast thresholds
Body text must meet WCAG AA at 4.5:1. Large text, meaning 18px and up regular or 14px and up bold, must meet 3:1. Interactive components such as buttons, inputs and focus rings must meet 3:1 against adjacent surfaces.
Who the critique-color skill is for
Best for
- Reviewing the color of an existing rendered screen.
- Catching one-off hex values that sit outside the token system.
- Checking that error, success and warning states carry an icon, label or pattern as well as color.
Not for
- Building the palette itself, which the color-system skill in the ui-design plugin handles.
- A product-wide WCAG audit, which the accessibility-audit skill in the design-systems plugin handles.
- Type scale, line height and measure, which critique-typography reviews.
Failure patterns it flags
- Link color that fails 4.5:1 against white when the 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 color treatment.
How to install Critique Color Skill: Contrast and Palette Review
/plugin marketplace add Owl-Listener/designer-skills
/plugin install visual-critique@designer-skills/visual-critique:critique-screen, which runs all seven visual critiques on a screen and outputs a prioritized fix list.Add the marketplace
Run
/plugin marketplace add Owl-Listener/designer-skillsin your AI coding agent. This only tells the agent where the skills live and installs nothing yet.Install the visual-critique plugin
Run
/plugin install visual-critique@designer-skills. The critique-color skill ships inside this plugin. You can also type/plugin, open the Discover tab, tick the plugin with space and press enter.Using Gemini CLI instead
Each plugin is also a Gemini CLI extension. Clone the repository, create
.gemini/extensionsin your project root and copy the cloned.gemini/extensionscontents into it.Ask for the skill by task
Attach a screenshot or describe the screen. For example: critique the color on this dashboard, and list each failing contrast pair with its ratio.
Check that it loaded
Give the agent a rendered screen. Expect an observation, a problem and a fix for each dimension, and a rating of pass, minor issue or major issue. The four dimensions should be Contrast, Palette Coherence, Semantic Use and Accessibility.
Key features
- Text contrastChecks body text against WCAG AA at 4.5:1 and large text, 18px and up regular or 14px and up bold, against 3:1.
- Component contrastChecks that buttons, inputs and focus rings meet 3:1 against adjacent surfaces, and that placeholder text and disabled states do not fail in ways that impede use.
- Measured failuresEvery failing pair is flagged with its actual measured ratio and the minimum required.
- Palette coherenceAsks whether the palette is limited to defined token values or arbitrary colors appear, and whether neutrals, primaries and accents follow their intended roles.
- Visual noiseLooks for colors on adjacent or overlapping elements that create unintended noise or vibration, and asks whether the overall register is warm, cool or neutral and suits the context.
- Semantic consistencyChecks that status colors for error, success and warning are applied consistently, and that interactive color separates clearly from non-interactive color.
- No color-only stateIf color is the sole indicator of error, success or warning, the skill flags it, since color must be paired with an icon, label or pattern.
- Color vision checksAsks whether foreground and background combinations cause problems for deuteranopia and protanopia.
- Forced colorsChecks that the interface holds up in Windows High Contrast mode or other forced-colors environments.
- Structured findingsEach dimension gets an observation, a problem and a fix, plus a rating of pass, minor issue or major issue.
Frequently asked questions
What is the critique-color skill?
It is a SKILL.md in the visual-critique plugin of the Owl-Listener/designer-skills repository. It has an AI coding agent audit a rendered screen's color, covering contrast ratios, palette coherence, semantic meaning and accessibility, and it recommends a specific correction for every deviation it finds.
How do I install critique-color?
Run /plugin marketplace add Owl-Listener/designer-skills, then /plugin install visual-critique@designer-skills. The first command only registers where the skills live. You can also type /plugin, open the Discover tab, tick the plugin with space and press enter. Gemini CLI users copy the plugin's extension folder instead.
Which contrast ratios does critique-color check?
Body text must meet WCAG AA at 4.5:1, and large text at 3:1, where large means 18px and up regular or 14px and up bold. Interactive components such as buttons, inputs and focus rings must meet 3:1 against adjacent surfaces. Failing pairs are listed with the measured and minimum ratios.
What does critique-color say about color-only states?
If color is the sole indicator of a state such as error, success or warning, the skill flags it. Color must be paired with an icon, label or pattern to be accessible. It also checks that status colors, red for error, green for success and amber for warning, stay consistent across the screen.
What does the critique-color output look like?
For each of the four dimensions, Contrast, Palette Coherence, Semantic Use and Accessibility, the agent gives an observation, a problem and a fix, including the ratio, token name or pairing where applicable. It then rates the dimension pass, minor issue or major issue.
When should I use critique-color instead of color-system?
Use critique-color when reviewing one existing screen. Use the color-system skill in the ui-design plugin when you are building the palette, and the accessibility-audit skill in the design-systems plugin when you need a product-wide WCAG audit. The three jobs are separate.
Which AI coding agents can use critique-color?
The designer-skills pack is written for Claude Code and Gemini CLI. In Claude Code you add the marketplace and install the visual-critique plugin by name. Each plugin is also a Gemini CLI extension, which you copy into a .gemini/extensions folder in your project.
What license does critique-color use?
It is MIT licensed. The Owl-Listener/designer-skills repository declares the MIT license on GitHub, and the visual-critique plugin ships from that repository. The critique-color skill is installed with that plugin through the designer-skills marketplace, as the install steps above describe.