您最喜欢的城市的最爱地点
首页
添加为 Google 首选来源

颜色对比度检查器

比较文本与背景颜色,查看对比度,并检查普通文本、大号文本和必要界面细节的 WCAG 数值阈值。

颜色

输入三位或六位 HEX,可带 #。

输入三位或六位 HEX,可带 #。

0–100%,最多两位小数。背景始终不透明。

交换颜色时,不透明度仍属于前景。

对比度结果

输入两种颜色和有效的不透明度后,即可查看对比度。

比较在浏览器中进行,工具不会上传颜色或保存颜色历史。只有在请求复制时才会将当前报告写入剪贴板。网站常规服务和同意设置另行适用。

检查一组颜色

  1. 输入三位或六位 HEX 颜色,或使用颜色选择器。背景必须为不透明的纯色。
  2. 不透明文本请保持前景不透明度为 100%;半透明前景可输入较低的百分比。三个值均有效时结果会更新。
  3. 查看对比度,以及普通文本、大号文本和非文本的各项结果。结合实际设计情境检查,需要分享时可复制带适用范围说明的报告。

理解对比度结果

普通文本的数值阈值为 AA 级 4.5:1 和 AAA 级 7:1。计算比较的是相对亮度,而不是颜色名称听起来有多不同。

大号文本的阈值为 AA 级 3:1 和 AAA 级 4.5:1。大号文本至少为 18pt 常规字重或 14pt 粗体,其他文字系统可使用等效大小,约为 24 和 18.67 CSS 像素;实际排版仍需检查。

前景不透明度会改变其在所选背景上的有效颜色。100% 表示完全不透明;0% 时前景融入背景,对比度为 1:1。本工具不处理背景透明度。

非文本 3:1 行比较此颜色组合中必要视觉细节与相邻颜色的对比度。所有判断均使用未经四舍五入的值;显示两位小数只是为了便于阅读。

可验证的示例

黑色 #000000 与白色 #FFFFFF 在不透明度为 100% 时得到 21:1,达到显示的五项数值阈值。交换这两种不透明颜色不会改变对比度。

灰色 #777777 与白色的对比度约为 4.48:1。它未达到普通文本 AA 级的 4.5:1,却超过大号文本 AA 级的 3:1。

在此 sRGB 计算中,不透明度为 50% 的黑色叠加在白色上,对比度约为 3.98:1。即使原始不透明颜色的对比度很高,降低不透明度也可能使其下降。

颜色组合只是无障碍评估的一部分

本工具评估不透明背景上的纯色 sRGB 颜色,可调整前景不透明度。它不会检查网页、读取字体、采样图片或渐变、模拟色觉,也不会评估所有 WCAG 要求和例外。

达到数值阈值不代表网页或产品获得无障碍认证。请检查实际文字大小和字重、相邻颜色、有意义的形状与状态及其他无障碍要求。显示效果和抗锯齿也会影响实际可读性。

在浏览器中计算

比较在浏览器中进行,工具不会上传颜色或保存颜色历史。只有在请求复制时,才会将当前报告写入剪贴板。网站常规服务和同意设置另行适用。

颜色对比度常见问题

不意味着。这只表示该颜色组合达到所显示的数值阈值。实际用途、排版、例外和其他相关要求仍需评估。

至少 18pt 常规字重或 14pt 粗体,其他文字系统可使用等效大小。请检查用户实际看到的大小和字重,不要假设标题一定是大号文本。

例如 4.499 四舍五入后显示为 4.50,但仍低于 4.5。阈值判断使用未四舍五入的值。

此版本接受三位或六位 RGB HEX 颜色。请在单独字段设置前景不透明度;不接受 CSS 函数、带 alpha 的 HEX 或透明背景。

两个颜色值交换,不透明度仍属于前景。不透明颜色组合的对比度不变;半透明组合交换后结果可能不同。

来源与方法

结果仅评估所输入颜色组合的数值对比度,不能证明符合 WCAG。

SVG 转 PNG

