跳到主要内容

创刊于 2016 总第 3337 期


Goslion的Blog

一个专注技术与写作的个人博客,记录日常与技术沉淀,马上十年了


2026年10月9日 星期五 总第 3337 期 今日 2 篇 · 存稿 418 篇

颜色与对比度

HEX、RGB、HSL 互转,并按 WCAG 标准计算前景与背景的对比度是否达标。

颜色与对比度

全部在浏览器本地计算,不上传任何内容

三种格式任意一处修改都会实时同步另外两处。HEX 支持 #abc 与 #1a2b3c;RGB 可写 rgb(26, 43, 60) 或 26,43,60;HSL 可写 hsl(210, 40%, 17%) 或 210,40,17。 输入无法识别时会回退到上一个有效值。

前景色(文字)
背景色

前景 / 背景同样支持 HEX、RGB、HSL 三种写法,任一处修改都会立即重新计算。

正文示例文字:清晰可读是最基本的要求。
大字示例 Aa
对比度(WCAG 2.1) 21.00 : 1
正文(正常字号,AA ≥ 4.5) —
正文(正常字号,AAA ≥ 7) —
大字(≥18.66px 粗体或 ≥24px,AA ≥ 3) —
大字(≥18.66px 粗体或 ≥24px,AAA ≥ 4.5) —

点击色板套用到

对比度按 WCAG 2.1 计算:sRGB 分量先转线性(c ≤ 0.03928 时取 c / 12.92,否则取 ((c + 0.055) / 1.055) ^ 2.4),相对亮度为 0.2126R + 0.7152G + 0.0722B, 比值 =(较亮 + 0.05)/(较暗 + 0.05),范围为 1 到 21,保留两位小数。 判定标准:正文 AA ≥ 4.5、AAA ≥ 7;大字(≥18.66px 粗体或 ≥24px)AA ≥ 3、AAA ≥ 4.5。