siluatsiluat/skills/skills/color-contrast/SKILL.md

color-contrast

Skill0 starsChanged 8 months agoMITView on GitHub

WCAG 2.1 color contrast checking and accessible color suggestion via the `ccr` CLI. Use this skill whenever the user mentions color contrast, accessibility of colors, WCAG compliance, contrast ratio, readability of color combinations, foreground/background color pairing, design system color audit, a11y colors, or asks if specific colors "work together" or are "readable". Also trigger when reviewing CSS/design tokens for accessibility, suggesting accessible alternative colors, or setting up CI contrast validation.

Installs packages

4 other projects use a version of this.

Adopted by

Most recently taken up by

jholhewres/devclaw-skillstheir own version, first seen Oct 9, 2026
mgifford/accessibility-skillstheir own version, first seen Jul 27, 2026
miovrag/claude-skillstheir own version, first seen Jun 12, 2026
dylantarre/design-system-skillstheir own version, first seen Dec 30, 2025

Other versions4 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 4
dylantarre/design-system-skills★ 50same name
mgifford/accessibility-skills★ 48same name
jholhewres/devclaw-skills★ 4same name
miovrag/claude-skills★ 1same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repositoryOne other file it gives its agents.
- mobile-reviewSkill

The file

We split this skill into the rules it gives an agent

5 rules. 0 are common, 0 are distinctive, and 5 are very specific to this project.

0
Common
Most of the 4 edited versions we read keep these.
0
Distinctive
This author's own choices. Worth a look.
5
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Very specific:
Shell quoting: Always single-quote color arguments.
line 79
Very specific:
If ccr is not available, use npx @siluat/color-contrast-cli as a drop-in replacement.
line 98
Very specific:
Run ccr '<fg>' '<bg>' --json and parse the JSON output to determine compliance.
line 108
Very specific:
Use ccr '<fg>' '<bg>' --suggest --level AA --json to get the closest accessible foreground color.
line 111
Very specific:
Use ccr '<fg>' '<bg>' --level AA and check the exit code.
line 117

“Common” is measured: kept by at least 6 in 10 of the 4 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

Color Contrast Skill

WCAG 2.1 color contrast checking via the ccr CLI, powered by @siluat/color-contrast.

Prerequisites

# Run without installing
npx @siluat/color-contrast-cli '<foreground>' '<background>'

# Or install globally for the short `ccr` command
npm install -g @siluat/color-contrast-cli

WCAG 2.1 Contrast Thresholds

Level	Normal text (< 18pt)	Large text (>= 18pt or >= 14pt bold)
AAA	>= 7:1	>= 4.5:1
AA	>= 4.5:1	>= 3:1

Large text = 18pt (24px) or above, or 14pt (18.67px) bold or above.

Decision Tree

What do you need?
├─ Check a single color pair         → Quick Commands below
├─ Check with CI exit codes          → Quick Commands: --level flag
├─ Suggest accessible alternative    → Quick Commands: --suggest flag
├─ Audit multiple color pairs        → references/design-system-audit.md
├─ Understand WCAG criteria in depth → references/wcag-criteria.md
└─ Full CLI reference (all flags)    → references/cli-usage.md

Quick Commands

# Basic contrast check
ccr '#333' '#fff'

# JSON output (for programmatic parsing)
ccr '#333' '#fff' --json

# CI pass/fail check (exit 0=pass, 1=fail)
ccr '#333' '#fff' --level AA
ccr '#333' '#fff' --level AAA

# Large text threshold
ccr '#777' '#fff' --level AA --size large

# Suggest accessible alternative for failing pair
ccr '#777' '#fff' --suggest --level AA

# Suggest with JSON output
ccr '#777' '#fff' --suggest --level AA --json

Supported Color Formats

HEX (#rgb, #rrggbb, #rgba, #rrggbbaa), CSS named colors (148 colors), rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch().

Shell quoting: Always single-quote color arguments. # is treated as a comment in some shells, and parentheses need quoting:

ccr '#333' '#fff'
ccr 'rgb(0, 0, 0)' 'hsl(0 0% 100%)'

Exit Codes

Code	Meaning
0	Success, or `--level` check passed
1	`--level` check failed
2	Error (invalid color, missing arguments)

Without --level, the CLI always exits 0 (just prints results).

CLI Availability

If ccr is not available, use npx @siluat/color-contrast-cli as a drop-in replacement. All examples below use ccr for brevity — substitute npx @siluat/color-contrast-cli if not installed globally.

# Check before running
command -v ccr >/dev/null 2>&1 || alias ccr='npx @siluat/color-contrast-cli'

Common Patterns for Agents

When you encounter color values in code: Run ccr '<fg>' '<bg>' --json and parse the JSON output to determine compliance.

When a contrast check fails: Use ccr '<fg>' '<bg>' --suggest --level AA --json to get the closest accessible foreground color. The suggestion preserves hue and saturation by adjusting only lightness.

When reviewing CSS or design tokens: Collect foreground/background pairs into a text file and pipe to ccr --batch. See references/design-system-audit.md for the full workflow.

When integrating into CI: Use ccr '<fg>' '<bg>' --level AA and check the exit code. Combine with --json for structured output alongside the exit code.

Reference Index

File	Purpose
references/wcag-criteria.md	WCAG 2.1 success criteria 1.4.3, 1.4.6, 1.4.11 — edge cases, non-text contrast
references/cli-usage.md	Complete CLI reference: all flags, output formats, batch mode, verbose mode
references/design-system-audit.md	Step-by-step workflow for auditing design system color palettes

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free