星点 星点-颜色工具 本系列首页
关于
版本 v1.0.0

颜色对比度检测(WCAG)

输入前景色与背景色,实时计算 WCAG 对比度,判断普通文本与大字号是否满足 AA/AAA,并推荐最佳文字颜色与可调整的替代色,帮助提升界面可读性。

对比度检测 · 工具介绍

WCAG(Web 内容无障碍指南)要求文本与背景保持足够对比度:普通文本 AA 至少 4.5:1、AAA 至少 7:1;大字号 AA 至少 3:1、AAA 至少 4.5:1。

本工具按 WCAG 2.x 相对亮度公式计算对比度,实时给出各项达标结果,并用清晰标识展示通过情况。

当对比度不足时,工具会推荐对比度更高的最佳文字颜色,并给出自动调整后的替代色,方便快速修正。

支持多组前景/背景颜色批量检测,适合一次性检查整套设计规范。

对比度检测 · 功能特点

  • WCAG 对比度精确计算(相对亮度公式)
  • AA / AAA 普通文本与大字号分别判定
  • 最佳文字颜色推荐(黑/白及自定义)
  • 自动调整对比度,给出替代色
  • 色盲可辨识度提示
  • 多组颜色批量检测

对比度检测 · 使用方法

  1. 输入或选择前景色与背景色;
  2. 查看实时对比度数值;
  3. 检查 AA/AAA 在普通文本与大字号下的达标情况;
  4. 使用推荐的最佳文字颜色或替代色修正;
  5. 批量模式可一次检测多组颜色。

对比度检测 · 常见问题

Q:对比度多少才算合格?

WCAG 要求:普通文本 AA 至少 4.5:1、AAA 至少 7:1;大字号(约 18pt 或 14pt 加粗以上)AA 至少 3:1、AAA 至少 4.5:1。

Q:对比度是怎么计算的?

按 WCAG 2.x 相对亮度公式:先对每个通道做 sRGB 反伽马变换,再以 0.2126R+0.7152G+0.0722B 计算亮度,对比度为 (L1+0.05)/(L2+0.05)。

Q:“最佳文字颜色”是怎么选的?

工具会比较黑色与白色(以及可选的候选色)与背景的对比度,返回对比度最高的文字颜色。

Q:可以一次检测多组颜色吗?

可以。批量模式支持每行一组“前景 背景”颜色,逐行输出对比度与达标结果。

相关工具

继续使用本站其它颜色处理工具:

颜色选择器

色相/饱和度/明度面板取色,多格式实时同步与多点保存

打开工具

图片颜色工具

上传图片取色、提取主色与调色板、统计与聚类量化

打开工具

颜色格式转换

HEX/RGB/HSL/HSV/CMYK/LAB/XYZ/LCH/HWB/OKLab/OKLCH 互转

打开工具

配色方案生成器

按色彩关系生成单色/类似/互补/三角/四角等配色方案

打开工具

CSS 渐变生成器

可视化制作线性/径向/锥形渐变并复制 CSS

打开工具

颜色调整

滑块实时调整亮度/饱和度/透明度/色相/明度/对比度

打开工具

批量颜色处理

批量转换/提取/替换/去重/排序颜色代码

打开工具

设计辅助

主色/辅助色/状态色 → UI 结构预览 + Design Token 导出

打开工具

专业色彩

LAB/OKLab/OKLCH 转换、DeltaE 色差、色温与色域分析

打开工具

色觉模拟

模拟多种色觉类型,检查图片与配色的可辨识度

打开工具

标准与色库

CSS/Material/Tailwind/Ant/品牌/传统色等色库查询复制

打开工具