skills.rest
HDeibler
HDeiblerCOMMUNITY
Explore all skills by this author →
GitHub

color

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
One-click install
npx skills add https://github.com/HDeibler/universal-design-principles --skill color
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
dembrandtdembrandt
33

algorithmic-color-palette

Generate CSS-ready color tokens and palettes from brand colors using HSL adjustments.

Official
Intermediate
dz07dz07

Colors

Generate WCAG-compliant color palettes with semantic tokens and contrast calculations.

Community
Intermediate
jaainiljaainil

color-accessibility

Guide designers to create and validate WCAG-compliant accessible color palettes.

Community
Advanced
KyaniteLabsKyaniteLabs
3

color-system

Generate OKLCH color ramps and semantic token systems with WCAG 2.x contrast verification.

Official
Advanced