color

Name: color
Availability: InStock
Author: Hdeibler

Structure UI color palettes around attention, grouping, meaning, and aesthetics.

6|3|Updated May 3, 2026

Search Tags:#data visualization #dark mode #color system #ui accessibility #wcag contrast #status semantics #palette audit

Ready to run

npx skills add https://github.com/HDeibler/universal-design-principles --skill color

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: color
Source: https://github.com/HDeibler/universal-design-principles/tree/main/plugins/perception-and-hierarchy-principles/skills/color
Command: npx skills add https://github.com/HDeibler/universal-design-principles --skill color

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Color decisions often drift into inconsistent semantics, unreadable contrast, and noisy palettes that fail accessibility, especially when requirements like WCAG contrast or dark mode are in scope.

Core Features & Use Cases

Attention, grouping, meaning, and aesthetics: ensures every color earns its role rather than acting as decoration.
Color system discipline: builds restrained palettes with neutrals, a brand primary, and consistent semantic colors for success, warning, and error.
Accessibility-first color guidance: applies WCAG contrast targets and confirms color is never the only signal (pairing with text/icons/patterns).
Context-aware semantics: helps audit assumptions about color symbolism across global audiences where meanings vary by culture.

Quick Start

Use the color skill to audit a UI palette for contrast, dark-mode behavior, and whether each status meaning (success/warning/error) is conveyed with non-color signals as well.

Frequently Asked Questions about color

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

FAQPage Schema

How do I build a UI color system that passes WCAG contrast checks?▼

WCAG contrast checks validate that UI color palettes maintain sufficient luminance ratios for accessibility. This Skill audits color ramps, semantic status colors, and dark mode behavior to ensure text and interactive elements remain readable and compliant.

What is the best way to choose semantic status colors for a product design system?▼

Semantic status colors in a product design system should consistently represent success, warning, and error states. This Skill guides defining these colors within a restrained palette while ensuring meanings remain clear across different cultural contexts.

How do I audit an existing interface for color noise and accessibility pitfalls?▼

Auditing an interface for color noise involves evaluating whether every hue earns a functional role for attention, grouping, or meaning. This Skill reviews existing palettes for unnecessary colors, dark-mode behavior, and cultural symbolism pitfalls.

Does my data visualization palette need non-color fallbacks for accessibility?▼

Data visualization palettes require non-color fallbacks because color alone is not an accessible signal. This Skill ensures chart palettes pair colors with text, icons, or patterns so encoded information remains accessible to all users.

When should I avoid relying solely on color for status semantics in UI design?▼

Avoid relying solely on color for status semantics when designing for WCAG accessibility or global audiences. This Skill confirms color-encoded information always pairs with text or icons to prevent misinterpretation across varying cultural contexts.