当前位置: 首页>资讯中心>网站建设>文章正文

如何利用Chrome DevTools提升网站用户体验?

发布时间:2020-08-24 17:13访问人数:来源:浪知潮网络

如何利用Chrome DevTools提升网站用户体验?

提高网站用户体验的最重要方面之一是确保您的文本可读。创建可读的文本意味着确保您的网站建设中的文本颜色和背景颜色之间具有足够的颜色对比。

例如,查看示例中白色背景上的紫色文本。这种对比水平都很好:

良好的文字对比度示例

但是,如果我们使文本变浅,则可以很快达到对比度太低且难以阅读的程度:

现在,调整后的相同文字的对比度不好

现在,调整后的相同文字的对比度不好

这可能是一个相对简单的概念,但是在实践中确保足够的对比实际上有些棘手。有时颜色对比看起来不错,但实际上可能无法达到标准。那么,如何确定我们的颜色对比度级别对可访问性友好呢?这就是Chrome DevTools可以提供帮助的地方。

Chrome DevTools如何提供帮助

您会在上面的屏幕截图中注意到我们看到了Chrome DevTools颜色选择器。如果仔细观察,还可以看到该颜色选择器中还有一些其他信息,例如显示对比度得分,这些信息有助于提供有关颜色选择的反馈。这是最近在Chrome中添加的辅助功能工具的一部分-让我们来看看它如何工作。

注意:您可能会在网上看到一些说明,说您需要启用“开发人员实验”才能使用这些颜色对比检查功能,但现在不再如此。现在,该功能已内置到Chrome和Chromium中。

访问对比度检查器工具

首先打开Chrome / Chromium DevTools,然后在HTML中选择任何文本元素。然后,在“ 样式”选项卡中,找到color属性,并在其右侧单击小色样以打开选择器工具。

选择一个文本元素,然后单击彩色正方形开始

在下面用红色正方形突出显示的区域中,您会看到该文本元素的对比度得分为5.00。该分数来自检测背景元素的颜色并将其与文本的颜色进行比较。 

您还会注意到分数旁边有两个绿色的勾,表示此对比度在可访问性可接受的参数之内。

获得对比度的认可

该基本比率得分很有用,但是要访问所有颜色对比工具,请单击对比度得分右侧的向下箭头。当您将鼠标悬停在其上时,它将显示一个工具提示,显示为显示更多。

扩展工具以获取有关颜色对比度的更多信息

通过扩展本节,我们可以获得一些其他信息。在这里,您会看到理想的对比评分,您应该尝试达到的理想评分,更高的数字代表更强的对比。3.0到4.5之间的分数表示为“ AA”,被认为是最低;而4.5或更高的分数表示为“ AAA”,是理想的。

现在,我们看到了要达到的对比度分数,并且在颜色选择器上显示了“安全”线

不要越界

您还将注意到,一旦展开全色对比工具,颜色选择器的顶部就会出现一条线。这是至少达到“ AA”等级的文字颜色与不符合标准的文字颜色之间的分界线。

注意:您可以非常接近该线,并从“ AAA”评级转换为“ AA”,保持在3.0以上但低于4.5:

尽管不理想,但靠近安全线仍然可以接受

但是,该行上方的所有内容都会带有红色警告符号标记,以告诉您颜色组合带来了可访问性问题:

过线并失去您的AA AAA对比等级

Alpha值调整

您还可以移动位于色相滑块下方的Alpha滑块,并且“安全”行将偏移以说明增加的透明度:

移动Alpha滑块也会移动安全线

哪一边?

要注意的另一件事是,您希望文本颜色落在行的一侧可以根据背景颜色而反转。如果您的文字是深色背景,则您希望文字的颜色显示在线条上方。如果您的文字是浅色背景,则其颜色应低于该线。

在下面,我们看到了这种反演的示例,左图为深色背景,右图为浅背景。注意,还同时预览了文本和背景颜色– 在“ 显示更多”开关下方的圆圈中查找Aa:

在左侧,深色背景上的浅色文本的颜色应在线下方。在右侧深色背景上的浅色文本的颜色应在线下方。

总结

Chrome和Chromium中的这些颜色对比检查工具将大大简化在设计过程中确保可读性的过程。我们需要做的就是快速检查每种文本颜色,在必要时使用颜色选择器进行调整,然后将新颜色重新集成到我们的代码中。

分享:
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

版权:【注明为本站原创的文章,转载请注明出处与原文地址!本站部分转载文章能找到原作者的我们都会注明,若文章涉及版权请发至邮箱:service@langzhichao.com,我们以便及时处理,可支付稿费。向本站投稿或需要本站向贵司网站定期免费投稿请加QQ:1115814032】

SEO按天计费
  • 联系人
  • 电话
  • 邮箱
  • 验证码
    看不清?点击更换

南京浪知潮网络科技有限公司 Copyright © 2012-2019 All Rights Reserved.未经许可,不可拷贝或镜像   网站地图