CN116578798A - 一种页面对比度自动校准优化的方法 - Google Patents

一种页面对比度自动校准优化的方法 Download PDF

Info

Publication number
CN116578798A
CN116578798A CN202310453391.1A CN202310453391A CN116578798A CN 116578798 A CN116578798 A CN 116578798A CN 202310453391 A CN202310453391 A CN 202310453391A CN 116578798 A CN116578798 A CN 116578798A
Authority
CN
China
Prior art keywords
color
contrast
text
array
page
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202310453391.1A
Other languages
English (en)
Other versions
CN116578798B (zh
Inventor
李劲松
吴晗
周天舒
田雨
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Zhejiang Lab
Original Assignee
Zhejiang Lab
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Zhejiang Lab filed Critical Zhejiang Lab
Priority to CN202310453391.1A priority Critical patent/CN116578798B/zh
Publication of CN116578798A publication Critical patent/CN116578798A/zh
Application granted granted Critical
Publication of CN116578798B publication Critical patent/CN116578798B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/109—Font handling; Temporal or kinetic typography
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Image Generation (AREA)

Abstract

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

Description

一种页面对比度自动校准优化的方法
技术领域
本发明涉及计算机技术领域，具体的涉及一种页面对比度自动校准优化的方法。
背景技术
目前，在前端页面展示中，网页上的文字和图形组件需要有合理的对比度，这样才能确保用户拥有正常的使用体验。一方面，这是为了使视力存在衰减问题的用户也能正常阅读页面；另一方面，随着手机的兴起，用户的使用场景被大大扩展，其中就包括亮光环境，这种环境对页面元素的对比度提出了更高的要求。一般而言，页面文本和背景的对比，对比度最低应该达到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)包括如下子步骤：
(2.1)服务依照步骤(1)中设定的模块运行方式被触发，触发后会使用DOM方法document.createTreeWalker()生成节点树遍历器treeWalker实例；所述该模块运行方式接收的参数为：根节点root、展示的结点类型whatToShow和节点过滤器filter；
所述参数root代表需要被遍历的根节点，其被设置为用户在上一步中设定的模块运行范围；
所述参数whatToShow代表需要使用节点树遍历器TreeWalker筛选出什么类型的结点，根据本工具的需求，需要筛选文本类型的节点，填写文本节点对应的位掩码编号；
所述参数filter，是一个具有可接受的节点方法的对象，用于进一步筛选通过whatToShow检查的节点；
(2.2)遍历节点树遍历器TreeWalker，使用父节点TreeWalker.parentNode直接获取到当前文本的父节点，并存储下来；
进一步地，所述步骤(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值；
得到转化完成的背景颜色与文本颜色；
进一步地，所述步骤(4)包括如下子步骤：
(4.1)对于页面中对比度的要求，以存在的正式的标准作为评判标准；根据该评判标准，其页面中文本对比度的最低标准为4.5：1，当文本的字体大小超过24px，文本对比度的最低标准为3：1；构建对比度计算方法用于计算对比度；
(4.2)计算出符合对比度要求的颜色值，从而提供符合对比度需求的颜色；
进一步地，所述步骤(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；如果符合要求，则跳过后续处理步骤；如果不符合要求，进入下一步，计算出合适的文本颜色值。
进一步地，所述步骤(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)使用公式：
rightStart[midIndex]＝currentColor[midIndex]–(255-currentColor[midIndex])/(255-currentColor[minIndex])*currentColor[minIndex]；
设置rightEnd[midIndex]；
(4.2.3.2.4)设置变量leftStart为[255,255,255]；
(4.2.3.2.5)可以构建从leftStart到rightStart长度为256的连续数组Starts，数组中第0位为leftStart，第256位为rightStart；数组中的每一位依照一下公式确定：
start[n][maxIndex]＝255；
start[n][minIndex]＝start[n-1][minIndex]–1；
lastMid＝start[n-1][midIndex]–(256-rightStart[midIndex])/256；
start[n][midIndex]＝Math.round(lastMid)；
其中，start是生成数组过程中每一个rgb数组，lastMid表示上一步中计算得到的midIndex位置对应实际运算结果，因为rgb格式的颜色数据需要每一位都是整数形式保存，所以需要对结果进行取整，并将结果进行存缓，在下一轮计算中使用，为每一个数组提供正确的start[midIndex]；
(4.2.3.2.6)对与starts数组中的每一项可以构建从start到[0,0,0],长度为256的连续降序数组颜色列表colorlist，第一位为start，最后一位为[0,0,0]；颜色列表中的每一项可以通过以下公式进行计算：
temp[k]＝color[i][j-1][k]–color[i][0][k]/256；
color[i][j][k]＝Math.round(temp[k])；
其中，i表示在颜色列表在色彩空间的位置，j表示color在颜色列表中的位置，k表示color中三个元素的值，可取范围为0，1，2，对每一轮运算的结果结果进行取整和保存；
(4.2.3.2.7)最终可以得到一个总数量为256*256的3维数组，色彩空间，数组中的每一项为三个数字组成的数字，分别代表red，green和blue；
即可构建符合要求的色彩空间，是找出此空间所有符合对比度要求的点，即在上述的每一个颜色列表中找到最多一点，若此点符合对比度的要求，且对比度的值是颜色列表中所有符合对比度要求的点中最小的一个；接着从这些点中找到与当前颜色最接近的一点，作为结果返回；具体步骤如下所述：
(a)首先，由色彩空间中的数据连续分布的特性得到色彩空间中符合条件的点，从色彩空间的两端开始计算，获取符合要求的点，当两端的点被确定后，就可以为中间部分的点设定上下限；
(b)确定开始遍历的方向,如果字体颜色的亮度大于背景颜色的亮度，则从start开始计算对比度；如果背景亮度大于字体亮度，则从end开始计算；因为在整个二维的色彩空间内，每一列颜色列表都是从start到end颜色逐渐加深，绝对亮度越来越小，所以对于明亮的背景，end处的颜色对比度最大，反之，start处的对比度最大；
如果初始点无法达到对比度要求，直接跳过当前的颜色列表，遍历相邻的未被检查的下一个颜色列表；如果达到了对比度要求，使用二分法，求出需要的点；
(c)结合上述两点，从色彩空间的第一项和最后一项进行处理，得到上下边界坐标左边界，右边界；它们都是包含元素的数组，第一位表示数据在色彩空间中的位置，第二位表示数据在颜色列表中的位置。
(d)检查左边界与右边界的值，如果都在当前颜色坐标的一侧，则结束检查，将距离当前颜色近的作为结果返回。
(e)通过左边界LeftBoundary与右边界RightBoundary设定的坐标边界，遍历区域中间的颜色列表,得到所有符合条件的节点。
(f)使用二分法在所有坐标中查找距离当前颜色currentColor最近的点，作为结果返回。
(6)重新渲染页面，将结果返回用户：
得到修正后的颜色配置后，使用javaScript操作DOM元素修改页面的渲染效果，展示给用户。同时将结果输出为css文件，方便用户添加到项目中。
具体的，可以生成一个锚点元素，将其设置为下载类型，设定好文件名，文件内容。模拟点击事件，触发文件的下载。
进一步地，所述步骤(3.1)包括如下子步骤：
(3.1.1)利用颜色混合的方法实现颜色的合并，并接受一个由多个包含四个元素的rgba数组组成的rgba数组作为参数，在其内部设置了rgba数组result用于储存计算结果并返回，初始赋值为rgbaList[0]；在方法的运行过程中，会从rgbaList[1]开始遍历rgba数组，首先使用如下公式计算出叠加后的综合透明度mixedAlpha：
mixedAlpha＝1–(1-result[3])*(1-ragb[3])
其中ragb指遍历中rgba数组中的每一个元素，[3]指读取result和rgba的第四位元素，即代表透明度的元素。
(3.1.2)接着利用mixedAlpha，使用下列公式计算出混合后rgb对应的数值：
result[n]＝Math.round((rgba[n]*rgba[3]/mixedAlpha)+(result[n]*result[3])*(1–rgba[3])/mixedAlpha))
其中n取0，1，2，一轮的计算完成后将result[3]赋值为mixedAlpha，并进入下一轮循环。
(3.1.3)当循环结束后，就可以得到最终被渲染出的backgroundColor。
接着结合backgroundColor与之前获取的文本颜色，再次使用步骤(3.1.2)的公式可以得到被渲染出的文本颜色textColor。
进一步地，所述步骤(4.1)包括如下子步骤：
(4.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.2)使用以下公式计算对比度：(Lmin+0.05)/(Lmax+0.05)，得到对比度。
(4.3)检查contrastRatio，对于font-size小于24px的情况，contrastRatio需要不小于4.5；大于24px的情况，contrastRatio需要不小于3；如果符合要求，则跳过后续处理步骤；如果不符合要求，进入下一步，计算出合适的文本颜色值。
本发明的有益效果如下：
改善网页的使用体验。在如今日益数字化的时代，网页已经成为人们获取信息和进行交流的主要方式之一。然而，由于每个人的视力不同，许多用户可能会遇到一些阅读和使用困难，这可能导致他们无法正确地理解网页上的信息或无法使用网页上的功能。为了解决这个问题，我们需要提高网页的对比度，使页面中的文字和其他元素更加清晰可见，这有助于保证更多的用户，特别是有视力障碍的人士，可以更轻松地浏览和使用网页提供的功能，从而扩大用户群体。
提升开发效率。除了改善用户体验之外，提高网页对比度还可以帮助开发人员提高效率。对比度校准是一种自动化的技术，它可以在不影响其他方面的情况下，自动调整网页元素的颜色和亮度，从而提高网页的可读性和可用性。这种技术可以让开发人员节省大量时间和精力，专注于业务代码的开发，提高开发效率，节约成本。
附图说明
为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1为本申请实施例提供的一种页面对比度自动校准优化的方法的流程示意图；
图2为本申请实施例提供的一种页面对比度自动校准优化的方法中子流程的流程示意图。
具体实施方式
除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。
在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。
下面将结合附图和实施方式对本发明进行详细说明。
需要说明的是，本申请实施例所提供的页面对比度自动校准优化的方法一般由服务器执行，相应地，页面对比度自动校准优化的装置一般配置于服务器中。
请参阅图1，图1示出了页面对比度自动优化的方法的一种具体实施方式。从程序角度而言，流程的执行主体可以为搭载于应用服务器的程序或应用客户端。
如图1所示，该流程可以包括以下步骤：
步骤1：用户将本模块引入项目，并初始化模块，之后运行项目。
具体的，引入方式可以是通过es模块方式局部引入，也可以通过script标签的方式全局引入。引入后，用户在项目的根文件中对模块进行初始化。初始化的过程中，用户对本模块进行配置，可配置的内容包括模块的运行环境，模块的运行方式，模块的运行范围。
具体的，模块的运行环境可以设置为测试环境-0，生产环境-1，所有环境-2，默认0；
具体的，模块的运行方式可以设置为手动运行-0，自动运行-1，手动运行通过Crtl+k的组合按键触发。自动模式会监听加载事件，事件触发后，自动执行模块。默认0。
具体的，模块的运行范围指可以通过提供id的方式指定被检查的元素，当用户提供了此值，模块运行时会通过id获取页面元素的方法取得该节点，并从节点处开始运行；如果未提供，会直接从页面的html标签开始运行，默认为空。
之后用户可以于服务器端运行项目，模块可以手动或自动的运行。
步骤2：服务被触发，筛选页面中所有的文本节点。
具体的，服务会依照上一步中设定的模块运行方式被触发，触发后会使用DOM方法，document.createTreeWalker()生成节点树遍历器TreeWalker实例。该方式接受3个参数，根节点(root)、展示的结点类型(whatToShow)、节点过滤器(filter)。
具体的，参数root代表需要被遍历的根节点，这里会被设置为用户在上一步中设定的模块运行范围；参数whatToShow代表需要使用TreeWalker筛选出什么类型的结点，根据本工具的需求，需要筛选文本类型的节点，因此填写文本节点对应的位掩码编号
NodeFilter.SHOW_TEXT(4)；第三个参数filter，是一个具有可接受的节点(acceptNode)方法的对象，可以用来进一步筛选通过whatToShow检查的节点，在本工具的使用案例中，带有空格，换行符的节点会通过whatToShow的检查，所以需要进一步设置filter，剔除不含实际有意义文本的节点。
遍历节点树遍历器(TreeWalker)，因为纯文本节点不包含有效的属性与方法，所以处理时使用父节点TreeWalker.parentNode直接获取到当前文本的父节点，并存储下来。
步骤3：获取各个文本的节点的颜色，以及背景颜色(backgroundColor)。
具体的，遍历已经获取到的节点，可以直接通过读取颜色属性获取到被设定的文本的颜色，这里采用rgba的格式表示颜色，在编程实例中表示为一个包含四个元素的数组，前3位为整数数字类型，后一位为小数类型，此外还需要获取字体大小(font-size)属性，得到文本的字体大小。
具体的，如图2所示，如果需要获取文本的背景颜色，需要考虑到父结点中背景颜色可能为透明的情况。
当查询到的背景颜色被设置了小于1的透明度时，需要继续对父节点取父节点，并获取所对应的背景颜色。
重复上述步骤，直到查询到的节点对应的背景颜色不为透明或者已经遍历到了整个文档的根节点。
接着使用获取到的颜色计算出实际被显示出来的颜色。
具体的，实现了颜色混合(blendColor)方法，用于实现颜色的合并。方法会接受一个由多个包含四个元素的rgba数组组成的数组rgba数组(rgbaList)作为参数，在方法内部设置了rgba数组result用于储存计算结果并返回，初始赋值为rgbaList[0]。在方法的运行过程中，会从rgbaList[1]开始遍历rgba数组，首先使用如下公式计算出叠加后的综合透明度mixedAlpha：
mixedAlpha＝1–(1-result[3])*(1-ragb[3])
其中ragb指遍历中rgbaList(rgba数组)中的每一个元素，[3]指读取result和rgba的第四位元素，即代表透明度的元素。
接着使用mixedAlpha，使用下列公式计算出混合后rgb对应的数值：
result[n]＝Math.round((rgba[n]*rgba[3]/mixedAlpha)+(result[n]*
result[3])*(1–rgba[3])/mixedAlpha))
其中n取0，1，2，一轮的计算完成后将result[3]赋值为mixedAlpha，并进入下一轮循环。
当循环结束后，就可以得到最终被渲染出的背景颜色。
接着结合背景颜色与之前获取的文本颜色(textColor)，使用上述公式可以得到被渲染出的文本颜色。
因为，在下一步的计算对比度的过程中，需要使用的是不含透明度信息的rgb值，所以需要将背景颜色和文本颜色进行进一步的转化，由rgba格式转化为rgb格式，使用以下公式：
Y＝Math.round(255–Alpha*(255–X))；
其中X指原始的rgb值，Alpha指被设定的透明度，Y指经过计算得到的不透明等效rgb值。
得到转化完成的背景颜色与文本颜色进入下一步。
步骤4：检查对比度。
对于页面中对比度的要求，存在正式的标准，因此本方法将使用此标准作为评判标准。根据标准，页面中文本对比度的最低标准为4.5：1，如果文本的字体大小超过24px，文本对比度的最低标准为3：1。这里将构建对比度计算(caculateContrast)方法用于计算对比度。
具体的，对比度计算方法接收两个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而RsRGB、G sRGB和B sRGB的定义如下：
R sRGB＝r/255；G sRGB＝g/255；B sRGB＝b/255；
如此，就可以得到字体颜色和背景颜色的亮度L1和L2，比较L1和L2的大小，取其中的较小者为Lmin，较大者为Lmax。
使用以下公式计算对比度：(Lmin+0.05)/(Lmax+0.05)，得到对比度。检查对比度，对于font-size小于24px的情况，对比度需要不小于4.5；大于24px的情况，对比度需要不小于3。如果符合要求，则跳过后续处理步骤；如果不符合要求，进入下一步，计算出合适的文本颜色值。
步骤5：计算出符合对比度要求的颜色值。
对于需要提供的符合对比度需求的颜色，需要满足以下要求：
a.与原本的字体的颜色存在与相同的色彩空间。
b.在上述色彩空间内，被返回的颜色不仅要符合对比度要求，还需要与原字体颜色的几何距离最短。
符合上述要求的节点将会被作为结果返回。对于所有不符合对比度要求的文本节点，进行轮询分别计算出可以作为替代的文本颜色值。因为页面中会存在很多有着相同颜色配置的文本节点，为了提升程序的运行效率，当程序计算出一种颜色配置下的合适的颜色替代值后，可以进行存缓。当后续执行时遇到相同颜色配置的节点时，可以直接将存缓的结果返回，提升方法的运行效率。下面，将针对轮询操作中的具体步骤进行详细的解释。
首先，需要确定当前颜色在保持色调不变的情况下的色彩空间(colorMap)，这是一个二维数组，数组中每一个元素就是一个rgb数组，元素的数组下标可以被记录为[x,y]。其中x是内部数组在外部数组的位置，y是元素在内部数组的位置，元素1与元素2之间的距离可以使用公式D＝(x1–x2)2+(y1-y2)2计算，D越小，代表几何距离最近。
将当前颜色的变量名设为当前颜色，一个由red，green，blue三个数字类型的变量组成的数组。通过以下步骤确认色彩空间：
S1:获取当前颜色中的最小值，中间值与最大值的下标，minIndex,midIndex,maxIndex；
S2:设置一个新的数组变量rightStart，rightStart[minIndex],rightStart[maxIndex]分别设为0，255。
S3:使用公式：
rightStart[midIndex]＝currentColor[midIndex]–(255-currentColor[midIndex])/(255-currentColor[minIndex])*currentColor[minIndex]；
设置rightEnd[midIndex]；
S4:设置变量leftStart为[255,255,255]；
S5:可以构建从leftStart到rightStart长度为256的连续数组Starts，数组中第0位为leftStart，第256位为rightStart。数组中的每一位依照一下公式确定：
start[n][maxIndex]＝255；
start[n][minIndex]＝start[n-1][minIndex]–1；
lastMid＝start[n-1][midIndex]–(256-rightStart[midIndex])/256；
start[n][midIndex]＝Math.round(lastMid)；
其中，start是生成数组过程中每一个rgb数组，lastMid表示上一步中计算得到的midIndex位置对应实际运算结果，因为rgb格式的颜色数据需要每一位都是整数形式保存，所以需要对结果进行取整，并将结果进行存缓，在下一轮计算中使用，为每一个数组提供正确的start[midIndex]。
S6:对与starts数组中的每一项可以构建从start到[0,0,0],长度为256的连续降序数组背景颜色，第一位为start，最后一位为[0,0,0]。颜色列表(colorlist)中的每一项可以通过以下公式进行计算：
temp[k]＝color[i][j-1][k]–color[i][0][k]/256；
color[i][j][k]＝Math.round(temp[k])；
其中，i表示在颜色列表在色彩空间的位置，j表示颜色在颜色列表中的位置，k表示颜色中三个元素的值，可取范围为0，1，2。与上一步所述原因相同，需要对每一轮运算的结果结果进行取整和保存。
S7:最终可以得到一个总数量为256*256的3维数组，色彩空间，数组中的每一项为三个数字组成的数字，分别代表red，green，blue。
综上所述，即可构建符合要求的色彩空间，现在需要找出此空间所有符合对比度要求的点，即在上述的每一个颜色列表中找到最多一点，此点符合对比度的要求，且对比度的值是颜色列表中所有符合对比度要求的点中最小的一个。接着从这些点中找到当前颜色最接近的一点，作为结果返回。具体步骤如下所述：
首先，由于色彩空间中的数据连续分布的特性，易知色彩空间中符合条件的点，从二维空间的角度看，会很接近一条连续的曲线，所以可以从色彩空间的两端开始计算，获取符合要求的点，当两端的点被确定后，就可以为中间部分的点设定上下限，从而减少计算范围，提升效率。
接着要确定开始遍历的方向。如果字体颜色的亮度大于背景颜色的亮度，则从start开始计算对比度；如果背景亮度大于字体亮度，则从end开始计算。因为在整个二维的色彩空间内，每一列颜色列表都是从start到end颜色逐渐加深，绝对亮度越来越小，所以对于明亮的背景，end处的颜色对比度最大，反之，start处的对比度最大。
如果初始点无法达到对比度要求，直接跳过当前的颜色列表，遍历相邻的未被检查的下一个颜色列表；如果达到了，使用二分法，求出需要的点。
结合上述两点，从色彩空间的第一项和最后一项进行处理，得到上下边界坐标LeftBoundary(左边界)，RightBoundary(右边界)。它们都是包含元素的数组，第一位表示数据在色彩空间中的位置，第二位表示数据在颜色列表中的位置。
检查左边界与右边界的值，如果都在当前颜色坐标的一侧，则结束检查，将距离当前颜色近的作为结果返回。
通过左边界与右边界设定的坐标边界，遍历区域中间的颜色列表,得到所有符合条件的节点。
使用二分法在所有坐标中查找距离当前颜色(currentColor)最近的点，作为结果返回。
步骤六：重新渲染页面，将结果返回用户。
得到修正后的颜色配置后，使用javaScript操作DOM元素修改页面的渲染效果，展示给用户。同时将结果输出为css文件，方便用户添加到项目中。
具体的，可以生成一个锚点元素，将其设置为下载类型，设定好文件名，文件内容。模拟点击事件，触发文件的下载。
本申请实施例提供了一种电子设备，包括存储器以及处理器，所述存储器用于存储计算机程序，所述处理器运行所述计算机程序以使所述电子设备执行本申请实施例的页面对比度自动校准优化的方法。
本申请实施例提供了一种计算机可读存储介质，其存储有计算机程序指令，所述计算机程序指令被一处理器读取并运行时，执行本申请实施例的页面对比度自动校准优化的方法。
在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
另外，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。
所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述仅为本申请的实施例而已，并不用于限制本申请的保护范围，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应所述以权利要求的保护范围为准。
需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

