色彩对比批量矩阵检测器

为什么要一次检查「所有颜色组合」的对比度？

无障碍网页设计规范（WCAG）要求文字与背景的对比度必须达到一定标准，否则视力不佳或色弱的使用者可能看不清楚文字。但实务上一个网站常常有好几种主色、背景色互相搭配——如果一组一组手动检查，很容易漏掉某个组合。本工具让你一次贴上所有会用到的颜色，自动算出「每两个颜色互相搭配」的对比度，用一张矩阵表全部呈现，不用再一组一组手动比对。

对比度怎么算？举个例子

WCAG 2.1的对比度公式是(L1+0.05)/(L2+0.05)，L1、L2是两个颜色的「相对亮度」，数值越大代表越接近白色。例如纯黑#000000对纯白#FFFFFF的对比度是21:1（满分），但浅灰#999999对白色只有2.85:1——远低于普通文字要求的4.5:1及格线。普通文字（小于18px或14px粗体）需要AA级≥4.5:1，若想更严格则要达AAA级≥7:1；大字（18px+粗体或24px+）门槛较宽，AA级只要≥3:1。

怎么看懂结果矩阵？

矩阵每格代表「这一行的颜色」对「这一列的颜色」的对比度数值，格子背景会用绿色（AAA通过）、黄色（仅AA通过）、红色（未达标）标示，一眼就能看出哪组颜色搭配有问题，不需要逐一计算。

对比度计算仅根据颜色本身的RGB数值，不会考虑字体粗细、实际渲染的抗锯齿效果或半透明叠加颜色，正式上线前建议仍以肉眼在实际设备上复查一次。