如何Check Color Contrast 为 Accessibility
Measure contrast 比率之间 foreground 和背景 colors 为 WCAG 合规.
问题
你需要确保文本是 readable 针对其 背景, meeting WCAG accessibility 标准.
前置条件
- Understanding 的 WCAG
- Knowledge 的颜色 contrast ratios
步骤
-
1. Understand WCAG thresholds
WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (Level AA). Level AAA requires 7:1 for normal text and 4.5:1 for large text. The ratio ranges from 1:1 (no contrast) to 21:1 (black on white).
输入AA: 4.5:1 normal, 3:1 large输出thresholds defined -
2. Compute the contrast ratio
Calculate the relative luminance of each color, then compute the ratio: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter and L2 is the darker luminance. Relative luminance accounts for human perception, weighting green more than red and blue.
输入foreground: #777777, background: #FFFFFF输出ratio: 4.48:1 -
3. Evaluate and adjust
Compare the ratio to the WCAG threshold. If it fails, darken the foreground or lighten the background. Use a contrast checker tool to find compliant color pairs. Document the compliance level (AA or AAA) for your design system.
输入ratio 4.48 < 4.5输出FAIL AA — darken text to #767676
预期结果
contrast 比率测量和 通过/失败 verdict 针对 WCAG thresholds.
常见错误
- Checking only one color pair
- Check all text-background combinations in your design, including hover states, disabled text, and placeholders. Each must meet the threshold.
- Ignoring non-text elements
- WCAG also requires 3:1 contrast for UI components like icons and borders. Check these in addition to text.
排障指引
- If the ratio is close to the threshold, test with actual users or accessibility tools.
- Remember that large text (18pt+ or 14pt+ bold) has a lower threshold (3:1 for AA).
安全限制
- Color contrast is an accessibility requirement, not a security measure. Poor contrast affects usability for all users.