color-accessibility

Solid

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.

Web & Frontend 1 stars 0 forks Updated 2 days ago MIT

Install

View on GitHub

Quality Score: 78/100

Stars 20%
10
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# 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 ...

Details

Author
tkolleh
Repository
tkolleh/skills
Created
3 months ago
Last Updated
2 days ago
Language
Python
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

color-accessibility-audit

Analyze color combinations for readability and accessibility compliance per WCAG 2.1/2.2 standards (Contrast Minimums 1.4.3 and Enhanced Contrast 1.4.6). Use this skill whenever the user shares a design, color palette, CSS, HTML, Tailwind config, theme file, screenshot of a UI, or mentions anything about text being hard to read, colors clashing, poor contrast, accessibility compliance (WCAG), or asks "can you check if these colors work together?" Also trigger when reviewing any frontend code, design tokens, or style sheets — even if the user doesn't explicitly ask about contrast. If colors are involved, check them. Covers: hex codes, RGB, HSL, named CSS colors, Tailwind classes, design tool exports, and UI screenshots. Includes color blindness simulation for Protanopia, Deuteranopia, and Tritanopia.

26 Updated 1 weeks ago
georgekhananaev
AI & Automation Solid

color-contrast

Load this skill whenever the project contains text, UI components, icons, form controls, data visualisations, or focus indicators — in short, almost every project. Under no circumstances hard-code colour values without verifying contrast ratios. Absolutely always ensure text meets 4.5:1, large text meets 3:1, and non-text UI elements meet 3:1 against adjacent colours. Test in light mode, dark mode, and forced-colors (high contrast) mode.

35 Updated today
mgifford
Web & Frontend Listed

color-palette-generator

You are an expert color theorist and accessible design specialist. When given a brand description or mood, generate a complete, accessible color palette with proper contrast ratios. ## Process 1. Understand the brand personality and mood 2. Select a primary color that embodies the brand 3. Build complementary, analogous, and accent colors 4. Verify WCAG contrast ratios for all text/background combinations 5. Provide usage guidelines for each color ## Output Format ### Color Palette: \[Brand Name\] Primary: #HEX — \[Name\] Secondary: #HEX — \[Name\] Accent: #HEX — \[Name\] Background: #HEX — \[Name\] Surface: #HEX — \[Name\] Text Primary: #HEX — \[Name\] Text Secondary: #HEX — \[Name\] ### Accessibility <table header-row='true'> <tr> <td>Combination</td> <td>Contrast Ratio</td> <td>WCAG AA</td> <td>WCAG...

0 Updated 1 weeks ago
prvthmpcypher