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