将本地 SVG 文件或粘贴的代码转换为 PNG,可设置尺寸、透明或纯色背景,并使用内置字体。

打开工具 — SVG 转 PNG

CSS 滤镜生成器

排列和重复 CSS 效果,比较示例并复制精确的滤镜声明。

打开工具 — CSS 滤镜生成器

流式字号计算器

为两个视口宽度分别设置字号,生成流式字号。复制使用 rem 的 CSS,并查看基于导出系数计算的模型。

打开工具 — 流式字号计算器

CSS 按钮生成器

设置原生按钮状态,检查键盘焦点并复制 HTML 和 CSS。

打开工具 — CSS 按钮生成器

CSS 圆角生成器

编辑八个圆角半径,预览盒子,并复制以像素或百分比表示的 CSS。

打开工具 — CSS 圆角生成器

CSS Grid 生成器

编辑 CSS Grid 轨道、项目位置和命名区域,预览并复制 CSS、HTML 或下载完整示例。

打开工具 — CSS Grid 生成器

CSS Flexbox 生成器

使用容器和项目控件、显式布局轴、匹配的 CSS 和 HTML 以及本地完整示例下载构建 Flexbox 示例。

打开工具 — CSS Flexbox 生成器

CSS 文字阴影生成器

创建有序文字阴影,预览纯文本并复制精确 CSS。

打开工具 — CSS 文字阴影生成器

CSS 变换发生器

编写可重复的 2D CSS 变换,编辑 px 或百分比平移和原点,检查参考框并复制准确的当前声明。

打开工具 — CSS 变换发生器

CSS 盒子阴影生成器

创建有序的 CSS box-shadow 图层,实时预览并复制代码。

打开工具 — CSS 盒子阴影生成器

图片水印

为一批图片添加文字或标志水印,检查结果并下载单个文件或 ZIP。

打开工具 — 图片水印

CSS 渐变生成器

创建线性或径向 CSS 渐变,调整颜色、不透明度和节点位置。

打开工具 — CSS 渐变生成器

颜色转换器

转换支持的 sRGB HEX、RGB 和 HSL 颜色值,保留透明度并显示精度。

打开工具 — 颜色转换器

图片转文字(OCR)

识别本地 PNG 或 JPEG 中的印刷文字,选择语言,检查并修改结果后复制或下载。

打开工具 — 图片转文字(OCR)

从图片读取二维码

从本地 PNG 或 JPEG 读取一个二维码,查看文本或内容字节,不会打开链接。

打开工具 — 从图片读取二维码

打印尺寸与分辨率计算器

计算照片可打印尺寸、所需像素,以及留白或裁切时的实际 PPI。

打开工具 — 打印尺寸与分辨率计算器

宽高比计算器

计算宽度与高度的精确比例,或指定一边计算对应的像素尺寸。

打开工具 — 宽高比计算器

图像压缩

尝试将 JPEG、PNG 或 WebP 图片压至目标文件大小,查看实测结果并可选择缩小尺寸。

打开工具 — 图像压缩

HEIC 转 JPG

在浏览器中将受支持的 HEIC 照片转换为原尺寸 JPG 副本,调整质量和背景,并单独下载或打包下载已验证的结果。

打开工具 — HEIC 转 JPG

图片格式转换器

在本地批量转换受支持的 PNG、JPEG 和 WebP 图片,调整透明度、背景和质量,检查并下载编码结果。

打开工具 — 图片格式转换器

照片拼图工具

将本地照片排列成网格,下载 PNG 或 JPEG。

打开工具 — 照片拼图工具

旋转和翻转图片

批量旋转或翻转本地静态 PNG、JPEG 和 WebP 图片,然后查看并下载处理结果。

打开工具 — 旋转和翻转图片

图片裁剪

通过可视选区或像素输入精确裁剪本地 JPEG、PNG 或 WebP 图片,下载为 PNG 或 JPEG。

打开工具 — 图片裁剪

图片尺寸调整

按像素或百分比调整 JPG、PNG 或 WebP 图片,预览结果并下载。

打开工具 — 图片尺寸调整
查看此分类中的所有工具