为了确保 WCAG 1.4.11“非文本对比度”的通过对比度，我是否将 :hover 的“颜色”属性与非悬停颜色或背景进行比较？

Question

我相信，根据这个stackoverflow answer，WCAG 1.4.11 "Non-text Contrast" 用于复选框、收音机等。但是，:hover 被特别提及，所以我想澄清一下我应该做什么。

我有一个带有 :hover css 规则的按钮，它将 color 属性从 #181B25 更改为 #074ADF。两种颜色与背景颜色的比例均大于 3:1。然而，他们的比例为 2.49:1。这是否意味着我没有满足 WCAG 1.4.11，因为这条 :hover 规则表明按钮组件的状态正在发生变化？

Answer 1

不，你很好，从技术上讲，悬停时根本不需要改变对比度。

有一个full conversation about this on GitHub

与本指南相关的内容：

此成功标准不要求区分单个组件状态的颜色变化在不相邻时满足 3:1 的对比度。例如，没有新要求将访问的链接与默认颜色对比，或者鼠标悬停指示器与默认状态对比。但是，组件不能失去与相邻颜色的对比度，非文本指示符，例如复选框中的复选，或指示菜单被选中或打开的箭头图形，必须与相邻颜色有足够的对比度。

来源：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>

我不喜欢堆叠选项，因为它需要很多空白

如果有两个不同的指标不适合你的设计，你可以有不同的状态（并优先考虑焦点状态）。

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>

发挥你的想象力！您可以使按钮在悬停时缩小几个像素（假设它已实现，因此不会导致布局偏移），更改文本样式，但在焦点上增长，根据状态将背景更改为图案（但小心那个）等。

快速提示：您会看到我将按钮设置为黑色和白色。我发现这是测试/原型不同状态的好方法。