配色检查器（对比度·互补色·色觉模拟）
输入文字颜色和背景颜色后，会判定 WCAG 2.1 的对比度以及AA·AAA是否合格，并给出满足标准的最接近颜色。还可以在同一画面中获取互补色·类似色·三角配色等基于色相环的配色方案，进行HEX／RGB／HSL转换，以及比较第一型·第二型·第三型色觉和灰度下的观感。
加载中...
ABOUT
关于配色检查器（对比度·互补色·色觉模拟）
配色检查器是一款在选定一种颜色后，在一个画面中一并完成所需检查的工具。它按 WCAG 2.1 的标准判定文字颜色与背景颜色的对比度，未达标时会给出保持色相和饱和度、只改变明度的“最接近的合格颜色”。还能在同一画面中确认互补色·类似色·三角配色等基于色相环的配色方案，进行 HEX／RGB／HSL 转换，以及比较第一型（P型）·第二型（D型）·第三型（T型）色觉和灰度下的观感。
配色检查器（对比度·互补色·色觉模拟）的使用方法
- 1在上方输入框中输入文字颜色（基准色）。除了取色器外，#4F46E5·rgb(79,70,229)·hsl(243,75%,59%) 任何写法都能识别
- 2输入背景颜色，在“对比度”标签页查看比值和AA·AAA是否合格（不合格时会建议接近的合格颜色）
- 3在“配色方案”标签页确认互补色·类似色·三角配色等组合及颜色代码（点击色块即可复制）
- 4在“色觉模拟”标签页一并输入图表或资料中使用的颜色，确认有没有容易混淆的组合
- 5复制分享URL，就能把同样颜色的判定结果直接交给别人
适用场景
- 在发布前用数值确认网站或幻灯片的文字颜色相对于背景是否难以阅读
- 想把品牌色用于正文但直接用太浅时，在不改变印象的前提下只调整深浅
- 为了决定标志或横幅的点缀色，求出基准色的互补色或分裂互补色
- 确认图表的系列颜色不会因色觉类型不同而看起来是同一种颜色
- 确认以黑白打印·复印的资料中的颜色区分，仅凭明度差也能分辨
- 把从设计稿拿到的 HEX 转换为 RGB 或 HSL，粘贴到 CSS 或幻灯片中
使用要点
- 对比度根据 WCAG 2.1 的相对亮度计算。白与黑的组合为最大值 21.00:1。
- 合格标准为：普通文字 AA 4.5:1·AAA 7:1，大号文字（24px以上，或粗体18.66px＝约19px以上）AA 3:1·AAA 4.5:1，按钮边框或图表颜色区分等文字以外的元素为 3:1。
- 比值以舍去方式显示，判定也使用同一数值。4.49:1 不会显示为“4.5”而看起来像合格。
- 建议的颜色是固定色相和饱和度、只调整明度，从变亮和变暗两个方向寻找满足 4.5:1 的最接近颜色。
- 配色方案是旋转屏幕（光的三原色）色相环＝HSL 的色相生成的，所以红色的互补色是青色。在颜料混色的色相环中，红色的互补色被认为是绿色。互补色为180°，类似色为±30°，分裂互补色为150°和210°，三角配色为120°和240°，四角配色为90°·180°·270°。
- CMYK 是不使用色彩配置文件的简单转换的参考值，不能作为交给印刷厂的数值使用。
- 色觉模拟以严重度1.0应用 Machado 等（2009）的转换矩阵。实际观感存在个体差异，最终确认请由当事人或使用专用软件进行。
- 可辨识度的判定使用 CIEDE2000 色差，低于 10 的组合会作为“容易混淆”列在表中。
- 所有判定都在浏览器内计算，输入的颜色不会发送到服务器。
可以解决这些问题
配色检查器（对比度·互补色·色觉模拟）可以帮你解决以下问题。
- 这个文字颜色和背景颜色的组合难以阅读吗？
- 对比度不够时该用什么颜色？
- 这个颜色的互补色（反色）是什么颜色？
- 想确认图表的颜色区分不会因色觉类型而看起来相同
- 想把HEX转换为RGB或HSL
- 想要黑白打印也能区分的配色
常见问题
- 对比度达到多少才够？
- 正文大小的文字以 4.5:1 以上为标准（WCAG 2.1 的 AA）。24px以上的大号文字或粗体18.66px以上用 3:1 即可。更严格的 AAA 对普通文字为 7:1，对大号文字为 4.5:1。按钮边框、输入框边界、图表填色等文字以外的元素也要求 3:1 以上。
- 品牌色达不到标准，只能换颜色吗？
- 大多数情况下，保持色相和饱和度、只调整明度就够了。本工具会从变亮和变暗两个方向寻找满足 4.5:1 的最接近颜色并提出建议，所以能在保持视觉印象的同时进行修正。如果仍达不到，比较现实的做法是把品牌色用于标题或色块，正文则使用接近黑色的颜色。
- 互补色怎么求？
- 就是色相环上正对面的颜色，也就是色相旋转180°后的颜色。例如色相240°的蓝色，其互补色是60°的黄色。互补色组合最为醒目，但以相同面积并排时会显得冲突，因此把其中一方限定为点缀色，或使用互补色两侧的分裂互补色（150°和210°）会更好处理。
- 不同色觉类型的观感不同，会有什么问题？
- 约5%的日本男性属于第一型或第二型色觉，红色和绿色看起来很接近。如果图表用红色和绿色区分，在这些人看来就是同一种颜色的色带。本工具会把颜色并排以4种观感显示，并把 CIEDE2000 色差低于10的组合列在表中，因此当场就能知道哪些组合有风险。
- 无法用颜色区分时该怎么办？
- 增加颜色以外的线索最为可靠。折线图可用实线·虚线·点线区分，柱状图可加入图案，或不依赖图例而直接在图表上标注标签。如果想保留颜色进行改善，请拉开明度而不是色相。有了明度差，无论黑白复印还是色觉类型不同都能区分。
- HEX·RGB·HSL 该如何区分使用？
- HEX（#4F46E5）适合与设计工具交接，RGB 适合屏幕显示的计算，HSL 适合调整颜色。HSL 把色相·饱和度·明度分开，所以“保持同一颜色稍微调暗”“只偏移色调”等操作只需改一个数值。本工具的配色方案和色调也是用 HSL 计算的。
Special Thanks