How do I install the Manage Color Contrast skill?

Run npx skillmds@latest add gnurio/manage-color-contrast in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Manage Color Contrast skill do?

Ensure WCAG AA accessibility and readability It is listed under Web & Frontend on SkillMD.

Is Manage Color Contrast safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Manage Color Contrast?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Manage Color Contrast free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Manage Color Contrast?

gnurio (@gnurio) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Manage Color Contrast by gnurio — Agent Skill

Name: Manage Color Contrast
Author: gnurio

File contents

Skill: Manage Color Contrast

Purpose

Ensure text and interactive elements have sufficient contrast against their backgrounds for readability and accessibility.

Type

Evaluative + Corrective

Input

Text colors and sizes
Background colors
UI element specifications

Output

Contrast ratio calculations
Pass/Fail against WCAG standards
Recommendations for fixes

Transformation Performed

Calculates contrast ratios and ensures compliance with WCAG AA standards (4.5:1 for normal text, 3:1 for large text and UI components).

Decision Criteria

PASS (Good Contrast)

Normal text (< 18px): 4.5:1 minimum (WCAG AA)
Large text (≥ 18px bold or ≥ 24px): 3:1 minimum
UI components (buttons, inputs): 3:1 minimum for boundaries
Focus indicators: 3:1 minimum against adjacent colors

FAIL (Poor Contrast)

Light gray text on white (< 4.5:1)
White text on light colors
Disabled states that look like active (too much contrast)
Placeholder text same as input text

Contrast Ratio Quick Reference

Text Color on White	Ratio	Pass AA?
#000000 (black)	21:1	✓
#333333	12.6:1	✓
#666666	5.9:1	✓
#757575	4.6:1	✓ (minimum)
#999999	2.8:1	✗
#CCCCCC	1.6:1	✗

Common Failure Modes

Failure	Description	Fix
Light Gray Text	#999 or lighter for body text	Use #666 minimum, #333 preferred
Ghost Text	Placeholder same as value	Make placeholder lighter (#999)
Low-contrast Primary	Brand color too light for white text	Darken brand color or use dark text
Subtle Links	Links barely different from text	Add underline or increase contrast
Disabled Confusion	Disabled buttons too prominent	Reduce to 30% opacity or use gray
Icon Fade	Icons too light to see	Match text color or use higher contrast

Prerequisites

Color palette defined
Typography scale defined

Dependencies

build-color-palette (gray scale needed)

Refactoring UI References

"Don't use grey text on colored backgrounds"
"Ensure sufficient contrast"

Example Assessment

Input: Body text #888888 on white background

Evaluation: FAIL

Ratio: ~3.5:1
Below 4.5:1 requirement

Recommendation: Change to #666666 (5.9:1) minimum Prefer #333333 or #1A1A1A for body text

---name: manage-color-contrastdescription: Ensure WCAG AA accessibility and readability---# Skill: Manage Color Contrast## PurposeEnsure text and interactive elements have sufficient contrast against their backgrounds for readability and accessibility.## TypeEvaluative + Corrective## Input- Text colors and sizes- Background colors- UI element specifications## Output- Contrast ratio calculations- Pass/Fail against WCAG standards- Recommendations for fixes## Transformation PerformedCalculates contrast ratios and ensures compliance with WCAG AA standards (4.5:1 for normal text, 3:1 for large text and UI components).## Decision Criteria### PASS (Good Contrast)- **Normal text (< 18px)**: 4.5:1 minimum (WCAG AA)- **Large text (≥ 18px bold or ≥ 24px)**: 3:1 minimum- **UI components (buttons, inputs)**: 3:1 minimum for boundaries- **Focus indicators**: 3:1 minimum against adjacent colors### FAIL (Poor Contrast)- Light gray text on white (< 4.5:1)- White text on light colors- Disabled states that look like active (too much contrast)- Placeholder text same as input text## Contrast Ratio Quick Reference| Text Color on White | Ratio | Pass AA? ||---------------------|-------|----------|| #000000 (black) | 21:1 | ✓ || #333333 | 12.6:1 | ✓ || #666666 | 5.9:1 | ✓ || #757575 | 4.6:1 | ✓ (minimum) || #999999 | 2.8:1 | ✗ || #CCCCCC | 1.6:1 | ✗ |## Common Failure Modes| Failure | Description | Fix ||---------|-------------|-----|| **Light Gray Text** | #999 or lighter for body text | Use #666 minimum, #333 preferred || **Ghost Text** | Placeholder same as value | Make placeholder lighter (#999) || **Low-contrast Primary** | Brand color too light for white text | Darken brand color or use dark text || **Subtle Links** | Links barely different from text | Add underline or increase contrast || **Disabled Confusion** | Disabled buttons too prominent | Reduce to 30% opacity or use gray || **Icon Fade** | Icons too light to see | Match text color or use higher contrast |## Prerequisites- Color palette defined- Typography scale defined## Dependencies- `build-color-palette` (gray scale needed)## Refactoring UI References- "Don't use grey text on colored backgrounds"- "Ensure sufficient contrast"## Example Assessment**Input:** Body text #888888 on white background**Evaluation:** FAIL- Ratio: ~3.5:1- Below 4.5:1 requirement**Recommendation:**Change to #666666 (5.9:1) minimumPrefer #333333 or #1A1A1A for body text

Frequently asked questions

Manage Color Contrast