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.