如何在Devtools进行对比度检查

什么是对比度?

如何检查/发现对比度问题？

如何解决对比度问题？

对比度评级

最低比率（AA 评级） 主体内容 （4.5 : 1 ~ 7 : 1） 大尺寸文字（标题）（3 : 1 ~ 4.5 : 1） 活动用户界面组件和图形对象，例如图标和图表 (3 : 1 ) 增强比率（AAA评级）

最小对比度

• 文本和背景的对比度至少应为 4.5:1。
• • 标题（或较大的）文本的比例应至少为 3:1。较大的文本定义为至少 18pt，或 14pt 粗体。 增强对比度（AAA）
• 文本和背景的对比度至少应为 7:1。
• 标题（或较大文本）的比例至少应为 4.5:1。 总结 如何发现网页上的对比度问题 如何打开对比度检查

1. 打开DevTools设置 -> 实验
2. 勾选contrast issue

其他

对比度检查工具 https://app.contrast-finder.org/ https://coolors.co/contrast-checker 调色板 https://cssgradient.io/shades-of-blue/

https://developer.chrome.com/docs/devtools/accessibility/contrast?hl=zh-cn#fix-low-contrast https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast https://webaim.org/resources/contrastchecker/ https://developers.google.com/codelabs/devtools-cvd?hl=zh-cn#0 https://color.adobe.com/ja/create/color-wheel https://coolors.co/contrast-checker/112a46-acc8e5 https://cssgradient.io/color-shades/ https://codelabs.developers.google.com/ https://developer.chrome.com/blog/new-in-devtools-111?hl=zh-cn#color [[博客主题切换]]