0 min read

Generate Accessible Color System

Designers

Claude Skill

TL;DR:

Color tokens are tedious to set up by hand. Every role needs a family, a step, a dark mode counterpart, and enough contrast to actually pass WCAG, multiplied across every semantic state a system needs. I built this as a Claude skill that sources every value straight from Tailwind, walks through the choices with you, tests contrast for real, and only touches Figma after you've approved what it's about to build.

Why This, Specifically

Picking colors is taste. Making sure error reads as error, success reads as success, and each one still hits 4.5:1 against its background in both light and dark mode is closer to bookkeeping than taste, checking every role against every background, in two modes, by hand, is exactly the kind of repetitive work worth handing off. This skill does that part, so the taste decisions are the only ones left for you.

How It Works

Source of truth: every color name and value comes from Tailwind's official palette, checked against Tailwind's live docs at the start of each run. Nothing invented, nothing from memory.
Structure depth: a 2-tier system (raw palette plus usage tokens) or a 3-tier one (raw palette, a semantic scale, then usage tokens), your call, based on how much re-theming flexibility the project actually needs.
Brand roles: primary, secondary, an optional tertiary, each mapped to whichever Tailwind family fits.
System roles: error, warning, success, information, neutral, always included, picked from a shortlist of families that actually make sense for that role.
Intensity: a starting step per role, lighter, darker, or the sensible default, everything else derives from that.
Figma connection: which integration to use, official Figma MCP or Figma Console MCP / Desktop Bridge, gets asked upfront too.
Contrast: text and icon tokens get tested against real WCAG 2.1 AA thresholds, and if a choice doesn't pass, the skill suggests the nearest step that does.

It generates an HTML preview with every token and its contrast ratio before anything is built in Figma.

The Skill

It runs the full sequence: the setup choices, an HTML preview to review before anything is built, then the Figma build itself, tokens properly bound to each other rather than hardcoded.

When and How To Use It

Works as a standalone build for a new project, or as an addition to a file that already has other tokens in it, a type scale built first, for instance. It won't touch anything that isn't a color token unless you say so.

Any of these will trigger it:

set up a color system for this project

build color tokens from Tailwind

generate a color scale

run the color scale generator

add color tokens to this design system

A Note on What This Skill Can and Cannot Do

It can get things wrong, same as any of these. Worth knowing specifically where contrast is actually enforced: text and icons get a hard pass/fail check, because illegible content is a real problem. Borders only need contrast enforcement in WCAG when they're the sole way a component is identified, not a blanket requirement.
Since that depends on how a token gets used later, this skill shows the ratio as reference rather than gating on it. Check the preview before approving it, and check the built result in Figma after, the same two-checkpoint habit that matters for any of these skills.

This skill is a structured prompt. It instructs Claude to evaluate without softening criticism, but it does not guarantee accuracy. Claude can still miss things, misread context, or produce confident-sounding findings that turn out to be wrong. The output is a starting point for your own judgment, not a substitute for it.
Treat any finding that would drive a real decision as something to verify independently before acting on it.

Get the Skill

The skill is available free on GitHub.

Download from GitHub

Let's Talk