← ClaudeAtlas

color-accessibilitylisted

Trigger on: check contrast, WCAG contrast, accessible colors, readable text color, fix low-contrast, dimmed text color, palette accessibility, pastel color, textcolor for background, make this color readable, UI theme contrast, Neovim highlight contrast. Evaluate, fix, and generate accessible fg/bg pairs with the pastel CLI and color-accessibility/main.py (WCAG AA/AAA). Use whenever the user changes colors for UI, CSS, terminal, or editor themes — do not guess contrast; measure it.
tkolleh/skills · ★ 1 · Web & Frontend · score 78
Install: claude install-skill tkolleh/skills
# Color Accessibility Prove every fg/bg pair with math before shipping colors. pastel has **no** contrast subcommand — use main.py in this skill directory for ratios; use pastel for manipulation (textcolor, mix, darken, lighten, format). ## When to use / not use - **Use:** contrast checks, picking text on a fill, fixing failing pairs, dimmed/inactive text, theme palette audit. - **Do not use:** brand-only palette vibes with no readability ask; full diagram authoring (use diagram — it has its own contrast step). Work phases **in order**. Do not skip. Do not invent ratios from memory. ## Prerequisites ```bash pastel --version # required on PATH python3 color-accessibility/main.py --help ``` If pastel is missing: tell the user to install (brew install pastel or cargo install pastel) and STOP. Resolve main.py relative to this skill directory (or the path you loaded the skill from). ## Thresholds (default) | Role | Min ratio | Notes | |------|-----------|--------| | Normal text / UI labels | **4.5:1** (AA) | Prefer **7:1** (AAA) when easy | | Large text (>=18pt / 14pt bold) | **3:1** (AA) | Pass --large-text | | Dimmed / inactive | Still >= **3:1** vs bg; **strictly below** active text ratio | Hierarchy without illegibility | Deeper WCAG notes: load references/wcag.md only if large-text, non-text UI, or AAA is disputed. ## Phase 1 — Capture pairs 1. List every fg/bg (or fill/font-color) pair the user cares about as hex or named colors. 2. Completion: each pair