skills.rest
Toqsick
ToqsickCOMMUNITY
Explore all skills by this author →
GitHub

ui-color-system

Generate accessible UI color palettes with WCAG contrast checking.

Updated Jul 3, 2026
Search Tags:#accessibility#WCAG#color palette#UI design#dark mode
One-click install
npx skills add https://github.com/Toqsick/MaxClaw --skill ui-color-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-color-system
Source: https://github.com/Toqsick/MaxClaw/tree/main/.claude/skills/ui-color-system
Command: npx skills add https://github.com/Toqsick/MaxClaw --skill ui-color-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill streamlines the creation of accessible UI color palettes, including dark mode and high-contrast variants, with built-in WCAG contrast checking.

Core Features & Use Cases

  • Automated Color Palette Generation: Generates palettes based on brand colors, mood, and accessibility standards.
  • WCAG Compliance: Ensures color palettes meet WCAG contrast standards for accessibility.
  • Dark Mode and High-Contrast Variants: Provides dark mode and high-contrast color schemes for better user experience.
  • Use Case: For a software development team looking to create a new product with an accessible color scheme, this Skill can quickly generate a palette that adheres to WCAG guidelines.

Quick Start

Generate a color palette for a brand using the 'ui-color-system' skill with primary color #7C3AED and mood 'trustworthy'.

Frequently Asked Questions about ui-color-system

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

FAQPage Schema
How do I generate a WCAG compliant color palette for UI design?▼

Generate a WCAG compliant color palette by inputting a primary brand color and desired mood, and the system automatically creates accessible color schemes with built-in contrast checking.

Can I create dark mode and high-contrast color schemes from an existing brand color?▼

Dark mode and high-contrast color schemes can be created automatically by providing your brand's primary color, generating UI variants that meet accessibility standards.

How does automated contrast checking work for web accessibility?▼

Automated contrast checking works by analyzing your generated color palette against WCAG contrast standards, ensuring text and background combinations meet accessibility requirements.

What is the best way to build an accessible UI color system for a new software product?▼

The best way to build an accessible UI color system is automating palette generation from a primary color and mood parameter, instantly producing WCAG-compliant schemes for development workflows.

Do I need manual color adjustment to meet WCAG contrast standards?▼

Manual color adjustment is not needed, as the system utilizes custom algorithms to analyze and generate palettes that inherently meet WCAG contrast standards for accessibility.

Why does my UI color palette fail WCAG contrast checks in dark mode?▼

UI color palettes fail WCAG checks in dark mode when contrast ratios drop below standards, a problem solved by generating dark mode variants with built-in automated contrast analysis.

Related Skills

Explore More Design & Creative Skills→
resultanyildiziresultanyildizi
4

dominant-color

Extract dominant color and palette from images using ColorThief, outputting hex, rgb, or JSON.

Community
Intermediate
dylantarredylantarre
38

dark-mode

Implement dark mode with semantic color tokens, CSS variables, and system preference detection.

Community
Advanced
Shadojin94Shadojin94

ux-design-system

Codify UI tokens, components, and accessibility patterns for OpenClaw interfaces.

Community
Advanced
jaainiljaainil

color-accessibility

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

Community
Advanced