颜色预览
点下方任意色块或输入框都能改变当前颜色。
#4a90d9
文字颜色测试
对比度检测（WCAG 2.1）
对比度低于 4.5 会让视力较弱的用户难以阅读，正文建议至少达到 AA 级。
大号标题文字 24px bold
正文示例：这段文字应该清晰可读，用于评估配色的实际观感。
拖动色相滑块快速生成协调的邻近色。
这个工具怎么用？常见问题
HSL 和 RGB 该用哪个？HSL（色相、饱和度、亮度）更适合人调色 —— 保持色相不变只改亮度就能做出明暗阶梯。RGB 适合写代码 —— 屏幕渲染最终都要转成 RGB。
对比度多少才算合格？WCAG 2.1 规定：正文文字对比度至少 4.5:1（AA 级），大号文字（18.66px 粗体或 24px 常规）至少 3:1（AA 级）。AAA 级要求更严，正文要 7:1。
为什么我的配色看着舒服但对比度不达标？常见的「设计不错但可读性差」主要是用了中间亮度的背景配灰色文字。试试把文字换成纯黑或纯白，或者用上面的明暗阶梯加深背景。
怎么搭配一组好看的配色？主色定好后，用「类似色」做同色系层次，用「互补与三角」做撞色点缀，用「明暗阶梯」生成从浅到深的背景和边框，50% 灰阶做分隔线。
色盲友好吗？本工具的对比度检测只考虑亮度差（luminance），不完全等于色盲友好。但单纯的亮度对比（不只靠红绿区分信息）对三类色盲都友好，重要信息不要只靠颜色传达。
相关工具
配色确定后的后续工作。