Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

accessibility-contrast

Sterne3

Forks1

Aktualisiert14. Juni 2026 um 13:42

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.

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

m-binimran

m-binimran/design-pack

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

GrafikdesignerKunst, Design, Unterhaltung, Sport und Medien·SOC 27-1024

SKILL.md

readonly

name	accessibility-contrast
description	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.

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-guard hook 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.

Mehr aus diesem Repository

gleiches Repository

asset-export

m-binimran/design-pack

Produce a clean export/delivery spec - right formats, sizes, densities, naming, color profile, optimization - for a set of assets. Use when delivering assets to a client or developer.

2026-06-143

brand-kit

m-binimran/design-pack

Assemble or audit a brand kit - logo, colors, typography, spacing, usage rules - and pull real brand data via Brand.dev. Use when starting brand work, onboarding a client, or standardizing a brand.

2026-06-143

canva-design

m-binimran/design-pack

Create or edit a branded layout in Canva via the connector - from a brand template, then export. Use for social posts, flyers, decks, and marketing collateral that should stay on-brand and fast.

2026-06-143

design-review

m-binimran/design-pack

Critique a design against craft principles - hierarchy, layout, type, color, spacing, accessibility, brand fit. Use when reviewing a draft, a generated image, or a layout before delivery.

2026-06-143

design-tokens

m-binimran/design-pack

Define or extract a design token system (color, type, spacing, radius, shadow) and output it as JSON/CSS variables. Use when setting up a design system or converting a Figma/brand palette to tokens.

2026-06-143

figma-handoff

m-binimran/design-pack

Pull a Figma design via the Figma connector and produce a developer handoff - tokens, specs, redlines, asset list, and component notes. Use when handing a design to engineering or auditing a Figma file.

2026-06-143

name	accessibility-contrast
description	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.

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-guard hook 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.