Color Expert Skill
Over 100 markdown reference files covering color science and visual hierarchy.
by AgentVoltv1.0.0Published 1y ago1 install
Free to sign up · every skill included with AgentVolt Pro
Before & after
Same prompt, same agent — the only difference is the skill.
Prompt“What color palette should we use for our app so it passes accessibility standards?”
Beforegeneric AI agent
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?
Afterwith Color Expert Skill
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
name: color-expert-skill description: Use when Over 100 markdown reference files covering color science and visual hierarchy.
Color Expert Skill
Prevents Claude from defaulting to generic color schemes by providing deep color science references covering WCAG accessibility, palettes, and visual hierarchy grounded in real design resources.
What you get
- SKILL.md plus 100 plus markdown color reference files.
Customize your output
- Adaptable to any brand palette or accessibility target.
Example output
Balanced, accessible color palettes with proper contrast.
Best for
Designers and developers wanting non-generic color choices from Claude.
SKILL.md preview
SKILL.md
---
name: color-expert-skill
description: Use this skill when a design needs a grounded color palette or visual-hierarchy decision instead of a generic default scheme.
version: 1.0.0
category: Design / Design and Frontend
author: AgentVolt
license: proprietary
tags:
- design
- design-and-frontend
- standard
---
# Color Expert Skill
Grounds color and visual-hierarchy decisions in real color-science references — contrast ratios, palette theory, accessibility — instead of defaulting to whatever gradient or scheme looks familiar.
## When to use
… (sign up to view the full skill)Sign up to view, copy, and install the full skill
More design skills
View all Design skills →Frontend UI UX Skill (oh-my-opencode)
A frontend UI and UX focused skill from the oh-my-opencode toolkit.
Design
Mobile App UI Design Skill
Guides Claude in designing native feeling mobile app interfaces.
Design
Premium Frontend UI Skill
Pushes generated frontend UI toward a premium, polished visual style.
Design
Material 3 Skill
Teaches Claude Google Material 3 design system conventions.
Design