AiLounge Tools

配色与 CSS 样式工具

在浏览器本地转换 HEX/RGB/HSL、计算 WCAG 对比度、生成受控渐变与 box-shadow CSS,不上传任何颜色或文档。本地处理 · 无上传

WCAG 前景/背景对比度

按 sRGB 相对亮度计算对比度;透明前景先按你选择的不透明背景合成,再给出普通/大字 AA 与 AAA 判断及前提。

在浏览器中运行

输入与参数

真实示例

foreground=#000000, background=#ffffff, alpha=100 → 21:1;同色 #176b50/#176b50 → 1:1;alpha=50 → 合成 #808080,约 3.98:1
→ Contrast ratio: 21.00:1 · 普通 AA pass · 普通 AAA pass;alpha=50 → 3.98:1 · 普通 AA fail · 大字 AA pass

限制与失败处理

使用 WCAG 2.1/2.2 的 sRGB 相对亮度公式,不评估字号本身、字体、抗锯齿、图片/渐变背景、半透明叠层或显示器色彩管理;背景必须不透明。结果只能作为设计参考,不能替代在真实设备上的复核。

FAQ

普通文字与大字的标准是什么?

普通文字 AA ≥4.5:1、AAA ≥7:1;大字 AA ≥3:1、AAA ≥4.5:1。大字指 ≥18pt(24px)常规或 ≥14pt(约 18.66px)粗体。

半透明文字怎么算?

先按你填写的 alpha 把前景与所选不透明背景做 source-over 合成,再用合成后的实色计算亮度。背景本身透明会报 TRANSPARENT_BACKGROUND。

这个结论有哪些前提?

前提是纯色不透明文字放在纯色不透明背景上;不适用于文字压在图片、渐变、半透明叠层,抗锯齿或显示器色彩管理差异也不计入。