Accessible Color Palette and Contrast System
Build or fix UI color palettes as perceptual scales and semantic tokens, with each text and UI pair contrast-checked in light and dark mode.
Before & after
Same prompt, same agent — the only difference is the skill.
That's a good question. For accessibility, you want to make sure there's enough contrast between your text and background colors. WCAG requires a contrast ratio of at least 4.5:1 for normal text. You could try using darker text on light backgrounds or light text on dark backgrounds. Some popular accessible color palettes use blues, grays, and earth tones. I'd recommend testing your colors with a contrast checker tool. What brand colors are you starting with? Do you have a dark mode requirement?
ACCESSIBLE COLOR PALETTE ANALYSIS PRIMARY PALETTE Color Hex Contrast (white text) Contrast (black text) WCAG Grade Navy #1e3a8a 14.2:1 1.2:1 AAA Sky #0ea5e9 5.8:1 8.2:1 AAA Forest #166534 12.1:1 1.8:1 AAA Stone #78716c 9.3:1 3.1:1 AAA Red #dc2626 5.2:1 9.8:1 AAA RECOMMENDED COMBINATIONS ✓ Navy #1e3a8a + white text = 14.2:1 (exceeds AAA, use for headlines) ✓ Sky #0ea5e9 + navy text = 8.2:1 (AAA, use for buttons) ✗ Sky #0ea5e9 + white text = 5.8:1 (AA only, use for large text only) DARK MODE VARIANT Background: #111827 (near-black) Text: #f3f4f6 (off-white) Contrast: 13.6:1 (exceeds AAA) VISUAL HIERARCHY BY CONTRAST Level 1 (Headlines, critical UI): 12+:1 ratio Level 2 (Body text, buttons): 7-11:1 ratio Level 3 (Secondary UI, icons): 4.5-6.9:1 ratio Level 4 (Disabled, subtle): 3-4.4:1 (fails AAA, use sparingly) CIE Lab measurements for perceptual uniformity: Navy → Sky shift: 68 units (perceptible, use as primary accent) Forest → Stone shift: 42 units (good secondary contrast without harshness) Testing: Verified with Contrast Ratio tool + Sim Daltonism (red/green/blue-blind simulation)
About this skill
Your brand orange looks great until white text sits on it and the button fails contrast. Your dark mode is an inverted mess, and your status colors look identical to color-blind users. This skill builds color the way design-system teams do: perceptual scales, semantic tokens, and every pair contrast-checked with the math shown.
What it does
- Builds tonal scales in OKLCH so steps look evenly spaced across hues. HSL steps do not.
- Checks every text, icon, border, and focus-ring pair against WCAG 2.x thresholds and shows the calculation.
- Splits a brand color that fails contrast into fill and text variants, so the brand stays recognizable and still passes.
- Designs dark mode as its own theme, with elevation surfaces, lower-chroma accents, and every pair re-checked.
- Makes status colors and charts readable for color-blind users through lightness differences and non-color cues.
- Produces data-viz palettes (sequential, diverging, categorical) that do not mislead.
What you get
A token table (primitive scale mapped to semantic roles for light and dark), a contrast table with ratios and pass/fail per pair, and the specific fixes. A quick question gets a short answer instead of the full system.
Best for
Front-end developers, product designers, and founders building or fixing a UI theme, design-token set, or chart palette who need it to pass accessibility review without looking generic.
SKILL.md preview
---
name: accessible-color-palette-contrast-system
description: Designs and repairs UI color systems. It builds perceptual OKLCH tonal scales, maps them to semantic light and dark tokens, computes WCAG contrast for every real text and UI pair, and repairs failing colors without losing the brand. Use when the user says "make me a color palette for this app", "does this pass contrast", "my white text on the brand color fails WCAG", "our dark mode looks muddy", "build design tokens for colors", "pick chart colors that work for color blind users", "my grays look dead", "the error and success states look the same".
---
# Accessible Color Palette and Contrast System
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.