{ 0 }|颜色对比度检查与计算

颜色对比度检查与计算

标题 Title

内容行 1

内容行 2

对比度8.11:1
AA 普通文本
AA 大文本
AAA 普通文本
AAA 大文本

文字颜色

HEX
#F2F2F3
RGB
rgb(242, 242, 243)
RGBA
rgba(242, 242, 243, 1)
HSL
hsl(240, 4%, 95%)
HSLA
hsla(240, 4%, 95%, 1)
CSS 变量
--color: #F2F2F3

背景颜色

HEX
#544545
RGB
rgb(84, 69, 69)
RGBA
rgba(84, 69, 69, 1)
HSL
hsl(0, 10%, 30%)
HSLA
hsla(0, 10%, 30%, 1)
CSS 变量
--color: #544545

功能特点

🔍

WCAG 标准验证

自动检测AA和AAA级别的对比度合规性

实时预览

即时预览颜色组合效果

🎨

多格式输出

支持HEX、RGB、HSL、CSS变量等多种格式

🔄

一键复制

快速复制各种格式的颜色值

使用教程

  1. 1

    输入或选择文字颜色(前景色)

  2. 2

    输入或选择背景颜色

  3. 3

    查看对比度结果和WCAG合规状态

常见问题

什么是WCAG对比度标准?

WCAG 2.1要求AA级别普通文本对比度至少4.5:1,大文本至少3:1;AAA级别要求普通文本7:1,大文本4.5:1。

大文本的定义是什么?

大文本指粗体18.66px或更大,或普通24px或更大的文本。

透明度会影响对比度吗?

根据WCAG规范,对比度计算不考虑透明度,仅基于RGB值计算。