use-of-color

Analyzes code for WCAG 1.4.1 violations where color alone conveys information.

3|Updated Apr 20, 2026
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill use-of-color-langgenius
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: use-of-color
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/use-of-color
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill use-of-color-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often rely on color alone to signal errors, required fields, link states, or chart categories, which makes that information invisible to colorblind, low-vision, and monochrome-display users. This Skill scans your code for WCAG 1.4.1 Use of Color violations and recommends concrete fixes. ## Core Features & Use Cases - Violation Detection: Identifies color-only links, form validation states, required-field markers, status indicators, hover/focus states, data visualizations, and color-coded categories. - Actionable Fixes: Recommends additional indicators such as icons, underlines, text labels, patterns, and ARIA attributes like aria-invalid and aria-describedby, with code examples. - Scoped Terminal Reports: Analyzes only the files you specify and outputs a plain-text report with file:line locations, violation types, current code, and remediation guidance. - Use Case: Before shipping a new dashboard, run the analysis on your chart and form components to catch red/green status indicators and color-only error borders, then apply the suggested icon and ARIA fixes. ## Quick Start Analyze src/components/Form.tsx and src/components/StatusBadge.tsx for WCAG 1.4.1 use-of-color violations and suggest fixes.

Frequently Asked Questions about use-of-color

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

FAQPage Schema
How do I check my code for WCAG 1.4.1 Use of Color violations?

Provide the file paths of the components you want reviewed, and the analysis scans for color-only indicators in links, forms, status messages, and charts. The report lists each violation with its location, current code, and a recommended fix.

What counts as a use of color accessibility violation?

A violation occurs when color is the only way information is conveyed, such as red-only error borders, links distinguished solely by color, or chart lines differentiated only by hue. Adding icons, underlines, text labels, or patterns makes the element compliant.

How do I fix color-only form validation errors?

Add an error message with an icon next to the input, set aria-invalid on the field, and connect the message with aria-describedby. Keeping the red border is fine as long as it is not the only indicator.

Does the analysis scan my entire codebase automatically?

No, file paths are required and only the specified files or directories are analyzed. If no paths are given, the skill asks which files or components to check before running.

When is using color alone acceptable in a UI?

Color alone is acceptable when it is decorative and conveys no information, or when it is paired with text, icons, or patterns. Syntax highlighting in code editors and images with descriptive alt text are also acceptable cases.