WCAG颜色对比度检查器 - 在线检查颜色无障碍性
检查WCAG 2.1 AA和AAA标准的颜色对比度比率。获取普通文本、大文本和UI组件的即时判定 — 100%客户端处理。
常见问题
什么是WCAG颜色对比度检查器？
WCAG颜色对比度检查器是一个在线工具，用于计算两种颜色之间的对比度比率，并评估该组合是否符合WCAG 2.1无障碍标准。它在两个级别检查合规性：AA（最低要求，普通文本4.5:1）和AAA（增强要求，普通文本7:1）。
如何使用此工具？
使用HEX、RGB或HSL格式输入前景色，或使用颜色选择器。然后输入背景色。对比度比率会即时显示。查看WCAG合规性表格和替代颜色建议。
我的颜色数据安全吗？
您的颜色数据100%安全，永远不会离开您的浏览器。计算完全在客户端JavaScript中运行。不会向任何服务器传输任何数据。
WCAG AA和AAA有什么区别？
WCAG AA是大多数无障碍法律要求的最低合规级别。WCAG AAA是提供更好可读性的增强合规级别。
WCAG中的'大文本'是什么？
根据WCAG 2.1，大文本是指常规字重至少18pt（24px）或粗体至少14pt（18.5px）的文本。
对比度比率公式是什么？
WCAG 2.1对比度比率通过三个步骤计算：伽马校正、相对亮度计算和比率计算。结果范围从1:1到21:1。
'UI组件'是什么意思？
WCAG 2.1 SC 1.4.11要求传达信息的视觉元素（如表单字段边框、按钮轮廓和图标）具有至少3:1的对比度比率。
代码示例
// WCAG Color Contrast Checker
function sRGBtoLinear(channel) {
const c = channel / 255;
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
}
function getRelativeLuminance(r, g, b) {
return (
0.2126 * sRGBtoLinear(r) +
0.7152 * sRGBtoLinear(g) +
0.0722 * sRGBtoLinear(b)
);
}
function getContrastRatio(fg, bg) {
const l1 = getRelativeLuminance(...fg);
const l2 = getRelativeLuminance(...bg);
const lighter = Math.max(l1, l2);
const darker = Math.min(l1, l2);
return (lighter + 0.05) / (darker + 0.05);
}
function checkWCAG(ratio) {
return {
ratio: parseFloat(ratio.toFixed(2)),
aa: {
normalText: ratio >= 4.5,
largeText: ratio >= 3,
uiComponents: ratio >= 3,
},
aaa: {
normalText: ratio >= 7,
largeText: ratio >= 4.5,
},
};
}
// Usage
const fg = [26, 26, 26];
const bg = [255, 255, 255];
const ratio = getContrastRatio(fg, bg);
console.log(`Contrast Ratio: ${ratio.toFixed(2)}:1`);
const result = checkWCAG(ratio);
console.log('AA Normal Text:', result.aa.normalText ? 'Pass' : 'Fail');
console.log('AAA Normal Text:', result.aaa.normalText ? 'Pass' : 'Fail');