颜色对比度检查
输入或选择文字颜色和背景颜色，就能得到 WCAG 对比度，以及各级别是否达标。如果不达标，修正功能会在保持色相不变的前提下，找到最接近的达标文字颜色。所有计算都在本页完成，不会上传。
支持十六进制（#fff、#ffffff，可带透明度）、rgb()、hsl() 或 navy 这样的颜色名。
对比度
4.54 : 1
有的级别达标，有的不达标，请在下表里看你需要的那一项。
预览
正文 16 px。The quick brown fox，天地玄黄，宇宙洪荒。
大号文字 24 px
按钮按钮、图标或输入框的边框
WCAG 2.x 判定结果
| 级别 | 要求 | 结果 |
|---|---|---|
| AA，正文 | 4.5:1 | ✓ 达标 |
| AA，大号文字 | 3:1 | ✓ 达标 |
| AA，界面组件和图形 | 3:1 | ✓ 达标 |
| AAA，正文 | 7:1 | ✗ 不达标 |
| AAA，大号文字 | 4.5:1 | ✓ 达标 |
大号文字指至少 18 pt，或加粗 14 pt，约合 24 px，或加粗约 18.66 px。
一键修正：找到最接近的达标文字颜色
保持文字颜色的色相和饱和度，只调整明度，同时向更深和更浅两个方向查找，直到达到你选的比例。
你的文字颜色已经达到 4.5:1（4.54:1），不用修改。
WCAG 2 对比度没有告诉你的事
- •WCAG 2 的公式只是对明暗的简单模型，没有考虑字重、细笔画、眩光，也没有考虑深色背景上浅色文字的实际观感，所以达标的组合仍可能不好读，深色模式下尤其如此。
- •WCAG 3 草案和 APCA 采用另一种算法，会区分哪个是文字、文字多大。这项工作仍在演进，本页没有实现它。上表是现行标准 WCAG 2.x 的级别。
- •比例不会被四舍五入后算作达标。4.499 达不到 4.5，所以只差一点的组合会多显示几位小数，并标为不达标。
检查是怎么算的
- •每种颜色先换算成相对亮度：把红、绿、蓝从 sRGB 转成线性光（使用标准里 0.04045 的分界），再按 0.2126、0.7152、0.0722 加权。对比度等于（较亮值 + 0.05）除以（较深值 + 0.05），相同颜色是 1:1，黑底白字是 21:1。
- •AA 级要求：正文 4.5:1，大号文字以及界面组件和图形 3:1；AAA 级要求：正文 7:1，大号文字 4.5:1。大号文字指至少 18 pt，或加粗 14 pt，约合 24 px，或加粗约 18.66 px。
- •判定用的是精确值，不是四舍五入后的值。4.499 达不到 4.5，所以结果只差一点时，页面会多显示几位小数，而不是显示容易误导的 4.50，并标为不达标。
- •带透明度的颜色会先和它后面的颜色混合再计算：背景先叠在白色上，文字颜色再叠在背景上。实际页面里文字后面可能是图片或渐变，本页无从得知。
- •修正功能保持色相和饱和度，把 HSL 明度往更深和更浅两个方向调整，直到达到目标，再取整为十六进制颜色并检查这个确切的值，所以你复制的就是达标的那个值。如果在这个背景上连黑色或白色都达不到目标，会直接告诉你。
常见问题
- 我需要达到多少对比度？
- 大多数文字至少要达到 4.5:1（WCAG AA）。大号文字，以及用来识别控件的边框或图标，需要 3:1。AAA 对正文要求 7:1。具体适用哪个级别，取决于你的法规或客户要求。
- 我觉得看着没问题，为什么不达标？
- 对比度是固定公式的结果，不是对你眼睛的判断。光线好、视力好时，很多组合看起来没问题，但在昏暗的屏幕上、阳光下或视力较弱时就很难读。公式也没有考虑字重，只在大号文字规则里考虑了字号。
- 这和 APCA 或 WCAG 3 一样吗？
- 不一样。本页用的是 WCAG 2.x 公式，也就是现行无障碍要求所引用的标准。APCA 和 WCAG 3 草案用另一种算法，仍在演进，所以这里没有包含。
- 我输入的颜色会被上传或保存吗？
- 不会。计算在你的浏览器里完成，没有任何内容被发送或保存。刷新页面会恢复示例颜色。