Contrast Rescue
Make brand colors accessible without a full rebrand
Client brand colors fail WCAG contrast ratios and nobody wants to tell the client their blue is unusable. This recipe takes brand colors and generates accessible alternatives that stay as close to the originals as possible — with a contrast matrix showing every safe pairing.
PROMPT
Create a skill called "Contrast Rescue". When I give you a set of brand colors (hex codes), analyze every foreground/background pairing against WCAG 2.1 AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1, 4.5:1) contrast requirements. For any failing pairing, generate an adjusted color that meets the target ratio while staying as perceptually close to the original as possible (minimize the lightness shift). Output: a full contrast matrix with pass/fail per pairing, the adjusted color hex codes with a visual comparison to originals, specific use-case recommendations (which variant to use for body text, headings, UI elements, decorative use), and the complete color system as CSS custom properties. Let me toggle between AA and AAA targets.
How It Works
Give your Claw the brand colors, and it generates an accessibility-safe
color system. Each color gets adjusted (minimally) to meet WCAG AA or AAA
contrast ratios. You get a complete contrast matrix showing which pairings
work and which don't.
What You Get
- Original brand colors analyzed for WCAG AA (4.5:1) and AAA (7:1) compliance
- Adjusted color variants that meet AA/AAA while staying visually close to the originals
- A contrast matrix: every foreground/background pairing tested and rated
- Specific use-case recommendations: "Use brand-blue-700 for text on white, brand-blue-400 for text on dark backgrounds"
- Side-by-side visual comparison of original vs. adjusted colors
- Output as CSS custom properties or design tokens
Setup Steps
- Provide brand colors as hex codes
- Specify target: WCAG AA (default) or AAA
- Your Claw generates the accessible color system
- Review the adjustments — changes are minimal
- Export as CSS custom properties or your preferred format
Tips
- Most brand colors only need a slight lightness shift to become compliant
- The contrast matrix is great for sharing with clients — it shows the problem visually
- Pair with Token Forge for a complete accessible design token set from scratch
- Gray text on white is the most common violation (81% of websites) — this catches it
- Generate both AA and AAA variants to give yourself flexibility