用于突出显示<select>中所选项目颜色的颜色对比度

Question

WCAG要求文本颜色对比应满足4.5：1的比例。 当您点击＆lt; select＆gt;上的项目时它通常以蓝色背景颜色和白色字体颜色突出显示，如下所示： 通常这种突出显示不符合“4.5：1规则” - 例如在我的浏览器上，这种颜色突出显示的对比度是2.98：1。 你怎么解决这个问题？

Answer 1

在某些浏览器中，这仍然是一个非固定（但已关闭）的错误（例如Chrome： https://bugs.chromium.org/p/chromium/issues/detail?id=398417）

覆盖background-color元素的option:checked值应该有效，但不是，按设计。

但您可以完美地使用background-image属性：

select option:checked {
  background-image: url('accessible-blue.png');
}