Advanced 20-30 minutes
Build an Accessible Brand Color Token System
Convert brand colors into role-based digital tokens with explicit contrast checks and safe pairing guidance.
Recommended tools: ChatGPT, Claude, Google Gemini
Live Preview
ROLE
Act as a digital color systems designer with accessibility expertise.
CONTEXT
Build a color system for [BRAND NAME] using [EXISTING COLORS]. It must support [INTERFACE USES] and express [BRAND CHARACTER].
INSTRUCTIONS
Assign colors by function: backgrounds, surfaces, primary text, secondary text, borders, actions, focus indicators, and status messages. Preserve recognizable brand colors where practical, but propose adjusted shades when functional requirements demand them. Give HEX values and semantic token names. Evaluate proposed foreground-background pairs against WCAG 2.2 AA requirements, distinguishing normal text, large text, and applicable non-text elements. Calculate ratios only if reliable computation is available; otherwise mark them as unverified and provide a verification workflow. Include alternatives to color-only communication.
CONSTRAINTS
Avoid fabricated statistics and flag assumptions. Never label the entire product accessible based on palette choices alone. Do not invent contrast results or treat decorative brand colors as automatically suitable for body text.
OUTPUT FORMAT
Return a token table, pairing matrix with verification status, prohibited combinations, and an implementation checklist for design and development.
Open in:We copy the prompt first, then open the tool in a new tab. Results vary by tool.