Claims (10)

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)使用公式：
rightStart[midIndex]＝currentColor[midIndex]–(255-currentColor[midIndex])/(255-currentColor[minIndex])*currentColor[minIndex]；
设置rightEnd[midIndex]；
(4.2.3.2.4)设置变量leftStart为[255,255,255]；
(4.2.3.2.5)可以构建从leftStart到rightStart长度为256的连续数组Starts，数组中第0位为leftStart，第256位为rightStart；数组中的每一位依照一下公式确定：
start[n][maxIndex]＝255；
start[n][minIndex]＝start[n-1][minIndex]–1；
lastMid＝start[n-1][midIndex]–(256-rightStart[midIndex])/256；
start[n][midIndex]＝Math.round(lastMid)；
其中，start是生成数组过程中每一个rgb数组，lastMid表示上一步中计算得到的midIndex位置对应实际运算结果，因为rgb格式的颜色数据需要每一位都是整数形式保存，所以需要对结果进行取整，并将结果进行存缓，在下一轮计算中使用，为每一个数组提供正确的start[midIndex]；
(4.2.3.2.6)对与starts数组中的每一项可以构建从start到[0,0,0],长度为256的连续降序数组颜色列表colorlist，第一位为start，最后一位为[0,0,0]；颜色列表中的每一项可以通过以下公式进行计算：
temp[k]＝color[i][j-1][k]–color[i][0][k]/256；
color[i][j][k]＝Math.round(temp[k])；
其中，i表示在颜色列表在色彩空间的位置，j表示color在颜色列表中的位置，k表示color中三个元素的值，可取范围为0，1，2，对每一轮运算的结果结果进行取整和保存；
(4.2.3.2.7)最终可以得到一个总数量为256*256的3维数组，色彩空间，数组中的每一项为三个数字组成的数字，分别代表red，green和blue；
即可构建符合要求的色彩空间，是找出此空间所有符合对比度要求的点，即在上述的每一个颜色列表中找到最多一点，若此点符合对比度的要求，且对比度的值是颜色列表中所有符合对比度要求的点中最小的一个；接着从这些点中找到与当前颜色最接近的一点，作为结果返回；具体步骤如下所述：
(a)首先，由色彩空间中的数据连续分布的特性得到色彩空间中符合条件的点，从色彩空间的两端开始计算，获取符合要求的点，当两端的点被确定后，就可以为中间部分的点设定上下限；
(b)确定开始遍历的方向,如果字体颜色的亮度大于背景颜色的亮度，则从start开始计算对比度；如果背景亮度大于字体亮度，则从end开始计算；因为在整个二维的色彩空间内，每一列颜色列表都是从start到end颜色逐渐加深，绝对亮度越来越小，所以对于明亮的背景，end处的颜色对比度最大，反之，start处的对比度最大；
如果初始点无法达到对比度要求，直接跳过当前的颜色列表，遍历相邻的未被检查的下一个颜色列表；如果达到了对比度要求，使用二分法，求出需要的点；
(c)结合上述两点，从色彩空间的第一项和最后一项进行处理，得到上下边界坐标左边界，右边界；它们都是包含元素的数组，第一位表示数据在色彩空间中的位置，第二位表示数据在颜色列表中的位置。
(d)检查左边界与右边界的值，如果都在当前颜色坐标的一侧，则结束检查，将距离当前颜色近的作为结果返回。
(e)通过左边界LeftBoundary与右边界RightBoundary设定的坐标边界，遍历区域中间的颜色列表,得到所有符合条件的节点。
(f)使用二分法在所有坐标中查找距离当前颜色currentColor最近的点，作为结果返回。
(6)重新渲染页面，将结果返回用户：
得到修正后的颜色配置后，使用javaScript操作DOM元素修改页面的渲染效果，展示给用户。同时将结果输出为css文件，方便用户添加到项目中。
具体的，可以生成一个锚点元素，将其设置为下载类型，设定好文件名，文件内容。模拟点击事件，触发文件的下载。
9.根据权利要求1所述的一种页面对比度自动校准优化的方法，其特征在于，所述步骤(3.1)包括如下子步骤：
(3.1.1)利用颜色混合实现颜色的合并，并接受一个由多个包含四个元素的rgba数组组成的rgba数组作为参数，在其内部设置了rgba数组result用于储存计算结果并返回，初始赋值为rgbaList[0]；在运行过程中，会从rgbaList[1]开始遍历rgba数组，首先使用如下公式计算出叠加后的综合透明度mixedAlpha：
mixedAlpha＝1–(1-result[3])*(1-ragb[3])
其中ragb指遍历中rgba数组中的每一个元素，[3]指读取result和rgba的第四位元素，即代表透明度的元素。
(3.1.2)接着利用mixedAlpha，使用下列公式计算出混合后rgb对应的数值：
result[n]＝Math.round((rgba[n]*rgba[3]/mixedAlpha)+(result[n]*result[3])*(1–rgba[3])/mixedAlpha))
其中n取0，1，2，一轮的计算完成后将result[3]赋值为mixedAlpha，并进入下一轮循环。
(3.1.3)当循环结束后，就可以得到最终被渲染出的backgroundColor。
接着结合backgroundColor与之前获取的文本颜色，再次使用步骤(3.1.2)的公式可以得到被渲染出的文本颜色textColor。
10.根据权利要求1所述的一种页面对比度自动校准优化的方法，其特征在于，所述步骤(4.1)包括如下子步骤：
(4.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.2)使用以下公式计算对比度：(Lmin+0.05)/(Lmax+0.05)，得到对比度。
(4.3)检查contrastRatio，对于font-size小于24px的情况，contrastRatio需要不小于4.5；大于24px的情况，contrastRatio需要不小于3；如果符合要求，则跳过后续处理步骤；如果不符合要求，进入下一步，计算出合适的文本颜色值。
CN202310453391.1A 2023-04-25 2023-04-25 一种页面对比度自动校准优化的方法 Active CN116578798B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310453391.1A CN116578798B (zh) 2023-04-25 2023-04-25 一种页面对比度自动校准优化的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310453391.1A CN116578798B (zh) 2023-04-25 2023-04-25 一种页面对比度自动校准优化的方法

