色彩无障碍与调色板工作室
从颜色或图片创建调色板，验证 WCAG 2.2 对比度，生成修复建议，模拟色觉障碍，并直接导出为 CSS、Tailwind 与 JSON。
- 严格依据 WCAG 2.2 相对亮度算法进行 AA、AAA 及非文本对比度验证
- 基于 OKLCH 色彩空间的最小距离自动色彩修正算法
- 纯浏览器端 Median Cut 图像色彩提取，图片绝不上演至服务器
- 红绿色盲、蓝黄色盲及全色盲模拟与实际 UI 组件预览
- 多格式代码导出：CSS 变量、SCSS、Tailwind CSS、Design Tokens JSON 与 SVG/PNG
Start From
Color Inspector
输入基础颜色（HEX、RGB、HSL、OKLCH）
#4F46E5
rgb(79, 70, 229)
hsl(243, 75%, 59%)
hsv(243, 69%, 90%)
oklch(0.5106 0.2301 277)
调色板列表
8 colorsPrimary Indigo
Sky Blue
Amber Accent
Text Gray 900
Muted Gray 500
White Background
Surface Gray 100
Border Gray 200
WCAG 2.2 对比度验证
WCAG 2.2 Success Criterion 1.4.3 (Contrast Minimum) & 1.4.6 (Enhanced)
Passes WCAG AA for normal & large text
Large Headline (18pt Bold / 24px)
This is regular body text preview (16px / 1rem). Ensure high readability for all users, including those with low vision or varying environmental light conditions.
无障碍修正建议（OKLCH 最小变更）
Perceptually uniform OKLCH binary search for minimal color distortion (lowest ΔE)
Preview Text
Contrast: 18.63:1
Palette Contrast Matrix
Cross-audit all foreground and background combinations across your palette. Click any cell to test.
| FG ↓ \ BG → | 4F46E5 | 0EA5E9 | F59E0B | 111827 | 6B7280 | FFFFFF | F3F4F6 | E5E7EB |
|---|---|---|---|---|---|---|---|---|
#4F46E5 | — | 2.27 | 2.93 | 2.82 | 1.3 | 6.29 | 5.71 | 5.08 |
#0EA5E9 | 2.27 | — | 1.29 | 6.4 | 1.74 | 2.77 | 2.52 | 2.24 |
#F59E0B | 2.93 | 1.29 | — | 8.26 | 2.25 | 2.15 | 1.95 | 1.73 |
#111827 | 2.82 | 6.4 | 8.26 | — | 3.67 | 17.74 | 16.12 | 14.33 |
#6B7280 | 1.3 | 1.74 | 2.25 | 3.67 | — | 4.83 | 4.39 | 3.9 |
#FFFFFF | 6.29 | 2.77 | 2.15 | 17.74 | 4.83 | — | 1.1 | 1.24 |
#F3F4F6 | 5.71 | 2.52 | 1.95 | 16.12 | 4.39 | 1.1 | — | 1.13 |
#E5E7EB | 5.08 | 2.24 | 1.73 | 14.33 | 3.9 | 1.24 | 1.13 | — |
真实组件预览
Test theme colors in realistic UI layouts with WCAG SC 1.4.1 compliance
Analytics Overview
Updated 5 minutes ago
Total Users
24,592
Conversion Rate
3.48%
Error Incidents
2
色觉障碍模拟
Test how color vision deficiency affects your palette and chart readability
Deuteranopia (Green-blind)
Medium-wavelength (M) cone absence; difficulties distinguishing red and green.
※ 基于数学模型的近似模拟，个体实际视觉体验可能存在差异。
Palette Simulation
#4C4CC6
orig: #4F46E5
#6A60D8
orig: #0EA5E9
#DAE05B
orig: #F59E0B
#141323
orig: #111827
#6E6D7C
orig: #6B7280
#FFFFFF
orig: #FFFFFF
#F3F3F5
orig: #F3F4F6
#E6E6EA
orig: #E5E7EB
Accessible Multi-Series Chart Preview
WCAG SC 1.4.1 Compliant: Differentiating series with both color, stroke styles, and shape markers
渐变对比度风险分析
Multi-point contrast risk analysis across gradient color stops
Gradient Hero Headline
Background gradients can create unexpected readability zones where contrast drops below WCAG requirements.
background: linear-gradient(135deg, #4F46E5 0%, #0EA5E9 100%);图片背景文字清晰度分析
Calibrate scrim overlay opacity to guarantee readable text over varied images
Scenic Horizon Photography
Semi-transparent scrim layers ensure dependable legibility regardless of underlying image luminance spikes.
background-color: rgba(0, 0, 0, 0.50);导出代码与素材
Export tokens to CSS variables, SCSS, Tailwind v3/v4, W3C JSON, SVG, PNG, or complete ZIP archive
:root {
/* Palette Tokens */
--color-primary-indigo: #4F46E5;
--color-sky-blue: #0EA5E9;
--color-amber-accent: #F59E0B;
--color-text-gray-900: #111827;
--color-muted-gray-500: #6B7280;
--color-white-background: #FFFFFF;
--color-surface-gray-100: #F3F4F6;
--color-border-gray-200: #E5E7EB;
/* Semantic Roles (Light Theme) */
--color-primary: #4F46E5;
--color-secondary: #0EA5E9;
--color-accent: #F59E0B;
--color-background: #FFFFFF;
--color-surface: #F8FAFC;
--color-text: #0F172A;
--color-mutedText: #64748B;
--color-border: #E2E8F0;
--color-focus: #4F46E5;
--color-success: #16A34A;
--color-warning: #D97706;
--color-danger: #DC2626;
--color-info: #0284C7;
/* Interactive States */
--color-primary-hover: #4433D3;
--color-primary-active: #3A1DC2;
--color-primary-focus: #4F46E5;
--color-primary-disabled: #A8ACC4;
}
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #7579FF;
--color-secondary: #0EA5E9;
--color-accent: #F59E0B;
--color-background: #0F172A;
--color-surface: #1E293B;
--color-text: #F8FAFC;
--color-mutedText: #94A3B8;
--color-border: #334155;
--color-focus: #818CF8;
--color-success: #4ADE80;
--color-warning: #FBBF24;
--color-danger: #F87171;
--color-info: #38BDF8;
--color-primary-hover: #8389FF;
--color-primary-active: #9299FF;
--color-primary-focus: #7579FF;
--color-primary-disabled: #37394A;
}
}关于色彩无障碍与调色板工作室
Solasu 的「色彩无障碍与调色板工作室」不仅是一个调色板生成器或对比度计算器。
它提供了一整套专业设计工作流：从零构建配色、从上传图片提取调色板、依 WCAG 2.2 标准验证对比度（AA、AAA 及非文本控件）、在 OKLCH 色彩空间自动生成最小色差修复建议、在亮暗主题中实时预览真实组件、模拟色觉障碍，并导出 CSS 变量、Tailwind、JSON、SVG、PNG 和 ZIP 压缩包。
所有色彩计算与图片分析均在您的浏览器内存中本地运行，文件绝不上传至任何服务器。
严格遵循 W3C / WCAG 2.2 标准的对比度算法
采用官方 sRGB 伽马线性化相对亮度计算公式（L = 0.2126*R + 0.7152*G + 0.0722*B），而非粗糙的数值加减。
独立评估常规文本（AA: 4.5:1、AAA: 7.0:1）、大文本（AA: 3.0:1、AAA: 4.5:1）以及非文本 UI 控件（3.0:1），并在未达标时清晰展示差值。
基于 OKLCH 视觉均等空间的「最小变更」色彩修正
在对比度不足时，算法利用 OKLCH 空间的亮度二分搜索，在最大程度保留原品牌色彩倾向与色相的前提下，寻找满足 4.5:1 或 7.0:1 要求的最近候选色。
支持固定背景色、固定前景色或双向微调三种修正方向，并标明客观的 Delta E 色彩距离等级。
纯本地 Median Cut 图片色彩提取
支持分析 JPEG、PNG、WebP 图片，提取主要、强调、中性、深色与浅色系。自动滤除透明度低于 128 的像素。
大图在分析前自动下采样至长边 1000px，并设置 64MP 安全防线，保障浏览器运行稳定与绝对隐私。
色觉障碍模拟与多场景组件预览
内置红色盲、绿色盲、蓝黄色盲与全色盲模拟算法，配合仪表盘、表单、着陆页与图表进行全方位验证。
依 WCAG 2.2 准则 1.4.1 提示不要单凭颜色传达状态，倡导结合图标、虚实线型与文字标签的无障碍设计。
面向工程的代码与素材导出
一键生成支持亮暗模式与交互状态的 CSS 变量、Tailwind CSS v3 配置与 v4 `@theme` 样式块、Design Tokens JSON 等。
亦可下载干净的 SVG 矢量色卡、PNG 图片与整合 ZIP 压缩包。
常见问题解答 (FAQ)
本工具是否免费？需要注册账号吗？
完全免费，无需注册账号或登录，直接在浏览器中打开即可使用全部功能。
上传的图片或色彩数据会被存储到服务器吗？
不会。所有处理均在浏览器本地完成，外部网络请求为 0，绝不上载数据。
支持哪些色彩代码格式？
支持 HEX（3/4/6/8 位）、RGB、RGBA、HSL、HSLA、HSV 以及现代 CSS OKLCH 格式。
WCAG 2.2 对比度是如何计算的？
依据 W3C 规范将 sRGB 转换为相对亮度 L，比率为 (更亮色 + 0.05) / (更暗色 + 0.05)。
AA 与 AAA 级别有何不同？
常规正文文本在 AA 级要求至少 4.5:1，AAA 级要求 7.0:1；大文本 AA 级要求 3.0:1，AAA 级要求 4.5:1。
什么是大文本（Large Text）？
指至少 18pt（约 24px）常规粗细，或至少 14pt（约 18.66px）粗体的文字。
什么是非文本对比度要求？
WCAG 2.2 准则 1.4.11 要求表单边框、按钮轮廓、图标等界面控件相对于相邻背景至少具备 3.0:1 对比度。
色彩修复建议是如何工作的？
在知觉均匀的 OKLCH 色彩空间对亮度 L 进行二分搜索，计算满足目标比率且色差最小的色值。
「最小变更」在数学上意味着什么？
指最小化 Oklab 空间中的欧几里得色差 Delta E，使调整后的颜色视觉上最贴近原色。
如何从图片中提取调色板？
利用 Canvas 对像素运行 Median Cut（中值切分）量化算法，提炼出具有代表性的主要色块。
PNG 透明像素是如何处理的？
透明度（Alpha 通道）小于 128 的半透明和全透明像素会被自动忽略，避免产生伪黑或伪白色。
可以上传超大分辨率图片吗？
可以。系统会自动按比例下采样至长边 1000px，既保证色彩提取精度，又避免内存耗尽。
色盲模拟能完全代表真实视觉体验吗？
不能。模拟基于数学线性转换矩阵（Brettel/Machado 模型），实际感知因人而异。
支持模拟哪些色觉类型？
支持红色盲（Protanopia）、绿色盲（Deuteranopia）、蓝黄色盲（Tritanopia）与全色盲（Achromatopsia）。
为什么图表不能仅依靠颜色区分数据？
依 WCAG 2.2 SC 1.4.1，色弱用户难以仅凭相近颜色分辨系列，需辅助以虚线、点线或数据标注。
暗黑模式调色板是如何生成的？
基于深色背景优化主色调和文字明度，并由专用对比度矩阵验证暗色环境下的可读性。
渐变背景如何评估文字对比度？
系统沿渐变采样 11 个点与文字颜色逐一比对，预警局部对比度低于 4.5:1 的潜在盲区。
图片上方放置文字有何建议？
分析图片平均明度后推荐黑白文字，并计算保证 4.5:1 对比度所需的最佳半透明遮罩（Scrim）不透明度。
支持导出 Tailwind CSS 吗？
支持导出 Tailwind v3 的配置文件及 Tailwind v4 的 CSS 原生 `@theme` 变量块。
下载的 ZIP 包含哪些文件？
包含 palette.css、palette.scss、tailwind.config.js、tokens.json、palette.svg 和 palette.png。
可以在移动设备上使用吗？
支持全响应式布局，在手机和平板浏览器上均可流畅调整配色和查看对比度。
通过对比度测试就完全符合无障碍标准了吗？
对比度只是无障碍的重要一环，完整的可访问性还需结合键盘导航、读屏器语义与字体排版综合考量。