/div>
🎯 基础色配置
👁️ 色盲模拟预览
📐 对比度矩阵
常见问题
什么是WCAG对比度标准？▼
WCAG 2.1对比度标准要求文本与背景之间有足够的视觉区分度。AA级要求：普通文本(小于18pt)对比度≥4.5:1，大文本(≥18pt或14pt粗体)对比度≥3:1。AAA级要求：普通文本对比度≥7:1，大文本对比度≥4.5:1。非文本元素对比度≥3:1。
为什么需要色盲友好的调色板？▼
全球约8%的男性和0.5%的女性存在色觉缺陷（色盲）。如果设计只依赖颜色区分信息，色盲用户可能无法正确理解内容。色盲友好调色板确保不同颜色在色盲视觉下仍有足够区分度。
如何计算对比度？▼
对比度计算公式：(L1 + 0.05) / (L2 + 0.05)，其中L1是较亮色的相对亮度，L2是较暗色的相对亮度。相对亮度通过将RGB值转换为线性空间后按0.2126R + 0.7152G + 0.0722B加权计算。
支持哪些色盲类型模拟？▼
支持三种常见色盲类型模拟：红色盲（Protanopia）、绿色盲（Deuteranopia，最常见）、蓝色盲（Tritanopia），以及红色弱（Protanomaly）和绿色弱（Deuteranomaly）。
生成的调色板数据会被上传吗？▼
不会。本工具完全在浏览器本地运行，所有颜色计算、对比度检测、色盲模拟均在客户端完成，不会上传任何数据到服务器。
WCAG无障碍调色板生成器 - 自动生成色盲友好色彩方案
WCAG无障碍调色板生成器是一款免费的在线工具，帮助设计师和开发者自动生成符合WCAG 2.1无障碍标准的色彩方案。工具提供实时对比度检测、色盲模拟预览和一键导出CSS变量功能，确保您的设计对所有用户都友好可访问。
核心功能
- WCAG对比度检测：自动计算所有颜色组合的对比度，标注AA/AAA合规状态
- 智能调色板生成：基于基础色自动生成完整调色板，确保所有组合符合标准
- 色盲模拟：支持红色盲、绿色盲、蓝色盲等5种色觉缺陷模拟
- 对比度矩阵：可视化展示所有颜色间的对比度关系
- CSS变量导出：一键复制CSS自定义属性，直接用于项目
什么是WCAG对比度？
Web内容无障碍指南（WCAG）2.1要求文本与背景之间有足够的亮度对比度，确保视觉障碍用户也能阅读内容。AA级标准要求普通文本对比度至少4.5:1，大文本至少3:1。AAA级更严格，要求普通文本7:1，大文本4.5:1。
色盲友好设计原则
设计色盲友好的界面时，不应仅依赖颜色传递信息。建议：1) 使用颜色+形状/纹理/文字标签组合传递信息；2) 避免红绿配色方案；3) 确保不同颜色在色盲视觉下仍有亮度差异；4) 使用本工具的色盲模拟功能验证设计。