Publications (2)

Publication Number Publication Date
CN116578798A true CN116578798A (zh) 2023-08-11
CN116578798B CN116578798B (zh) 2024-04-12

Family

ID=87538734

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310453391.1A Active CN116578798B (zh) 2023-04-25 2023-04-25 一种页面对比度自动校准优化的方法

Country Status (1)

Country Link
CN (1) CN116578798B (zh)

Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2007248778A (ja) * 2006-03-15 2007-09-27 Toyo Ink Mfg Co Ltd カラーフィルタ用青色着色組成物およびカラーフィルタ
CN101163191A (zh) * 2006-10-12 2008-04-16 奇美电子股份有限公司 色彩转换方法及其装置
CN103488646A (zh) * 2012-06-13 2014-01-01 腾讯科技（深圳）有限公司 一种移动终端浏览器弱光源下浏览网页的方法及装置
KR20190029265A (ko) * 2017-09-12 2019-03-20 주식회사 슈가브릭스 명도 대비의 자동 조정 시스템 및 방법
US10319116B1 (en) * 2014-12-02 2019-06-11 Amazon Technologies, Inc. Dynamic color adjustment of electronic content
KR102015644B1 (ko) * 2019-05-14 2019-08-28 (주)동방데이타테크놀러지 고속 이중화로 자동 절환 스위치 기능을 구비한 영상 디스플레이 시스템
JP2020160600A (ja) * 2019-03-25 2020-10-01 日本電気株式会社 配色診断装置、配色診断方法、及び、プログラム
CN112381905A (zh) * 2020-12-01 2021-02-19 北京光启元数字科技有限公司 一种颜色叠加方法、装置和电子设备
WO2021135887A1 (zh) * 2019-12-31 2021-07-08 华为技术有限公司 页面配色的方法、装置、存储介质和芯片
CN113724356A (zh) * 2021-09-03 2021-11-30 深圳市联谛信息无障碍有限责任公司 一种颜色对比度调整方法、装置和设备
US20220405988A1 (en) * 2021-06-22 2022-12-22 Adobe Inc. Modification of Color Contrast Ratio based on Target Contrast

