设计 · 指南

把颜色对比度作为设计检查

提取的颜色可以作为配色起点，但文字对比度必须结合真实背景和字号单独验证。

继续了解提取图片颜色, 压缩图片, 调整图片尺寸 · 指南

配色板不等于对比度结论

图片中的主要颜色适合用来寻找配色，但并不会自动形成可访问的文字组合。对比度还取决于前景色、背景色、字号、字重和具体使用场景。

检查真实组件

使用实际文字颜色和实际背景进行检查。
不要只依靠颜色表达状态或选中关系。
分别检查浅色和深色主题。

参考资料

相关工具

提取图片颜色在浏览器本地从图片中提取五个代表性色彩。
压缩图片为 JPG、PNG、WebP 输入比较 JPEG/PNG 压缩候选，查看文件大小与像素误差指标。
调整图片尺寸在浏览器本地批量调整图片尺寸，并按需保持原始比例。
转换图片格式在浏览器本地将图片转换为 JPG、PNG 或 WebP 格式。
旋转和翻转图片在浏览器本地批量旋转和翻转图片。

返回设计指南