无障碍色彩对比度检测器 (WCAG Contrast Studio)
依据 W3C WCAG 2.1 标准与相对明度算法，精准检测文本与界面的无障碍对比度等级，支持色盲模拟、一键智能调色修复与高质感配色方案库。
// 颜色配置 (Color Inputs)
⇄ 互换前景/背景色
前景色 (Text / Icon Color)
明度 L: {{ textLuminance.toFixed(3) }}
{{ getRgbString(textColor) }}
背景色 (Background Color)
明度 L: {{ bgLuminance.toFixed(3) }}
{{ getRgbString(bgColor) }}
⚡ 智能修复建议 (Auto Fix)
{{ smartFixTargetRatio }}:1
当前对比度不达标。已自动沿当前色相计算出最佳达标色： {{ smartFixColor }}
// 推荐高质感无障碍配色库
// WCAG 2.1 对比度比率
{{ contrastRatio.toFixed(2) }} : 1
{{ getVerdictHeadline() }}
无障碍评级等级:
{{ getOverallBadge() }}
1:1
3.0 (UI/大字)
4.5 (AA)
7.0 (AAA)
21:1
常规文本 (正文)
< 18pt
Level AA (4.5:1)
{{ contrastRatio >= 4.5 ? '✓ PASS' : '✕ FAIL' }}
Level AAA (7.0:1)
{{ contrastRatio >= 7.0 ? '✓ PASS' : '✕ FAIL' }}
大号文本 (标题)
≥ 18pt / 14pt粗体
Level AA (3.0:1)
{{ contrastRatio >= 3.0 ? '✓ PASS' : '✕ FAIL' }}
Level AAA (4.5:1)
{{ contrastRatio >= 4.5 ? '✓ PASS' : '✕ FAIL' }}
UI 控件与图形
按钮/边框/图标
Level AA (3.0:1)
{{ contrastRatio >= 3.0 ? '✓ PASS' : '✕ FAIL' }}
组件边界感知
{{ contrastRatio >= 3.0 ? '✓ PASS' : '✕ FAIL' }}
// 实时界面排版效果 (Live UI Preview)
色盲模拟:
Design System Pro
v2.5
Accessible Contrast Mode
探索清晰、无障碍与包容性的前端界面
优秀的对比度不仅关乎视觉审美，更是保障视力障碍人群、强光环境下移动端用户顺畅获取内容的关键。本段落展示在当前选定色彩下的常规阅读体验。
内联链接 (Anchor Link)
📐 WCAG 2.1 相对明度 (Relative Luminance)
定义于 CIE 空间，将 sRGB 各通道非线性伽马反解为线性光强后加权计算：$L = 0.2126R + 0.7152G + 0.0722B$，纯黑为 0，纯白为 1。
🎯 为什么需要 AA 与 AAA 评级？
4.5:1 对比度可确保即使视力为 20/40（常见中老年人退化或轻微散光）的人群也能轻松分辨文本，避免视觉疲劳与信息错漏。
🛠️ 智能修复算法原理
保持色彩的原生色相（Hue）与饱和度（Saturation），在感知均匀明度轴上微调至满足目标阈值，最大限度忠实还原原始设计意图。