Patent Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2007248778A (ja) * 2006-03-15 2007-09-27 Toyo Ink Mfg Co Ltd カラーフィルタ用青色着色組成物およびカラーフィルタ
CN101163191A (zh) * 2006-10-12 2008-04-16 奇美电子股份有限公司 色彩转换方法及其装置
CN103488646A (zh) * 2012-06-13 2014-01-01 腾讯科技（深圳）有限公司 一种移动终端浏览器弱光源下浏览网页的方法及装置
US10319116B1 (en) * 2014-12-02 2019-06-11 Amazon Technologies, Inc. Dynamic color adjustment of electronic content
KR20190029265A (ko) * 2017-09-12 2019-03-20 주식회사 슈가브릭스 명도 대비의 자동 조정 시스템 및 방법
JP2020160600A (ja) * 2019-03-25 2020-10-01 日本電気株式会社 配色診断装置、配色診断方法、及び、プログラム
KR102015644B1 (ko) * 2019-05-14 2019-08-28 (주)동방데이타테크놀러지 고속 이중화로 자동 절환 스위치 기능을 구비한 영상 디스플레이 시스템
WO2021135887A1 (zh) * 2019-12-31 2021-07-08 华为技术有限公司 页面配色的方法、装置、存储介质和芯片
CN112381905A (zh) * 2020-12-01 2021-02-19 北京光启元数字科技有限公司 一种颜色叠加方法、装置和电子设备
US20220405988A1 (en) * 2021-06-22 2022-12-22 Adobe Inc. Modification of Color Contrast Ratio based on Target Contrast
CN113724356A (zh) * 2021-09-03 2021-11-30 深圳市联谛信息无障碍有限责任公司 一种颜色对比度调整方法、装置和设备

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
杨宁;: "民机驾驶舱显示系统色彩标准的研究", 电脑知识与技术, no. 26 *

