manage-color-contrast

Original：🇺🇸 English

Translated

Ensure WCAG AA accessibility and readability

11installs

Sourcegnurio/refactoring-ui-plugin

Added on2026-05-24

NPX Install

npx skill4agent add gnurio/refactoring-ui-plugin manage-color-contrast

SKILL.md Content

View Translation Comparison →

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