颜色对比度检查器

颜色对比度检查器（WCAG Contrast Checker）

按 WCAG 2.1 计算前景色与背景色对比度、判定可读性等级的网页工具。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，所有计算在浏览器本地完成。

功能特性

• 对比度计算：依据 WCAG 2.1 相对亮度公式，输出 1:1 至 21:1 的对比度比值（保留两位小数）

• 等级判定：同时判定 AA 普通文字（≥ 4.5）、AA 大字（≥ 3.0）、AAA 普通文字（≥ 7.0）、AAA 大字（≥ 4.5）

• 徽章总览：按最高达标等级显示 AAA / AA / AA 大字 / 未通过

• 实时预览：按所选前景与背景渲染大标题、正文与小号文字示例

• 文本色建议：比较白色与黑色文字在该背景下的对比度，推荐更易读的文字颜色

• 多格式支持：#rgb、#rrggbb、rgb(r,g,b)、rgba(r,g,b,a)

• 取色联动：原生取色器与文本输入双向同步，一键交换前景与背景

计算方法

相对亮度 L
  每个通道 c = 值 / 255
  c ≤ 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ^ 2.4
  L = 0.2126·R + 0.7152·G + 0.0722·B

对比度
  (L亮 + 0.05) / (L暗 + 0.05)

WCAG 2.1 阈值

使用场景

• 无障碍设计：为按钮、正文、链接挑选符合 WCAG 的配色

• 品牌配色校验：检查品牌色作为文字色时的可读性是否达标

• 深色模式适配：快速验证深色背景上的文字对比度

• 离线使用：无需安装任何依赖，浏览器打开即用

快速开始

无需安装与构建，直接用浏览器打开 index.html 即可使用，或在任意静态服务器下访问：

python3 -m http.server 8031
# 访问 http://localhost:8031/index.html

技术栈

• HTML5 + CSS3 + 原生 JavaScript（零第三方依赖）

• WCAG 2.1 相对亮度与对比度公式

• 剪贴板：navigator.clipboard.writeText