一种页面对比度自动校准优化的方法与流程

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

背景技术：

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

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

技术实现思路

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16、(2.1)服务依照步骤(1)中设定的模块运行方式被触发，触发后会使用dom方法document.createtreewalker()生成节点树遍历器treewalker实例；所述该模块运行方式接收的参数为：根节点root、展示的结点类型whattoshow和节点过滤器filter；

17、所述参数root代表需要被遍历的根节点，其被设置为用户在上一步中设定的模块运行范围；

18、所述参数whattoshow代表需要使用节点树遍历器treewalker筛选出什么类型的结点，根据本工具的需求，需要筛选文本类型的节点，填写文本节点对应的位掩码编号；

19、所述参数filter，是一个具有可接受的节点方法的对象，用于进一步筛选通过whattoshow检查的节点；

20、(2.2)遍历节点树遍历器treewalker，使用父节点treewalker.parentnode直接获取到当前文本的父节点，并存储下来；

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

22、(3.1)遍历已经获取到的节点，可以直接通过读取颜色属性获取到被设定的文本的颜色，这里采用rgba的格式表示颜色，在编程实例中表示为一个包含四个元素的数组，前3位为整数数字类型，后一位为小数类型，此外还需要获取字体大小font-size属性，得到文本的字体大小；所需要获取文本的背景颜色，需判断父节点中背景颜色是否透明；

23、当查询到的背景颜色被设置了小于1的透明度时，需要继续对父节点取父节点，并获取所对应的背景颜色。

24、重复获取祖先节点，并检查背景颜色，直到查询到的节点对应的背景颜色不为透明或者已经遍历到了整个文档的根节点。

25、接着使用获取到的颜色计算出实际被显示出来的颜色；

26、(3.2)计算对比度：使用不含透明度信息的rgb值，即将背景颜色backgroundcolor和文本颜色进行进一步的转化，由rgba格式转化为rgb格式，使用以下公式：

27、y＝math.round(255–alpha*(255–x))

28、其中x指原始的rgb值，alpha指被设定的透明度，y指经过计算得到的不透明等效rgb值；

29、得到转化完成的背景颜色与文本颜色；

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

31、(4.1)对于页面中对比度的要求，以存在的正式的标准作为评判标准；根据该评判标准，其页面中文本对比度的最低标准为4.5：1，当文本的字体大小超过24px，文本对比度的最低标准为3：1；构建对比度计算方法用于计算对比度；

32、(4.2)计算出符合对比度要求的颜色值，从而提供符合对比度需求的颜色；

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

34、(4.1.1)对比度计算方法接收两个rgb数组rgb1、rgb2作为参数，数组分别由r，g，b三个值组成；首先，计算rgb1，rgb2的亮度，这里可以使用公式：

35、l＝0.2126*r+0.7152*g+0.0722*b其中，r、g和b的定义如下：

36、如果r srgb<＝0.03928，那么r＝r srgb/12.92，否则r＝((r srgb+0.055)/1.055)^2.4

37、如果g srgb<＝0.03928，那么g＝g srgb/12.92，否则g＝((g srgb+0.055)/1.055)^2.4

38、如果b srgb<＝0.03928，那么b＝b srgb/12.92，否则b＝((b srgb+0.055)/1.055)^2.4

39、而r srgb、g srgb和b srgb的定义如下：

40、r srgb＝r/255；g srgb＝g/255；b srgb＝b/255

41、得到字体颜色和背景颜色的亮度l1和l2，比较l1和l2的大小，取其中的较小者为lmin，较大者为lmax。

42、(4.1.2)使用以下公式计算对比度：(lmin+0.05)/(lmax+0.05)，得到对比度；

43、(4.1.3)检查对比度，对于font-size小于24px的情况，对比度需要不小于4.5；大于24px的情况，对比度需要不小于3；如果符合要求，则跳过后续处理步骤；如果不符合要求，进入下一步，计算出合适的文本颜色值。

44、进一步地，所述步骤(4.2)中对于需要提供的符合对比度需求的颜色，其要求具体为：

45、(4.2.1)与原本的字体的颜色存在与相同的色彩空间colormap；

46、(4.2.2)在上述色彩空间内，被返回的颜色不仅要符合对比度要求，还需要与原字体颜色的几何距离最短；

47、(4.2.3)符合上述要求的节点将会被作为结果返回；

48、对于所有不符合对比度要求的文本节点，进行轮询操作分别计算出可以作为替代的文本颜色值；由于页面中存在很多有着相同颜色配置的文本节点，当程序计算出一种颜色配置下的合适的颜色替代值后，则进行存缓；当后续执行时遇到相同颜色配置的节点时，直接将存缓的结果返回；

49、所述步骤(4.2.3)中轮询操作的具体步骤如下：

50、(4.2.3.1)需要确定当前颜色currentcolor在保持色调不变的情况下的色彩空间，其为一个二维数组，数组中每一个元素就是一个rgb数组，元素的数组下标可以被记录为[x,y]；其中x是内部数组在外部数组的位置，y是元素在内部数组的位置，元素1与元素2之间的距离使用公式d＝(x1–x2)2+(y1-y2)2计算，d值的大小与几何距离呈正相关；

51、(4.2.3.2)将当前颜色的变量名设为当前颜色，一个由red，green，blue三个数字类型的变量组成的数组；通过以下步骤确认色彩空间：

52、(4.2.3.2.1)获取当前颜色中的最小值，中间值与最大值的下标，minindex,midindex,maxindex；

53、(4.2.3.2.2)设置一个新的数组变量rightstart，rightstart[minindex],rightstart[maxindex]分别设为0，255；

54、(4.2.3.2.3)使用公式：

55、rightstart[midindex]＝currentcolor[midindex]–(255-currentcolor[midindex])/(255-currentcolor[minindex])*currentcolor[minindex]；

56、设置rightend[midindex]；

57、(4.2.3.2.4)设置变量leftstart为[255,255,255]；

58、(4.2.3.2.5)可以构建从leftstart到rightstart长度为256的连续数组starts，数组中第0位为leftstart，第256位为rightstart；数组中的每一位依照一下公式确定：

59、start[n][maxindex]＝255；

60、start[n][minindex]＝start[n-1][minindex]–1；

61、lastmid＝start[n-1][midindex]–(256-rightstart[midindex])/256；

62、start[n][midindex]＝math.round(lastmid)；

63、其中，start是生成数组过程中每一个rgb数组，lastmid表示上一步中计算得到的midindex位置对应实际运算结果，因为rgb格式的颜色数据需要每一位都是整数形式保存，所以需要对结果进行取整，并将结果进行存缓，在下一轮计算中使用，为每一个数组提供正确的start[midindex]；

64、(4.2.3.2.6)对与starts数组中的每一项可以构建从start到[0,0,0],长度为256的连续降序数组颜色列表colorlist，第一位为start，最后一位为[0,0,0]；颜色列表中的每一项可以通过以下公式进行计算：

65、temp[k]＝color[i][j-1][k]–color[i][0][k]/256；

66、color[i][j][k]＝math.round(temp[k])；

67、其中，i表示在颜色列表在色彩空间的位置，j表示color在颜色列表中的位置，k表示color中三个元素的值，可取范围为0，1，2，对每一轮运算的结果结果进行取整和保存；

68、(4.2.3.2.7)最终可以得到一个总数量为256*256的3维数组，色彩空间，数组中的每一项为三个数字组成的数字，分别代表red，green和blue；

69、即可构建符合要求的色彩空间，是找出此空间所有符合对比度要求的点，即在上述的每一个颜色列表中找到最多一点，若此点符合对比度的要求，且对比度的值是颜色列表中所有符合对比度要求的点中最小的一个；接着从这些点中找到与当前颜色最接近的一点，作为结果返回；具体步骤如下所述：

70、(a)首先，由色彩空间中的数据连续分布的特性得到色彩空间中符合条件的点，从色彩空间的两端开始计算，获取符合要求的点，当两端的点被确定后，就可以为中间部分的点设定上下限；

71、(b)确定开始遍历的方向,如果字体颜色的亮度大于背景颜色的亮度，则从start开始计算对比度；如果背景亮度大于字体亮度，则从end开始计算；因为在整个二维的色彩空间内，每一列颜色列表都是从start到end颜色逐渐加深，绝对亮度越来越小，所以对于明亮的背景，end处的颜色对比度最大，反之，start处的对比度最大；

72、如果初始点无法达到对比度要求，直接跳过当前的颜色列表，遍历相邻的未被检查的下一个颜色列表；如果达到了对比度要求，使用二分法，求出需要的点；

73、(c)结合上述两点，从色彩空间的第一项和最后一项进行处理，得到上下边界坐标左边界，右边界；它们都是包含元素的数组，第一位表示数据在色彩空间中的位置，第二位表示数据在颜色列表中的位置。

74、(d)检查左边界与右边界的值，如果都在当前颜色坐标的一侧，则结束检查，将距离当前颜色近的作为结果返回。

75、(e)通过左边界leftboundary与右边界rightboundary设定的坐标边界，遍历区域中间的颜色列表,得到所有符合条件的节点。

76、(f)使用二分法在所有坐标中查找距离当前颜色currentcolor最近的点，作为结果返回。

77、(6)重新渲染页面，将结果返回用户：

78、得到修正后的颜色配置后，使用javascript操作dom元素修改页面的渲染效果，展示给用户。同时将结果输出为css文件，方便用户添加到项目中。

79、具体的，可以生成一个锚点元素，将其设置为下载类型，设定好文件名，文件内容。模拟点击事件，触发文件的下载。

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

81、(3.1.1)利用颜色混合的方法实现颜色的合并，并接受一个由多个包含四个元素的rgba数组组成的rgba数组作为参数，在其内部设置了rgba数组result用于储存计算结果并返回，初始赋值为rgbalist[0]；在方法的运行过程中，会从rgbalist[1]开始遍历rgba数组，首先使用如下公式计算出叠加后的综合透明度mixedalpha：

82、mixedalpha＝1–(1-result[3])*(1-ragb[3])

83、其中ragb指遍历中rgba数组中的每一个元素，[3]指读取result和rgba的第四位元素，即代表透明度的元素。

84、(3.1.2)接着利用mixedalpha，使用下列公式计算出混合后rgb对应的数值：

85、result[n]＝math.round((rgba[n]*rgba[3]/mixedalpha)+(result[n]*result[3])*(1–rgba[3])/mixedalpha))

86、其中n取0，1，2，一轮的计算完成后将result[3]赋值为mixedalpha，并进入下一轮循环。

87、(3.1.3)当循环结束后，就可以得到最终被渲染出的backgroundcolor。

88、接着结合backgroundcolor与之前获取的文本颜色，再次使用步骤(3.1.2)的公式可以得到被渲染出的文本颜色textcolor。

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

90、(4.1)对比度计算方法接收两个rgb数组rgb1、rgb2作为参数，数组分别由r，g，b三个值组成；首先，计算rgb1，rgb2的亮度，这里可以使用公式：

91、l＝0.2126*r+0.7152*g+0.0722*b其中，r、g和b的定义如下。

92、如果r srgb<＝0.03928，那么r＝r srgb/12.92，否则r＝((r srgb+0.055)/1.055)^2.4

93、如果g srgb<＝0.03928，那么g＝g srgb/12.92，否则g＝((g srgb+0.055)/1.055)^2.4

94、如果b srgb<＝0.03928，那么b＝b srgb/12.92，否则b＝((b srgb+0.055)/1.055)^2.4

95、而r srgb、g srgb和b srgb的定义如下：

96、r srgb＝r/255；g srgb＝g/255；b srgb＝b/255

97、得到字体颜色和背景颜色的亮度l1和l2，比较l1和l2的大小，取其中的较小者为lmin，较大者为lmax。

98、(4.2)使用以下公式计算对比度：(lmin+0.05)/(lmax+0.05)，得到对比度。

99、(4.3)检查contrastratio，对于font-size小于24px的情况，contrastratio需要不小于4.5；大于24px的情况，contrastratio需要不小于3；如果符合要求，则跳过后续处理步骤；如果不符合要求，进入下一步，计算出合适的文本颜色值。

100、本发明的有益效果如下：

101、改善网页的使用体验。在如今日益数字化的时代，网页已经成为人们获取信息和进行交流的主要方式之一。然而，由于每个人的视力不同，许多用户可能会遇到一些阅读和使用困难，这可能导致他们无法正确地理解网页上的信息或无法使用网页上的功能。为了解决这个问题，我们需要提高网页的对比度，使页面中的文字和其他元素更加清晰可见，这有助于保证更多的用户，特别是有视力障碍的人士，可以更轻松地浏览和使用网页提供的功能，从而扩大用户群体。

102、提升开发效率。除了改善用户体验之外，提高网页对比度还可以帮助开发人员提高效率。对比度校准是一种自动化的技术，它可以在不影响其他方面的情况下，自动调整网页元素的颜色和亮度，从而提高网页的可读性和可用性。这种技术可以让开发人员节省大量时间和精力，专注于业务代码的开发，提高开发效率，节约成本。