📊 WCAG 对比度计算器
WCAG 2.1要求：正文（<18pt）对比度≥4.5:1，大字（≥18pt或≥14pt粗体）≥3:1。AA级=最低要求，AAA级=增强要求（7:1和4.5:1）。
🎮 实时对比度检查
这段文字用来展示前景色和背景色的对比度效果。The quick brown fox jumps over the lazy dog.
计算中...
👁️ 色盲友好的配色方案
全球约8%男性和0.5%女性有某种色觉缺陷。最常见的三种类型：
🔴🟢 红绿色盲（最常见）
Deuteranopia（绿色盲）和Protanopia（红色盲），约占男性8%。不能区分红/绿。
❌ 红绿配色——色盲用户无法区分
🔵🟡 蓝黄色盲
Tritanopia（蓝色盲），约占0.01%。不能区分蓝/黄。
❌ 蓝黄配色——Tritanopia用户无法区分
✅ 安全配色方案
使用亮度和色相双重编码——即使色觉有缺陷，亮度差异也能区分。
✅ Okabe-Ito配色——色盲安全
Okabe-Ito色盲安全配色（2008）：
• #E69F00 (橙) • #56B4E9 (天蓝) • #009E73 (青绿) • #F0E442 (黄)
• #0072B2 (蓝) • #D55E00 (朱红) • #CC79A7 (粉) • #000000 (黑)
这8种颜色在所有色觉缺陷类型下都可区分。学术论文和Data Visualization推荐使用。
• #E69F00 (橙) • #56B4E9 (天蓝) • #009E73 (青绿) • #F0E442 (黄)
• #0072B2 (蓝) • #D55E00 (朱红) • #CC79A7 (粉) • #000000 (黑)
这8种颜色在所有色觉缺陷类型下都可区分。学术论文和Data Visualization推荐使用。
⌨️ 屏幕阅读器与ARIA标签
全球约2.85亿视力障碍者依赖屏幕阅读器（NVDA、JAWS、VoiceOver）。正确的ARIA标签是他们的"高速公路"：
常见ARIA属性：
原则1：优先使用原生HTML语义（<button>, <nav>, <main>）而非ARIA
原则2：ARIA的第一规则是"不要使用ARIA"（如果HTML元素已经提供了语义）
原则3：所有交互元素必须能用键盘操作（Tab/Enter/Escape）
aria-label — 给元素添加不可见的文字标签aria-labelledby — 用另一个元素的ID作为标签aria-describedby — 用另一个元素描述当前元素aria-hidden="true" — 对屏幕阅读器隐藏装饰性元素role="button" — 声明语义角色（当HTML语义不足时）aria-expanded — 折叠/展开状态aria-live="polite" — 动态内容更新时通知屏幕阅读器原则1：优先使用原生HTML语义（<button>, <nav>, <main>）而非ARIA
原则2：ARIA的第一规则是"不要使用ARIA"（如果HTML元素已经提供了语义）
原则3：所有交互元素必须能用键盘操作（Tab/Enter/Escape）
⚖️ 法律要求
🇺🇸 ADA（Americans with Disabilities Act）：1990年生效。网站被视为"公共场所"——必须对残障人士可访问。Target(2006)和Netflix(2012)都因网站不可访问被起诉并和解。
🇪🇺 EAA（European Accessibility Act）：2025年6月生效。所有在欧盟销售的数字产品和服务必须满足无障碍要求。影响：网站、移动应用、电子书、电子商务。
🇨🇳 中国：《无障碍环境建设法》2023年9月1日生效。信息无障碍是重点——政府网站和App必须无障碍。工信部推动互联网应用适老化及无障碍改造。
WCAG 2.1 AA级是国际事实标准——大多数法律要求以此为准。2023年WCAG 2.2发布，新增9项AA级标准。
🇪🇺 EAA（European Accessibility Act）：2025年6月生效。所有在欧盟销售的数字产品和服务必须满足无障碍要求。影响：网站、移动应用、电子书、电子商务。
🇨🇳 中国：《无障碍环境建设法》2023年9月1日生效。信息无障碍是重点——政府网站和App必须无障碍。工信部推动互联网应用适老化及无障碍改造。
WCAG 2.1 AA级是国际事实标准——大多数法律要求以此为准。2023年WCAG 2.2发布，新增9项AA级标准。