为确保 WCAG 1.4.11 "Non-text Contrast," 通过对比度，我是否将 :hover 的 "color" 属性 与非悬停颜色或背景进行比较？
To ensure a passing contrast ratio for WCAG 1.4.11 "Non-text Contrast," do I compare the "color" property of :hover to color non-hover, or background?
我相信，据此 , that WCAG 1.4.11 "Non-text Contrast" 用于复选框、收音机等。但是，特别提到了 :hover，所以我想澄清一下我应该做什么。
我有一个带有 :hover css 规则的按钮，该规则将 color 属性 从 #181B25 更改为 #074ADF。两种颜色的背景颜色都大于 3:1。然而，他们对彼此的比例是 2.49:1。这是否意味着我不符合 WCAG 1.4.11，因为此 :hover 规则指示按钮组件的状态发生变化？
不，你没问题，从技术上讲，悬停时根本不需要改变对比度。
有个full conversation about this on GitHub
与这篇指导相关的内容：
This Success Criterion does not require that changes in color that differentiate between states of an individual component meet the 3:1 contrast ratio when they do not appear next to each other. For example, there is not a new requirement that visited links contrast with the default color, or that mouse hover indicators contrast with the default state. However, the component must not lose contrast with the adjacent colors, and non-text indicators such as the check in a checkbox, or an arrow graphic indicating a menu is selected or open must have sufficient contrast to the adjacent colors.
来源：https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
只要两个状态与背景和周围的项目有足够的对比度，它就会通过 WCAG。
如果您考虑一下，这是有道理的，否则创建 AAA 级按钮将需要与背景的对比度为 4.5:1，然后与非悬停状态的对比度为 4.5:1。这意味着所有按钮在悬停时都必须几乎是黑色的（如果您在网站上有深色背景，则必须是白色的）才能符合这两个条件。
但 WCAG 还没有结束！
您可以做一些事情来提高可访问性（您 不必 止步于合规性，您可以瞄准从可访问性中受益的“哇哇哇”的人） .
首先，使用cursor: pointer。这表示某些东西是可点击的，现在人们普遍认为这是一种可接受的/有益的用途。
您可以做的第二件事是对悬停和焦点使用稍微不同的指示方法。
例如，您可以结合使用 border 和 outline 来显示悬停、聚焦、悬停和聚焦的状态：
button{
background: #000;
border: 2px solid #fff;
color: #fff;
outline: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
border-radius: 2.25rem;
font-size: 1.5rem;
margin: 2rem;
}
button:hover{
border: 2px solid #333;
}
button:focus{
outline: 2px solid #333;
outline-offset: 2px;
}
<button>Test button</button>
另外一个巧妙的技巧是使用 box-shadow 而不是使用 outline。优点是它适用于弯角：
button{
background: #000;
border: 2px solid #fff;
color: #fff;
outline: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
border-radius: 2.25rem;
font-size: 1.5rem;
margin: 2rem;
}
button:hover{
border: 2px solid #333;
}
button:focus{
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}
<button>Test with curves</button>
我不喜欢堆叠选项，因为它需要很多白色 space
如果有两个不同的指示器对您的设计不起作用，您可以只使用不同的状态（并优先考虑焦点状态）。
button{
background: #000;
color: #fff;
outline: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
border-radius: 0.25rem;
font-size: 1.5rem;
margin: 2rem;
border: none;
}
button:hover{
outline: 2px dashed #333;
}
button:focus{
outline: 2px solid #333;
}
<button>Different border styles</button>
发挥你的想象力！您可以使按钮在悬停时缩小几个像素（假设它已实现，因此不会导致布局偏移），更改文本样式，但在焦点上增长，根据状态将背景更改为图案（但小心那个）等等
快速提示：您会看到我将按钮设为黑色和白色。我发现这是测试/原型不同状态的好方法。
我相信，据此 :hover，所以我想澄清一下我应该做什么。
我有一个带有 :hover css 规则的按钮，该规则将 color 属性 从 #181B25 更改为 #074ADF。两种颜色的背景颜色都大于 3:1。然而，他们对彼此的比例是 2.49:1。这是否意味着我不符合 WCAG 1.4.11，因为此 :hover 规则指示按钮组件的状态发生变化？
不，你没问题，从技术上讲，悬停时根本不需要改变对比度。
有个full conversation about this on GitHub
与这篇指导相关的内容：
This Success Criterion does not require that changes in color that differentiate between states of an individual component meet the 3:1 contrast ratio when they do not appear next to each other. For example, there is not a new requirement that visited links contrast with the default color, or that mouse hover indicators contrast with the default state. However, the component must not lose contrast with the adjacent colors, and non-text indicators such as the check in a checkbox, or an arrow graphic indicating a menu is selected or open must have sufficient contrast to the adjacent colors.
来源：https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
只要两个状态与背景和周围的项目有足够的对比度，它就会通过 WCAG。
如果您考虑一下，这是有道理的，否则创建 AAA 级按钮将需要与背景的对比度为 4.5:1，然后与非悬停状态的对比度为 4.5:1。这意味着所有按钮在悬停时都必须几乎是黑色的（如果您在网站上有深色背景，则必须是白色的）才能符合这两个条件。
但 WCAG 还没有结束！
您可以做一些事情来提高可访问性（您 不必 止步于合规性，您可以瞄准从可访问性中受益的“哇哇哇”的人） .
首先，使用cursor: pointer。这表示某些东西是可点击的，现在人们普遍认为这是一种可接受的/有益的用途。
您可以做的第二件事是对悬停和焦点使用稍微不同的指示方法。
例如，您可以结合使用 border 和 outline 来显示悬停、聚焦、悬停和聚焦的状态：
button{
background: #000;
border: 2px solid #fff;
color: #fff;
outline: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
border-radius: 2.25rem;
font-size: 1.5rem;
margin: 2rem;
}
button:hover{
border: 2px solid #333;
}
button:focus{
outline: 2px solid #333;
outline-offset: 2px;
}
<button>Test button</button>
另外一个巧妙的技巧是使用 box-shadow 而不是使用 outline。优点是它适用于弯角：
button{
background: #000;
border: 2px solid #fff;
color: #fff;
outline: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
border-radius: 2.25rem;
font-size: 1.5rem;
margin: 2rem;
}
button:hover{
border: 2px solid #333;
}
button:focus{
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}
<button>Test with curves</button>
我不喜欢堆叠选项，因为它需要很多白色 space
如果有两个不同的指示器对您的设计不起作用，您可以只使用不同的状态（并优先考虑焦点状态）。
button{
background: #000;
color: #fff;
outline: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
border-radius: 0.25rem;
font-size: 1.5rem;
margin: 2rem;
border: none;
}
button:hover{
outline: 2px dashed #333;
}
button:focus{
outline: 2px solid #333;
}
<button>Different border styles</button>
发挥你的想象力！您可以使按钮在悬停时缩小几个像素（假设它已实现，因此不会导致布局偏移），更改文本样式，但在焦点上增长，根据状态将背景更改为图案（但小心那个）等等
快速提示：您会看到我将按钮设为黑色和白色。我发现这是测试/原型不同状态的好方法。