Back to Details

manage-color-contrast

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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
  • 文本颜色与字号
  • 背景颜色
  • UI元素规格说明

Output

输出

  • Contrast ratio calculations
  • Pass/Fail against WCAG standards
  • Recommendations for fixes
  • 对比度比值计算结果
  • 是否符合WCAG标准的判定（通过/不通过）
  • 修复建议

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).
计算对比度比值，确保符合WCAG AA标准（普通文本要求4.5:1，大文本和UI组件要求3:1）。

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
  • 普通文本（< 18px）：最低4.5:1（WCAG AA标准）
  • 大文本（≥ 18px粗体或≥ 24px）：最低3:1
  • UI组件（按钮、输入框）：边界最低3:1
  • 焦点指示器：与相邻颜色的对比度最低3:1

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
  • 白色背景上的浅灰色文本（< 4.5:1）
  • 浅色背景上的白色文本
  • 禁用状态与激活状态过于相似（对比度过高）
  • 占位符文本与输入文本颜色一致

Contrast Ratio Quick Reference

对比度比值速查表

Text Color on WhiteRatioPass AA?
#000000 (black)21:1✓
#33333312.6:1✓
#6666665.9:1✓
#7575754.6:1✓ (minimum)
#9999992.8:1✗
#CCCCCC1.6:1✗
白色背景上的文本颜色比值是否通过AA标准？
#000000（黑色）21:1✓
#33333312.6:1✓
#6666665.9:1✓
#7575754.6:1✓（最低标准）
#9999992.8:1✗
#CCCCCC1.6:1✗

Common Failure Modes

常见失败模式

FailureDescriptionFix
Light Gray Text#999 or lighter for body textUse #666 minimum, #333 preferred
Ghost TextPlaceholder same as valueMake placeholder lighter (#999)
Low-contrast PrimaryBrand color too light for white textDarken brand color or use dark text
Subtle LinksLinks barely different from textAdd underline or increase contrast
Disabled ConfusionDisabled buttons too prominentReduce to 30% opacity or use gray
Icon FadeIcons too light to seeMatch text color or use higher contrast
失败类型描述修复方案
浅灰色文本正文使用#999或更浅的颜色至少使用#666，优先选择#333
幽灵文本占位符与输入值颜色一致将占位符调浅（使用#999）
主色对比度不足品牌色过浅，不适用于白色文本加深品牌色或使用深色文本
链接辨识度低链接与文本几乎无差异添加下划线或提高对比度
禁用状态混淆禁用按钮过于醒目将透明度降至30%或使用灰色
图标暗淡图标过浅难以辨认匹配文本颜色或提高对比度

Prerequisites

前置条件

  • Color palette defined
  • Typography scale defined
  • 已定义配色方案
  • 已定义排版层级

Dependencies

依赖项

  • build-color-palette
    (gray scale needed)
  • build-color-palette
    （需要灰度色阶）

Refactoring UI References

重构UI参考

  • "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
输入： 白色背景上的正文文本#888888
评估结果： 不通过
  • 比值：约3.5:1
  • 低于4.5:1的要求
建议： 至少改为#666666（比值5.9:1） 正文文本优先选择#333333或#1A1A1A