skills.rest
Deibler
DeiblerCOMMUNITY
Explore all skills by this author →
GitHub

color

Guides palette selection, semantic color systems, and WCAG contrast compliance for UI design.

8|3|Updated May 3, 2026
Search Tags:#accessibility#color palette#design tokens#ui design#dark mode#semantic colors#wcag contrast
One-click install
npx skills add https://github.com/Deibler/universal-design-principles --skill color-deibler
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color
Source: https://github.com/Deibler/universal-design-principles/tree/main/plugins/perception-and-hierarchy-principles/skills/color
Command: npx skills add https://github.com/Deibler/universal-design-principles --skill color-deibler

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Design teams struggle with inconsistent palettes, color-only signals that fail colorblind users, contrast ratios that violate WCAG, and dark-mode palettes that break when naively inverted. This Skill provides the decision framework for building restrained, accessible, culturally aware color systems. ## Core Features & Use Cases - Palette Architecture: Defines a restrained system of one brand primary, a 9-11 stop neutral ramp, and 3-5 semantic hues (success, warning, destructive, info) with per-stop tokens. - Accessibility Enforcement: Applies WCAG contrast ratios (4.5:1 body text, 3:1 large text and UI components) and mandates non-color redundant signals for status, errors, and required fields. - Cultural and Mode Awareness: Covers cross-cultural color symbolism differences and deliberate dark-mode token design rather than simple inversion. - Use Case: When designing a status badge system, apply the Skill to produce badges that combine tinted backgrounds, dark text colors, icons, and labels so meaning survives colorblindness, grayscale printing, and glare. ## Quick Start Ask the agent to audit your UI's color usage and propose a restrained palette with semantic tokens that pass WCAG AA contrast.

Frequently Asked Questions about color

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

FAQPage Schema
How do I choose colors for a UI design system?▼

Start with one brand primary hue, then build a 9-11 stop neutral ramp slightly tinted toward that hue, and add three to five semantic hues for success, warning, and error states. Limit the active palette to roughly five recognizable colors so each hue keeps its meaning.

What WCAG contrast ratio is required for text?▼

WCAG Level AA requires 4.5:1 contrast for body text under 18pt, and 3:1 for large text (18pt+ or 14pt+ bold) and UI components. Level AAA raises body text to 7:1. Verify every text-on-background pair with a contrast checker like WebAIM or Chrome DevTools.

How do I design colors for colorblind users?▼

Never use color as the only signal, per WCAG 1.4.1. Pair every color cue with an icon, text label, pattern, or border so the roughly 8% of men with red-green color blindness still receive the information. Test with vision deficiency emulation in Chrome DevTools.

Why does my palette break in dark mode?▼

Saturation and contrast perception invert in dark mode, so simply inverting a light palette produces glare and failing contrast. Build dark-mode tokens deliberately with adjusted lightness and chroma per stop rather than relying on automatic inversion.

Does color symbolism work for global audiences?▼

Color symbolism varies by culture: red signals danger in Western contexts but luck in Chinese contexts, and white means purity in the West but mourning in parts of Asia. Global products should pair color with icons and text rather than relying on symbolism alone.

Related Skills

Explore More Design & Creative Skills→
wpgauravwpgaurav
14

colorize

Define a 2-4 color palette with semantic roles and WCAG contrast checks.

Community
Advanced
rampstackcorampstackco
523

design-standards

Validate UI tokens, contrast, spacing, typography, and responsive rules against design standards.

Official
Advanced
launchapp-devlaunchapp-dev
38

visual-hierarchy

Apply size, weight, color, spacing, and positioning rules to prioritize content in web and mobile layouts.

Official
Intermediate
EmasoftEmasoft

amw-material-3

Applies Material Design 3 tokens for color, shape, type, elevation, and state layers to web UI.

Community
Advanced