对比度检查器

OKLCH 对比度检查器

使用 OKLCH 颜色检查颜色对比度比例以符合可访问性标准，实时 WCAG 评估。

支持 AA 与 AAA 评估

提供文本、按钮、卡片预览

复制最终可用的颜色组合

使用指南

调整颜色

分别调整前景色和背景色的 OKLCH 值，实时查看对比度变化。

查看 WCAG 标准

检查当前对比度是否符合 AA（4.5:1）或 AAA（7:1）无障碍标准。

预览效果

切换不同预览模式（文本、按钮、卡片）查看实际效果。

随机颜色

点击“随机生成颜色”探索新的颜色组合，快速获取灵感。

复制颜色

点击复制按钮获取颜色值，用于你的项目中。

显示透明度

限制到 sRGB

复制格式

文字大小

前景色

HEX 颜色

Lightness

Chroma

Hue

背景色

HEX 颜色

Lightness

Chroma

Hue

操作

预览

示例标题文本

这是示例段落文本，用于测试您选择的颜色组合的可读性。

小文本示例用于详细测试。

链接文本加粗文本斜体文本

对比度结果

15.64:1

优秀对比度比例

AA 普通文本

普通文本

4.5:1 最低标准

AAA 普通文本

普通文本

7:1 增强标准

AA 大文本

大文本

3:1 最低标准

AAA 大文本

大文本

4.5:1 增强标准

颜色信息

前景色

HEX

#0e171e

RGB

rgb(14, 23, 30)

HSL

hsl(204.95, 38.07%, 8.59%)

OKLCH

oklch(20% 0.020 240)

背景色

HEX

#e9f0f5

RGB

rgb(233, 240, 245)

HSL

hsl(205.78, 36.37%, 93.6%)

OKLCH

oklch(95% 0.010 240)

对比度检查器

OKLCH 对比度检查器

使用 OKLCH 颜色检查颜色对比度比例以符合可访问性标准，实时 WCAG 评估。

支持 AA 与 AAA 评估

提供文本、按钮、卡片预览

复制最终可用的颜色组合

使用指南

调整颜色

分别调整前景色和背景色的 OKLCH 值，实时查看对比度变化。

查看 WCAG 标准

检查当前对比度是否符合 AA（4.5:1）或 AAA（7:1）无障碍标准。

预览效果

切换不同预览模式（文本、按钮、卡片）查看实际效果。

随机颜色

点击“随机生成颜色”探索新的颜色组合，快速获取灵感。

复制颜色

点击复制按钮获取颜色值，用于你的项目中。

显示透明度

限制到 sRGB

复制格式

文字大小

前景色

HEX 颜色

Lightness

Chroma

Hue

背景色

HEX 颜色

Lightness

Chroma

Hue

操作

预览

示例标题文本

这是示例段落文本，用于测试您选择的颜色组合的可读性。

小文本示例用于详细测试。

链接文本加粗文本斜体文本

对比度结果

15.64:1

优秀对比度比例

AA 普通文本

普通文本

4.5:1 最低标准

AAA 普通文本

普通文本

7:1 增强标准

AA 大文本

大文本

3:1 最低标准

AAA 大文本

大文本

4.5:1 增强标准

颜色信息

前景色

HEX

#0e171e

RGB

rgb(14, 23, 30)

HSL

hsl(204.95, 38.07%, 8.59%)

OKLCH

oklch(20% 0.020 240)

背景色

HEX

#e9f0f5

RGB

rgb(233, 240, 245)

HSL

hsl(205.78, 36.37%, 93.6%)

OKLCH

oklch(95% 0.010 240)