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

Common Failure Modes

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