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

问题描述

我相信，根据此 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 规则指示按钮组件的状态发生变化？

解决方法

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

有一个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>

替代使用 outline 的一个巧妙技巧是使用 box-shadow。优点是它适用于弯曲的角落：

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>

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

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

wcag wcag2.0