预览
控制
CSS 代码
在线对比度检查器,输入前景文字与背景颜色即可计算对比度比值,校验是否符合 WCAG AA/AAA 无障碍标准并实时预览文本可读性;浏览器本地运行,免费无需安装。
先填写或调整「主色调」、「辅助色」、「大小 200px」、「圆角 8px」;修改输入或使用页面控件后查看结果区域。
颜色观感会受周围背景、透明度、屏幕亮度与色彩管理影响。比较色值时应同时核对颜色空间和透明度,并在最终背景与目标设备上查看。
不能。文字可读性还取决于前景与背景的对比、字号和字重。应使用最终的文字颜色与背景颜色检查,不能只根据色卡或单独一个 HEX 值判断。
「大小 200px」的输入范围为 50~300。「圆角 8px」的输入范围为 0~150。请按字段标注的单位输入,先检查超出范围、空值和小数点,再核对结果。
核对色值、尺寸、字体和导出格式。屏幕显示、浏览器渲染与印刷效果可能不同;应在最终使用的背景、设备或设计软件中再检查。
本页的主要处理逻辑在浏览器内执行。页面加载资源、打开外部链接,以及带外部地址的内容预览仍可能产生网络请求;“本地处理”并不表示整个网页完全没有网络活动。
先检查「主色调」、「辅助色」、「大小 200px」是否完整,以及格式、单位和当前选项是否匹配。修改输入后,查看页面的结果或错误提示;可先用少量数据定位问题。
色盲模拟器(设计师版) · Color Contrast Checker · 颜色选择器(设计版) · 颜色混合器(美术调色) · 全部设计工具