# Manage Color Contrast

> Ensure WCAG AA accessibility and readability

- Skill: `gnurio/manage-color-contrast` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gnurio/manage-color-contrast`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gnurio/manage-color-contrast/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: gnurio (https://skillmd.com/u/gnurio)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/gnurio/manage-color-contrast

---


# 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