How WCAG 2.2 Color Contrast Works
Digital accessibility depends fundamentally on sufficient perceptual contrast between text, interface elements, and their background surfaces. The W3C Web Content Accessibility Guidelines (WCAG 2.2) establish clear mathematical criteria to ensure digital interfaces remain completely legible and operable for people with moderately low vision, color vision deficiencies (protanopia, deuteranopia, tritanopia), aging eyes, and under adverse ambient lighting conditions.
The W3C Relative Luminance & Contrast Formula
Contrast in WCAG is calculated using the relative luminance of colors in the standard sRGB color space. The relative luminance (L) of an sRGB color is determined by linearizing each 8-bit color channel (R, G, B) and weighting them according to human spectral eye sensitivity:
Where C_linear = (C / 255 <= 0.04045) ? (C / 255) / 12.92 : ((C / 255 + 0.055) / 1.055)^2.4
The contrast ratio between two colors is then defined as:
Where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. The addition of the 0.05 offset represents ambient flare compensation. This yields a ratio ranging from 1.0:1 (identical colors) up to 21.0:1 (pure black on pure white).
WCAG 2.2 Success Criteria & Thresholds
- Normal Text (WCAG SC 1.4.3 & 1.4.6): Body text, form field labels, and descriptions require at least 4.5:1 for Level AA and 7.0:1 for enhanced Level AAA.
- Large Text (WCAG SC 1.4.3 & 1.4.6): Text that is at least 18pt (24px) regular weight or 14pt (18.66px) bold requires at least 3.0:1 for Level AA and 4.5:1 for Level AAA.
- Graphical Objects & User Interface Components (WCAG SC 1.4.11): Visual information required to identify user interface components (such as form field borders, button outlines, and active state indicators) and graphical objects (such as standalone icons and chart elements) requires at least 3.0:1. Note that the W3C specification defines non-text contrast at Level AA only, without an AAA requirement.
Smart In-Gamut Color Remediation
When a selected color pairing fails your target contrast ratio, our remediation optimizer allows you to hold either the foreground or background color fixed. The engine searches candidate colors along the sRGB lightness dimension to find the exact counterpart that satisfies the selected target ratio (3.0:1, 4.5:1, or 7.0:1) while strictly minimizing the Euclidean color distance (ΔE) to your original design.
Frequently Asked Questions
- WCAG 2.2 对比度比例是如何计算的？
- 依据 W3C 国际标准公式 (L1 + 0.05) / (L2 + 0.05) 测定，其中 L1 为浅色在 sRGB 色域中的相对亮度，L2 为深色相对亮度。数值范围介于 1:1（完全同色）到 21:1（纯黑对纯白）之间。
- WCAG AA 级与 AAA 级标准有什么区别？
- Level AA 是全球无障碍法规（如 ADA、Section 508、中国信息无障碍标准）强制要求的通用基准。Level AAA 为深度弱视群体提供更严格的视觉保障（常规文本需达到 7.0:1）。
- WCAG 2.2 针对非文本 UI 界面元素是否设立了 AAA 级？
- 没有。成功准则 1.4.11（非文本对比度）仅在 AA 级别制定了 >= 3.0:1 的硬性要求。W3C 规范并未对非文本图形设立 AAA 级标准。
- 智能修正算法是如何寻找推荐配色的？
- 算法固定您指定的基准锚点色，在 sRGB 空间中搜索满足目标对比度（3.0:1、4.5:1 或 7.0:1）的候选颜色，并通过欧几里得色差公式（ΔE）最小化与原始设计的视觉偏差。