您是否曾经遇到过网站，并且因为使用它而遇到麻烦，因此很沮丧？也许是因为文本大小太小了，或者也许是使用浏览器支持的一些WebGL/Trix.js技术，或者字体的颜色和对比度太奇怪了。
如果您回想起无法正确浏览网站的这些烦人的经历，那么您很有可能会以一种或另一种形式获得无法访问的可能性。它在不愉快的用户体验和无法访问之间产生了重叠。
例如，如果您发现自己努力阅读特定网站上的小文字，那么这些人的机会根本就无法阅读。
和某种程度上，如果您是设计师，并且设法设计具有更好的字体尺寸的网站，则可以改善所有用户（包括视觉障碍的用户）的体验和可访问性。为了构建和启动可访问的网站，CSS Color-Contrast（）功能可以帮助开发人员提供充分的对比且可访问的用户界面，每个人都可以轻松访问和使用信息和服务。
通过在设计过程中考虑视力障碍和残疾人的需求，我们可以构建易于导航和了解所有人的网站。这意味着使用清晰简洁的语言，为图像提供替代文本，并使用易于理解的结构化布局。
通过遵循这些原则，我们可以创建一个包容性的网络，并促进平等和包容性。在本指南中，我们特别了解CSS Color-Contrast（）如何帮助我们创建可访问的用户界面。
需要在Safari上进行交叉浏览器测试的绝佳解决方案吗？忘记模拟器或模拟器 - 使用真实的在线浏览器。尝试lambdatest在 Safari browser online 。
上测试什么是可访问性？
“可访问性”一词有时缩短为Ally，是指对于每个人都可以使用语言，位置，能力或硬件（设备）的Web设计。可访问的设计不仅是要关注永久残疾人的注意力，而且还为所有用户创造无缝的体验，无论其能力如何。这是设计一个易于导航，理解和使用的网站，包括身体障碍的网站。
可访问性对于为所有个人（包括有障碍的人）创造积极的用户体验至关重要。通过确保所有用户都可以轻松地导航和访问所需的信息，我们正在促进数字空间中的包容性和平等。这使那些有特殊需求的人受益，并增强了整体用户体验。查看我们有关accessibility testing的教程以了解更多信息。
根据世界卫生组织的一项调查，世界上约有16％的人口生活具有某种形式的残疾，预计随着人口的老龄化将增加。这意味着很大一部分互联网用户可能很难访问传统网站。
通过设计可访问性，我们不仅可以使互联网成为残疾人更具包容性的地方，还可以为企业创造新的机会。可访问的网站可以增加潜在的客户群，提供更好的用户体验并提高品牌声誉。
实现这一目标的一种方法是遵守世界范围的Web联盟（W3C）开发的Web内容可访问性指南（WCAG）。这些准则为创建可访问的数字内容提供了具体建议，包括文本对比度的准则。
WCAG建议在文本及其背景之间的最小对比度为4.5：1，以确保所有用户（包括视觉障碍的用户）易于阅读文本。通过遵循这些准则，设计人员可以为所有用户创建可访问且用户友好的网站，无论其能力如何。
因此，考虑到文本和背景的对比度不仅会增强视障人士和所有用户的用户体验。而且这种易用性，特别考虑视力障碍的个体，是创建可访问modern web designs的基础。
为什么Web可访问性很重要？
许多设计师曾经认为可访问性是 在设计时的良好功能，但现在不再将可访问性视为可选功能，并且已经成为许多组织的必要性。
根据Webaim组织的报告，研究的家庭页面中有96.8％患有WCAG2失败。在设计用户界面（UI）的同时，在头脑顶部具有可访问性，不仅可以改善残疾人的用户体验，而且还可以改善普通用户的体验。
顺便说一句，在图像元素上需要alt文本或输入元素的标签，但执行调色板是完全不同的。因此，现在让我们看一下这个CSS颜色对比度（）如何帮助我们！
Lambdatest的在线移动模拟器允许您在移动浏览器和设备上无缝测试移动应用程序，网站和Web应用程序，而无需物理设备。尝试我们的 emulator online 现在。
订阅LambdaTest YouTube Channel，并在Selenium testing，Playwright，Appium等附近的最新教程中保持更新。
CSS颜色对比度（）函数的概述
在撰写本文时，CSS color-Contrast（）是一个实验特征，它是CSS颜色模块5级的一部分。
当前，CSS颜色对比度（）功能仅在Safari（TP）中可用。您可以打开开发和实验特征菜单中的功能。
来源
注意：以下是编码epen示例，如果您不使用上述浏览器，则可能行不通。
与基本颜色相比，此功能的主要目的是从列表中选择理想的对比色。
语法：
color: color-contrast(#505050 vs #fff, #000 )
我们的文章将第一个参数称为 basecolorâ，第二个参数为 css。 color-Contrast（）函数可以接受任何浏览器支持的CSS颜色格式，例如
-
十六进制（＃ff3300）
-
rgb（rgb（255，0，0））
-
RGBA（RGBA（25，32，65，0.86）））
-
HSL颜色（HSL（120，100％，125％））
也是该功能的第三个参数，该功能是目标对比，但我们将在此博客的后期进行讨论。
开始使用CSS Color-Contrast（）
CSS color-Contrast（）函数确保网页上的文本与背景有足够的对比，以便于可读性。这对于可能难以阅读以低对比度阅读文本的视力障碍用户尤其重要。
来自雷切尔·安德鲁（Rachel Andrew）在Axecon 2022的演讲中，新的CSS牢记了可访问性的新CSS，我们开始知道CSS功能对可访问设计的世界有多大影响。
Rachel还通过基于背景颜色动态定义文本颜色来演示新功能。这是CSS Color-Contrast（）的Codepen示例。
所以，让我们通过设置一些背景颜色和文本颜色来快速查看此功能。
:root {
--primary-background: #1e1e1e;
}
.content {
Background-color: var(--primary-background);
color: color-contrast(var(--primary-background) vs #fff, #000);
}
在上面的代码块中，我们将 trimal-background 定义为深灰色的阴影，＃1E1E1E。然后，我们使用了与Color-Contrast（）函数中的基本颜色相同的属性，并将其与颜色列表中的每个项目进行了比较以找到最高的对比值。
现在，让我们进一步尝试一下，并尝试尝试该功能。我们可以通过简单地使用另一个函数的基础颜色的结果来有效地链接 color-Contrast（）函数。这听起来很难，但是让我们以先前的 .content 的示例，然后尝试链接！
综合 end-to-end Testing 教程，涵盖了E2E测试是什么，其重要性，其优势以及如何通过实时示例执行它。
:root {
--primary-background: #5e5c5c;
--primary-color: color-contrast(
var(--primary-background) vs #fff,
#000
);
}
.content {
background-color: var(--primary-background);
color: var(--primary-color);
}
.content > p {
color: color-contrast(var(--primary-color) vs #fff, #000);
}
在上面的代码块中，我们将主要背景自定义属性定义为深灰色的阴影，我们使用与中的基本颜色相同的自定义属性color-contrast（）函数，然后将其与颜色列表中的项目进行比较，即 white 和 black ，并将其存储在称为<的自定义变量中强>原色。然后在 .content 类中，我们将背景颜色和颜色用作变量，但这是有趣的部分！
在内容类中，我们通过链接color-contrast（）函数更改了所有段落（p tag）的文本颜色。我们只是简单地使用了 triper-color 变量，即使用我们先前在 root 中定义的color-Contrast（）得出的颜色，为基本颜色。我们将其与颜色列表中的项目进行了比较。
这是一个完整的例子。
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blog</title>
</head>
<body>
<div class="container">
<h2>CSS color-contrast() demo</h2>
<div class="content">
<p>
A simple paragraph example for the css color contrast function! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima molestias
ullam voluptas et obcaecati sapiente veritatis fugit exercitationem
dolorem illo quidem sit soluta, tempore
</p>
</div>
</div>
</body>
</html>
CSS：
:root {
--primary-background: #505050;
--primary-color: color-contrast(
var(--primary-background) vs #fff,
#000
);
/* --primary-color: white; */
}
body {
margin: 0;
padding: 0;
}
.container {
width: 450px;
margin: 0 auto;
margin-top: 50px;
border: 1px solid gray;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.container > h2 {
padding-left: 20px;
font-size: 2rem;
}
.content {
background-color: var(--primary-background);
color: var(--primary-color);
padding: 20px;
}
.content > p {
line-height: 1.4rem;
font-size: 1.2rem;
margin: 0;
color: color-contrast(var(--primary-color) vs #fff, #000);
}
<div class="container">
<h2>CSS color-contrast() demo</h2>
<div class="content">
<p>
A simple paragraph example for the css color contrast function! Lorem
ipsum, dolor sit amet consectetur adipisicing elit. Minima molestias
ullam voluptas et obcaecati sapiente veritatis fugit exercitationem
dolorem illo quidem sit soluta, tempore
</p>
</div>
</div>
上面的代码是如何使用CSS颜色对比度（）函数来确保文本颜色符合WCAG中定义的最小建议对比度的示例。它使用CSS Color-Contrast（）函数比较文本颜色与背景颜色的对比度，并在未达到对比度的情况下为文本分配新类。这有助于确保所有用户（包括视觉障碍的用户）都可以清晰地清晰。
通过使用CSS color-Contrast（）函数，代码可以自动化检查对比度的过程并增强所有用户的用户体验。以上代码是如何在网站中实现可访问性功能的示例。它通过提供一种简单有效的方法来确保所有用户的文本都可以清晰，包括视觉障碍的人。
，它为可访问性增加了价值。但是，我们可以使用 ::选择伪元素进一步采取它。这是我们如何实施它。
html：
<div class="container">
<h1>CSS Color-Contrast() ::Selection</h1>
<article class="article article-top">
<h2>Selenium Test Automation Cloud</h2>
<p>
A reliable, scalable, secure, and high performing test execution cloud
that empowers development and testing teams to accelerate their
release cycles. Test in parallel and cut down test execution by more
than 10x.
</p>
</article>
<article class="article article-bottom">
<h2>Cypress Automation Testing</h2>
<p>
Run end-to-end tests on a blazing fast Cypress test execution cloud. A
reliable, scalable, secure and high performing test execution platform
built for scale. Test on 40+ different browser and browser versions
including headless versions.
</p>
</article>
</div>
CSS：
.content {
--content-bg: #eef5ff;
--content-color: color-contrast(var(--content-bg) vs #fff, #000);
background: var(--content-bg);
color: var(--content-color);
padding: 0.5rem 1rem;
border: 1px solid black;
border-radius: 12px;
margin-bottom: 12px;
}
.content:last-of-type {
--content-bg: #4992af;
}
.content::selection {
@supports (background: color-contrast(#000 vs #fff, #eee)) {
background: color-contrast(var(--content-color) vs #8fc8de, #595959);
}
}
:root {
--body-base: #fbf8cc;
--color-primary: #8fc8de;
--scrollbar-bg: #222;
}
body::-webkit-scrollbar {
width: 10px;
}
body {
scrollbar-width: thin;
scrollbar-color: var(--color-primary) var(--scrollbar-bg);
}
body::-webkit-scrollbar-track {
background: var(--scrollbar-bg);
}
body::-webkit-scrollbar-thumb {
background-color: var(--color-primary);
border-radius: 6px;
border: 3px solid var(--scrollbar-bg);
}
html,
body {
color: #000;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
font-size: 100%;
letter-spacing: 0.25px;
line-height: 1.75;
margin: 0;
padding: 0;
}
body {
background: rgb(194, 226, 228);
block-size: 100%;
display: grid;
min-block-size: 100vh;
place-items: center;
}
a {
color: #c8553d;
text-decoration: underline 1px dashed;
text-underline-offset: min(5px, 1em);
}
a:focus {
outline: 1px solid currentColor;
outline-offset: 3px;
}
a:hover {
color: #131313;
}
h1,
h2 {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
sans-serif;
line-height: 1.25;
}
.container {
inline-size: min(750px, 50vw);
}
<div class="container">
<h1>CSS Color-Contrast() ::Selection</h1>
<article class="article article-top">
<h2>Selenium Test Automation Cloud</h2>
<p>
A reliable, scalable, secure, and high performing test execution cloud
that empowers development and testing teams to accelerate their
release cycles. Test in parallel and cut down test execution by more
than 10x.
</p>
</article>
<article class="article article-bottom">
<h2>Cypress Automation Testing</h2>
<p>
Run end-to-end tests on a blazing fast Cypress test execution cloud. A
reliable, scalable, secure and high performing test execution platform
built for scale. Test on 40+ different browser and browser versions
including headless versions.
</p>
</article>
</div>
在上面的代码块中，我们使用CSS color-Contrast（）函数与 ::选择 pseudo-element，并且您可以看到它的有效性！
但是 color-Contrast（）函数不限于比较十六进制代码（＃000000）。可以对上一个示例进行调整以在返回相同结果时同时使用不同的颜色类型。
:root {
--content-bg: rgb(43, 23, 244);
--content-color: color-contrast(
var(--content-bg) vs #fff,
hsl(0, 100%, 12%)
);
}
.content {
background-color: var(--content-bg);
color: var(--content-color);
}
.content::selection {
background: color-contrast(
var(--article-color) vs hsl(0, 1%, 26%),
white
);
}
color-Contrast（）函数可以简单地链接HSL颜色，RGBA颜色，RGB颜色等。同时而不会出现任何潜在的错误。因此，由于具有此特定功能，使用对比度将更加容易，更容易访问。
一个综合的端到端测试教程，涵盖了 E2E Testing 是它的重要性，好处以及如何与真实执行 - 时间示例。
css color-Contrast（）带有伪类
我们已经使用CSS color-Contrast（）函数使用 ::选择 pseudo元素，并且在选择字体时动态设置颜色令人着迷。但这是一件静态的事情，例如文本颜色和背景会在渲染后会改变。
所以，让我们看一些更有趣的东西，即改变互动元素及其CSS pseudo-classes的对比。
通过网站导航时，我们有时只使用键盘，并且沿途有各种各样的标签停靠站，例如 buttons ， input elements，链接在身体内部，也许是链接的图像或卡片。尽管每个元素都必须具有一个合规的焦点指标，但为所有元素创建焦点伪元素并不容易。在这里， color-Contrast（）可以帮助！
:root {
--background-primary: #737272;
--background-button: #1a73e8;
--button-text-color: color-contrast(
var(--background-button) vs #fff,
#000
);
--button-hover: #13427e;
--color-list: var(
var(--background-button),
var(--button-text-color),
rgb(158, 113, 113),
rgb(93, 88, 88)
);
}
.rounded-btn {
background: var(--background-button);
color: var(--button-text-color);
}
.rounded-btn:hover {
background-color: var(--button-hover);
}
.rounded-btn:focus {
box-shadow: 2px 1px 23px 3px
color-contrast(var(--background-primary) vs var(--color-list));
}
让我们看看上述片段中发生了什么。
“ backgrack-button” 自定义属性用作颜色对比（）函数中的基本颜色，以选择'的值按钮文本色彩。每当背景按钮更改时，习惯 button-text-color 也会改变，因为它们是被束缚。然后我们定义了纽扣 的自定义属性：悬停 pseudo-element。
现在是谈论可访问性时最重要的伪元素之一：：focus 元素。 ：focus 样式是可以通过使用 background-primary 自定义属性作为基本颜色来扩展color-Contrast（）函数在功能中。它与当前的按钮样式相比，它提供了具有上下文意识的焦点样式的能力。
让我们看看这个示例并尝试更好地理解它。
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blog</title>
</head>
<body>
<h1>CSS Color-Contrast() :hover & :focus pseudo-classes</h1>
<div class="container">
<h3>Selenium Test Automation Cloud</h3>
<p>
A reliable, scalable, secure, and high performing test execution cloud
that empowers development and testing teams to accelerate their release
cycles. Test in parallel and cut down test execution by more than 10x.
browser.
</p>
<button class="btn">Test Online</button>
</div>
</body>
</html>
CSS：
:root {
--body-base: #131e25;
--color-primary: rgba(255, 124, 0, 1);
--scrollbar-bg: #222;
}
html,
body {
color: #fff;
font-family: "Barlow", sans-serif;
font-size: 100%;
letter-spacing: 0.25px;
line-height: 1.75;
margin: 0;
padding: 0;
}
.container {
width: 500px;
border: 1px solid lightgray;
padding: 20px;
border-radius: 12px;
background-color: #2d043a;
}
.container > h3 {
color: rgb(181, 210, 212);
font-size: 1.5rem;
}
.btn {
--btn-base: #76d8ff;
--btn-color: color-contrast(var(--btn-base) vs #fff, #000);
--btn-gradient: linear-gradient(
180deg,
rgb(94, 150, 223) 0%,
rgb(27, 83, 87) 100%
);
background: var(--btn-base);
background: var(--btn-gradient);
border: 5px solid var(--body-base);
border-radius: 12px;
color: var(--btn-color);
padding: 1em 2em;
font-size: 14px;
}
.btn:hover {
--btn-base: #0079b1;
--btn-gradient: linear-gradient(
180deg,
rgb(38, 88, 196) 0%,
rgb(2, 53, 112) 100%
);
background: var(--btn-base);
background: var(--btn-gradient);
cursor: pointer;
}
.btn:focus {
box-shadow: 0 0 1px 3px
color-contrast(var(--body-base) vs var(--btn-base), #bbb);
}
.btn:active {
opacity: 0.95;
transform: scale(0.98);
transform-origin: center;
}
body {
background: #96a1a8;
block-size: 100%;
display: grid;
min-block-size: 100vh;
place-items: center;
}
h1,
h2 {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.25;
}
section {
inline-size: min(750px, 50vw);
}
<body>
<h1>CSS Color-Contrast() :hover & :focus pseudo-classes</h1>
<div class="container">
<h3>Selenium Test Automation Cloud</h3>
<p>
A reliable, scalable, secure, and high performing test execution cloud
that empowers development and testing teams to accelerate their release
cycles. Test in parallel and cut down test execution by more than 10x.
browser.
</p>
<button class="btn">Test Online</button>
</div>
</body>
</html>
您可以在上面的示例中看到，我们使用了伪级的color-Contrast（）函数。 Stephanie Eckle在现代CSS升级上的演讲提供了改善可访问性的详细概述，概述了各种CSS升级，可以改善用户的可访问性。演示文稿涵盖了CSS Color-Contrast（），语义HTML和responsive design等主题，并提供了明确的例子来说明概念。演示文稿对于那些希望提高网站可访问性的人是一个很好的资源。
new Selenium IDE 支持交叉浏览器测试和并行测试自动化以及记录和重播功能。这就是为什么您不应该错过它。
目标对比比
在本文开头，我讨论了CSS颜色对比度（）函数的可选第三参数。现在让我们深入研究此功能。
color-Contrast（）函数的可选第三参数定义了目标对比比。该参数接受关键字aa，aa-large，aaa和aaa-large或一个数字。定义目标对比时，选择了符合或超过颜色列表中的第一种颜色。
让我们看一个示例以正确理解功能。
html：
<body>
<section class="container">
<h1>Target Contrast Ratio</h1>
<p>
CSS color-contrast() function is having a third parameter called as
<span style="color: red">Target contrast ratio</span> . This feature is
only available in Safari Browser right now, so if you are using any
other browser this won't work!
</p>
<div class="sample-block">
<p>Target Ratio: <span>AA (4.5)</span></p>
</div>
<form>
<label>
Ratio Keywords
<select id="ratios">
<option value="AA (4.5)" selected>AA (4.5)</option>
<option value="AA-Large (3)">AA-Large (3)</option>
<option value="AAA (7)">AAA (7)</option>
<option value="AAA-Large (4.5)">AAA-Large (4.5)</option>
</select></label
>
<label>
Custom Ratio
<input
id="slider"
type="range"
min="0"
max="20"
value="4.5"
step="0.1"
/>
</label>
</form>
</section>
<style>
CSS：
body {
--contrast-target: AA;
}
.sample-block {
--color-set: #001908, #005f73, #b5e62e, #bff5e3, #544107, #ee9b00;
--base: color-contrast(
var(--body-base) vs var(--color-set) to var(--contrast-target)
);
background: var(--base);
display: grid;
padding: 0.75em 1em;
place-items: center;
}
.sample-block {
background-color: whitesmoke;
border-radius: 20px;
margin-bottom: 30px;
}
.sample-block > p {
color: black;
}
/* .sample-block > p {
color: color-contrast(
var(--base) vs var(--color-set),
#fff to AA-Large
);
} */
body::-webkit-scrollbar {
display: none;
}
html,
body {
color: #fff;
font-family: "Barlow", sans-serif;
font-size: 100%;
letter-spacing: 0.25px;
line-height: 1.75;
margin: 0;
padding: 0;
}
body {
block-size: 100%;
display: grid;
min-block-size: 100vh;
place-items: center;
}
.container {
background: rgb(24, 40, 52);
padding: 20px;
border-radius: 20px;
}
.container > h1 {
text-align: center;
margin-bottom: 30px;
padding-bottom: 30px;
}
a {
color: #e9d8a6;
text-decoration: underline 1px dashed;
text-underline-offset: min(5px, 1em);
}
a:hover {
color: #ffe8d6;
}
a:focus {
outline: 1px solid currentColor;
outline-offset: 3px;
}
h1,
h2 {
line-height: 1.25;
}
section {
inline-size: min(750px, 50vw);
}
form {
display: grid;
grid-gap: 2rem;
grid-template-columns: 1fr 1fr;
padding-block-end: 1rem;
}
label {
display: grid;
font-size: 1.2rem;
font-weight: 600;
}
select,
input {
display: block;
}
javascript：
document
.querySelector("#ratios")
.addEventListener("change", (e) => {
document.body.style.setProperty("--contrast-target", e.target.value);
document.querySelector(".sample-block span").innerHTML =
e.target.value;
});
document.querySelector("#slider").addEventListener("input", (e) => {
document.body.style.setProperty("--contrast-target", e.target.value);
document.querySelector(".sample-block span").innerHTML = e.target.value;
});
<section class="container">
<h1>Target Contrast Ratio</h1>
<p>
CSS color-contrast() function is having a third parameter called as
<span style="color: red">Target contrast ratio</span> . This feature is
only available in Safari Browser right now, so if you are using any
other browser this won't work!
</p>
<div class="sample-block">
<p>Target Ratio: <span>AA (4.5)</span></p>
</div>
<form>
<label>
Ratio Keywords
<select id="ratios">
<option value="AA (4.5)" selected>AA (4.5)</option>
<option value="AA-Large (3)">AA-Large (3)</option>
<option value="AAA (7)">AAA (7)</option>
<option value="AAA-Large (4.5)">AAA-Large (4.5)</option>
</select></label
>
<label>
Custom Ratio
<input
id="slider"
type="range"
min="0"
max="20"
value="4.5"
step="0.1"
/>
</label>
</form>
</section>
定义目标对比度时， color-Contrast（）函数将返回符合目标的颜色列表的第一个值。但是，当颜色列表中没有值符合目标对比时，魔术发生的地方！
h1{
color: color-contrast(#000 vs #111, #222 to AA);
}
您在上面的代码片段中看到的，基本颜色为 black（＃000），，颜色列表由两个灰色的深色阴影组成，但没有值得符合AA（ 4.5）目标对比。那会发生什么？
如果颜色列表不包含符合目标对比的值，则 CSS将填充空白。在这种情况下，颜色对比（）可以使设计人员能够执行特定的可访问性。
.background-primary {
--background: #000;
--color-list: #111, #222;
}
.background-primary {
background: var(--background);
color: color-contrast(var(--background) vs var(--color-list));
}
.background-primary.with-target-ratio {
color: color-contrast(var(--background) vs var(--color-list) to AA);
}
让我们查看上述代码段并尝试了解目标比率。
基础。背景主要类不使用目标对比。这导致颜色被定义为＃222，这是相对于基本颜色黑色的最高对比度值。但是颜色＃222（另一个黑色阴影）可以在这里访问吗？明确的答案是否！
现在，让我们将其与 .background-primary 和the。进行比较。与目标比例类别相结合，并指定了目标对比。尽管使用了相同的基本颜色和颜色列表，但结果却大不相同。如果颜色列表中的颜色都不符合AA对比目标，则该功能会选择具有的颜色。在这种情况下， white！
自动化 Functional Testing 测试有助于确保您的Web应用程序可以按照目的的方式工作。了解有关功能测试的更多信息，以及如何自动化它们可以为您提供更快的发布周期。
CSS Color-Contrast（）的必然缺点
我们知道，CSS color-Contrast（）函数仍然是一个实验功能，因此在撰写本文时有很多改进。让我们看看它们是什么以及如何处理它们！
-
视觉对比和颜色不是相同的
-
最高对比并不意味着可访问的一个
-
到目前为止没有梯度支持
<h1>Color-contrast</h1>
我必须是正确的包裹！
这是很多要吸引的，但是让我们快速回顾一下我们对CSS颜色对比（）函数的了解。
因此， color-Contrast（）函数是一个实验特征，可选择最大的对比色。它需要三个参数：基本颜色，颜色列表和目标对比度（可选）。 CSS Color-Contrast（）只需将基本颜色与颜色列表进行比较，然后返回最高的对比色，这有助于在更大的规模上提高网络上的可访问性。
一旦Spec得到了浏览器的实现和支持，Color-Contrast（）函数就可以是改变游戏的功能。 CSS Color-Contrast（）有很多未开发的区域和用例。在不久的将来，我们希望在所有浏览器上看到此功能，以便我们都可以开始使用它。在此之前，继续进行实验并保持