[发明专利]一种页面对比度自动校准优化的方法

说明书

本发明公开了一种页面对比度自动校准优化的方法，该方法是帮助开发人员快速便捷的将页面中文本颜色及其背景颜色对比度配置到合适的范围。为了实现上述目的，本发明提供了快速检查页面文本颜色与背景颜色对比度并给出修改方案的方法，包括：遍历页面中的中的文本节点，存储字体大小,文本颜色以及背景颜色等信息。通过文本颜色和背景颜色计算出对比度，结合字体大小信息，使用WCAG(Web Content Accessibility Guideline，Web内容无障碍指南)标准规定的对比度基准要求进行检测。在不符合要求的情况下，进行颜色转换，调整对比度。需要确定文本颜色所处的色彩空间，在色彩空间内中找到符合对比度要求且对比度最小的点作为结果返回。

技术领域

本发明涉及计算机技术领域，具体的涉及一种页面对比度自动校准优化的方法。

背景技术

目前，在前端页面展示中，网页上的文字和图形组件需要有合理的对比度，这样才能确保用户拥有正常的使用体验。一方面，这是为了使视力存在衰减问题的用户也能正常阅读页面；另一方面，随着手机的兴起，用户的使用场景被大大扩展，其中就包括亮光环境，这种环境对页面元素的对比度提出了更高的要求。一般而言，页面文本和背景的对比，对比度最低应该达到4.5，更为推荐的是7。作为参照，白色背景上的白色文字的对比度为1，这是无法感知的。白色背景上的黑色文字的对比度为21。

但是，本申请发明人在实现本发明的过程中发现：现有页面中，元素间的对比度常常无法满足标准，这些对比度过低的页面会影响用户的识别效率，用户体验因此下降了，而在一般的编写代码过程中开发人员很难兼顾到对比度的设定。因此，需要提供一个可以自动化检测页面元素对比度，并直接提供修改建议的工具。

发明内容

鉴于上述问题，本发明实施例提供了页面对比度自动校准优化的方法、装置、设备及存储介质，其目的主要在于使开发人员快速便捷的将页面中文本颜色及其背景颜色对比度配置到合适的范围。为了实现上述目的，本发明提供了快速检查页面文本颜色与背景颜色对比度并给出修改方案的方法。

一种页面对比度自动校准优化的方法，该方法包括以下步骤：

(1)用户将本模块引入项目并初始化该模块，于服务器端运行项目；

(2)服务被触发，筛选页面中所有的文本节点；

(3)获取各个文本节点的颜色和背景颜色；

(4)检查其对比度是否符合标准，计算出符合对比度要求的颜色值；

(5)重新渲染页面，将结果返回用户。

进一步地，所述步骤(1)包括如下子步骤：

(1.1)用户将本模块通过es模块方式局部引入或者通过script标签的方式全局引入项目；再在项目的根文件中对模块进行初始化，即用户对本模块进行配置；

(1.2)之后用户于服务器端运行项目，其模块为手动或自动的运行。

进一步地，所述步骤(1.1)中的对模块进行初始化，包括如下子步骤：

(1.1.1)将模块的运行环境设置为测试环境-0，生产环境-1，所有环境-2，默认0；

(1.1.2)将模块的运行方式设置为手动运行-0，自动运行-1，手动运行通过Crtl+k的组合按键触发；自动模式会监听加载事件，事件触发后，自动执行模块，默认0；

(1.1.3)将模块的运行范围通过提供id的方式指定被检查的元素，当用户提供了此值，模块运行时通过id获取页面元素的方法取得该节点，并从节点处开始运行；如果未提供，会直接从页面的html标签开始运行，默认为空。

进一步地，所述步骤(2)包括如下子步骤：