Accessibility contrast
Connector-first Claude Code pack for graphic designers: Figma, Canva, Adobe Firefly, Nano Banana, Higgsfield, Unsplash, Brand.dev + skills, design guardrails (contrast/licensing/asset hygiene), loops & review agents.
npx -y skills add m-binimran/design-pack --skill accessibility-contrastAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Audit a palette or design for WCAG color contrast and legibility, and suggest compliant adjustments. Use when finalizing a palette, design tokens, or any text-over-color/imagery.
SKILL.md
1.2 KB, as published. Nobody here has run it
accessibility-contrast
Make sure text is actually readable - measured, not eyeballed.
Process
- List the text/background pairs: body on bg, headings, buttons, links, text over imagery, states.
- Compute WCAG contrast for each (the
contrast-guardhook checks CSS automatically):- Normal text: >= 4.5:1; large/bold (>= 24px or >= 18.66px bold): >= 3:1; UI/graphics: >= 3:1.
- Fix failures: darken text / lighten background, adjust the token, or add a scrim behind text over images. Keep the brand feel while reaching the ratio.
- Beyond contrast: don't rely on colour alone; check type size/weight legibility; check focus states.
Output
- A table: pair -> measured ratio -> pass/fail -> suggested fix. Confirm fixes still hit the target.
Guardrails
- State measured ratios, not guesses. AA is the floor for client/commercial work.
- A "fix" must actually reach the threshold - re-check after adjusting.