Also Published As

Publication number Publication date
CN116578798B (zh) 2024-04-12

Similar Documents

Publication Publication Date Title
CN102591848B (zh) 基于背景的前景特性选择
CN109614424B (zh) 页面布局生成方法、装置、计算设备和介质
US8914717B2 (en) Dynamic thresholds for conditional formats
US7130461B2 (en) Systems and method for automatically choosing visual characteristics to highlight a target against a background
CN103678631B (zh) 页面渲染方法及装置
US5870100A (en) Filling of graphical regions
US9484006B2 (en) Manipulation of textual content data for layered presentation
RU2424571C2 (ru) Полупрозрачное подсвечивание выбранных объектов в электронных документах
CN109408764B (zh) 页面区域划分方法、装置、计算设备和介质
US20130055116A1 (en) Theme variation engine
US6579324B1 (en) Method for indicating a selected region on a computer display while allowing the user to see the formatting of the background and content items within the selected region
CN109976759B (zh) 页面显示方法和装置
CN116578798B (zh) 一种页面对比度自动校准优化的方法
US8731289B2 (en) Recoloring images of a web page according to a representative color
KR101159387B1 (ko) 강조된 앤티-에일리어싱 비트맵을 생성하기 위한 입력 흑백비트맵의 사용
CN105190615A (zh) 无模式数据的检测和可视化
JP6098638B2 (ja) 配色支援装置、配色支援方法、およびプログラム
CN116152036A (zh) 水印处理方法、装置、电子设备、程序及介质
US20090031213A1 (en) System and method for website colorization
US7215342B2 (en) System and method for detecting and converting a transparency simulation effect
US8374448B2 (en) Image data optimization systems and methods
JP2020160600A (ja) 配色診断装置、配色診断方法、及び、プログラム
US7605947B2 (en) Making electronic ink universally legible
CN115344252A (zh) 可视化大屏的生成方法、装置及存储介质
CN117495997A (zh) 图像生成方法、装置、非易失性存储介质和计算机设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant