【技术实现步骤摘要】
一种页面对比度自动校准优化的方法
[0001]本专利技术涉及计算机
，具体的涉及一种页面对比度自动校准优化的方法。
技术介绍
[0002]目前，在前端页面展示中，网页上的文字和图形组件需要有合理的对比度，这样才能确保用户拥有正常的使用体验。一方面，这是为了使视力存在衰减问题的用户也能正常阅读页面；另一方面，随着手机的兴起，用户的使用场景被大大扩展，其中就包括亮光环境，这种环境对页面元素的对比度提出了更高的要求。一般而言，页面文本和背景的对比，对比度最低应该达到4.5，更为推荐的是7。作为参照，白色背景上的白色文字的对比度为1，这是无法感知的。白色背景上的黑色文字的对比度为21。
[0003]但是，本申请专利技术人在实现本专利技术的过程中发现：现有页面中，元素间的对比度常常无法满足标准，这些对比度过低的页面会影响用户的识别效率，用户体验因此下降了，而在一般的编写代码过程中开发人员很难兼顾到对比度的设定。因此，需要提供一个可以自动化检测页面元素对比度，并直接提供修改建议的工具。
技术实现思路
[0004]鉴于上述问题，本专利技术实施例提供了页面对比度自动校准优化的方法、装置、设备及存储介质，其目的主要在于使开发人员快速便捷的将页面中文本颜色及其背景颜色对比度配置到合适的范围。为了实现上述目的，本专利技术提供了快速检查页面文本颜色与背景颜色对比度并给出修改方案的方法。
[0005]一种页面对比度自动校准优化的方法，该方法包括以下步骤：
[0006](1)用户将本模块引入项目并初...
【技术保护点】
【技术特征摘要】
1.一种页面对比度自动校准优化的方法，其特征在于，该方法包括以下步骤：(1)用户将本模块引入项目并初始化该模块，于服务器端运行项目；(2)服务被触发，筛选页面中所有的文本节点；(3)获取各个文本节点的颜色和背景颜色；(4)检查其对比度是否符合标准，计算出符合对比度要求的颜色值；(5)重新渲染页面，将结果返回用户。2.根据权利要求1所述的一种页面对比度自动校准优化的方法，其特征在于，所述步骤(1)包括如下子步骤：(1.1)用户将本模块通过es模块方式局部引入或者通过script标签的方式全局引入项目；再在项目的根文件中对模块进行初始化，即用户对本模块进行配置；(1.2)之后用户于服务器端运行项目，其模块为手动或自动的运行。3.根据权利要求2所述的一种页面对比度自动校准优化的方法，其特征在于，所述步骤(1.1)中的对模块进行初始化，包括如下子步骤：(1.1.1)将模块的运行环境设置为测试环境
‑
0，生产环境
‑
1，所有环境
‑
2，默认0；(1.1.2)将模块的运行方式设置为手动运行
‑
0，自动运行
‑
1，手动运行通过Crtl+k的组合按键触发；自动模式会监听加载事件，事件触发后，自动执行模块，默认0；(1.1.3)将模块的运行范围通过提供id的方式指定被检查的元素，当用户提供了此值，模块运行时通过id获取页面元素的方法取得该节点，并从节点处开始运行；如果未提供，会直接从页面的html标签开始运行，默认为空。4.根据权利要求1所述的一种页面对比度自动校准优化的方法，其特征在于，所述步骤(2)包括如下子步骤：(2.1)服务依照步骤(1)中设定的模块运行方式被触发，触发后会使用DOM方法document.createTreeWalker()生成节点树遍历器treeWalker实例；所述该模块运行方式接收的参数为：根节点root、展示的结点类型whatToShow和节点过滤器filter；所述参数root代表需要被遍历的根节点，其被设置为用户在上一步中设定的模块运行范围；所述参数whatToShow代表需要使用节点树遍历器TreeWalker筛选出什么类型的结点，根据本工具的需求，需要筛选文本类型的节点，填写文本节点对应的位掩码编号；所述参数filter，是一个具有可接受的节点方法的对象，用于进一步筛选通过whatToShow检查的节点；(2.2)遍历节点树遍历器TreeWalker，使用父节点TreeWalker.parentNode直接获取到当前文本的父节点，并存储下来。5.根据权利要求1所述的一种页面对比度自动校准优化的方法，其特征在于，所述步骤(3)包括如下子步骤：(3.1)遍历已经获取到的节点，可以直接通过读取颜色属性获取到被设定的文本的颜色，这里采用rgba的格式表示颜色，在编程实例中表示为一个包含四个元素的数组，前3位为整数数字类型，后一位为小数类型，此外还需要获取字体大小font
‑
size属性，得到文本的字体大小；所需要获取文本的背景颜色，需判断父节点中背景颜色是否透明；当查询到的背景颜色被设置了小于1的透明度时，需要继续对父节点取父节点，并获取
所对应的背景颜色。重复获取祖先节点，并检查背景颜色，直到查询到的节点对应的背景颜色不为透明或者已经遍历到了整个文档的根节点。接着使用获取到的颜色计算出实际被显示出来的颜色；(3.2)计算对比度：使用不含透明度信息的rgb值，即将背景颜色backgroundColor和文本颜色进行进一步的转化，由rgba格式转化为rgb格式，使用以下公式：Y＝Math.round(255
–
Alpha*(255
–
X))其中X指原始的rgb值，Alpha指被设定的透明度，Y指经过计算得到的不透明等效rgb值；得到转化完成的背景颜色与文本颜色。6.根据权利要求1所述的一种页面对比度自动校准优化的方法，其特征在于，所述步骤(4)包括如下子步骤：(4.1)对于页面中对比度的要求，以存在的正式的标准作为评判标准；根据该评判标准，其页面中文本对比度的最低标准为4.5：1，当文本的字体大小超过24px，文本对比度的最低标准为3：1；构建对比度计算方法用于计算对比度；(4.2)计算出符合对比度要求的颜色值，从而提供符合对比度需求的颜色。7.根据权利要求1所述的一种页面对比度自动校准优化的方法，其特征在于，所述步骤(4.1)包括如下子步骤：(4.1.1)对比度计算方法接收两个rgb数组rgb1、rgb2作为参数，数组分别由r，g，b三个值组成；首先，计算rgb1，rgb2的亮度，这里可以使用公式：L＝0.2126*R+0.7152*G+0.0722*B其中，R、G和B的定义如下：如果R sRGB<＝0.03928，那么R＝R sRGB/12.92，否则R＝((R sRGB+0.055)/1.055)^2.4如果G sRGB<＝0.03928，那么G＝G sRGB/12.92，否则G＝((G sRGB+0.055)/1.055)^2.4如果B sRGB<＝0.03928，那么B＝B sRGB/12.92，否则B＝((B sRGB+0.055)/1.055)^2.4而R sRGB、G sRGB和B sRGB的定义如下：R sRGB＝r/255；G sRGB＝g/255；B sRGB＝b/255得到字体颜色和背景颜色的亮度L1和L2，比较L1和L2的大小，取其中的较小者为Lmin，较大者为Lmax。(4.1.2)使用以下公式计算对比度：(Lmin+0.05)/(Lmax+0.05)，得到对比度；(4.1.3)检查对比度，对于font
‑
size小于24px的情况，对比度需要不小于4.5；大于24px的情况，对比度需要不小于3；如果符合要求，则跳过后续处理步骤；如果不符合要求，进入下一步，计算出合适的文本颜色值。8.根据权利要求1所述的一种页面对比度自动校准优化的方法，其特征在于，所述步骤(4.2)中对于需要提供的符合对比度需求的颜色，其要求具体为：(4.2.1)与原本的字体的颜色存在与相同的色彩空间colorMap；(4.2.2)在上述色彩空间内，被返回的颜色不仅要符合对比度要求，还需要与原字体颜
色的几何距离最短；(4.2.3)符合上述要求的节点将会被作为结果返回；对于所有不符合对比度要求的文本节点，进行轮询操作分别计算出可以作为替代的文本颜色值；由于页面中存在很多有着相同颜色配置的文本节点，当程序计算出一种颜色配置下的合适的颜色替代值后，则进行存缓；当后续执行时遇到相同颜色配置的节点时，直接将存缓的结果返回；所述步骤(4.2.3)中轮询操作的具体步骤如下：(4.2.3.1)需要确定当前颜色currentColor在保持色调不变的情况下的色彩空间，其为一个二维数组，数组中每一个元素就是一个rgb数组，元素的数组下标可以被记录为[x,y]；其中x是内部数组在外部数组的位置，y是元素在内部数组的位置，元素1与元素2之间的距离使用公式D＝(x1
–
x2)2+(y1
‑
y2)2计算，D值的大小与几何距离呈正相关；(4.2.3.2)将当前颜色的变量名设为当前颜色，一个由red，green，blue三个数字类型的变量组成的数组；通过以下步骤确认色彩空间：(4.2.3.2.1)获取当前颜色中的最小值，中间值与最大值的下标，minIndex,midIndex,maxIndex；(4.2.3.2.2)设置一个新的数组变量rightStart，rightStart[minIndex],rightStart[maxIndex]分别设为0，255；(4.2.3.2.3)使用公式：rightSta...
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。