alterlab-vcd-color-theorist

Architect accessible color systems with OKLCH scales and WCAG contrast testing.

9|1|Updated Mar 26, 2026
One-click install
npx skills add https://github.com/AlterLab-IEU/AlterLab-FC-Skills --skill alterlab-vcd-color-theorist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: alterlab-vcd-color-theorist
Source: https://github.com/AlterLab-IEU/AlterLab-FC-Skills/tree/main/skills/vcd/alterlab-vcd-color-theorist
Command: npx skills add https://github.com/AlterLab-IEU/AlterLab-FC-Skills --skill alterlab-vcd-color-theorist

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Color communication is foundational in design, but many palettes fail accessibility and cultural nuance, causing misinterpretation and extra revision.

Core Features & Use Cases

  • Color system architecture: build scalable palettes with primary, neutral, and semantic tokens suitable for light/dark modes.
  • Accessibility-driven design: rigorous contrast testing, CVD simulations, and redundant encodings.
  • Cultural and psychological analysis: map color meanings across markets and apply Itten's contrasts for intentional brand storytelling.
  • Use Case: Create a healthcare branding system that preserves meaning across regions while meeting WCAG AA criteria.

Quick Start

Define a complete color system for a healthcare app with light and dark modes and WCAG AA compliance.

Frequently Asked Questions about alterlab-vcd-color-theorist

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

FAQPage Schema
How do I create an accessible color palette that meets WCAG contrast requirements?▼

Accessible color palettes that meet WCAG contrast requirements are generated by rigorously testing contrast ratios and optimizing perceptual uniformity using OKLCH-based scales. The system ensures compliance by simulating color-vision deficiencies and applying redundant encodings for robust accessibility.

What is the best way to design color tokens for light and dark mode?▼

Designing color tokens for light and dark mode requires archicting a scalable system with primary, neutral, and semantic tokens. This approach ensures consistent perceptual uniformity and maintains WCAG AA contrast compliance across both light and dark UI modes.

How does color-vision deficiency simulation work for UI design systems?▼

Color-vision deficiency simulation for UI design systems works by testing palette accessibility against various visual impairments. It validates OKLCH-based color scales and applies redundant encodings to ensure interface elements remain distinguishable and compliant with WCAG standards.

Can I map cultural color meanings for a branding system across different regions?▼

Mapping cultural color meanings for a branding system across regions is achieved through cultural and psychological analysis. This process evaluates market-specific color associations and applies Itten's contrasts to maintain accurate cultural messaging while satisfying accessibility criteria.

Do I need OKLCH color scales for building a scalable product UI color system?▼

OKLCH color scales are needed for building a scalable product UI color system because they provide perceptual uniformity. This ensures that generated semantic tokens and light/dark mode palettes maintain consistent visual lightness and accessibility compliance across the interface.