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

Question

WCAG 要求文本颜色对比度应满足 4.5:1 比例。

当您单击 <select> 上的某个项目时，它通常会以蓝色背景颜色和白色字体颜色突出显示，如下所示：

而且通常这种高亮不符合“4.5:1 规则”——例如在我的浏览器上，这种颜色高亮的对比度是 2.98:1。

你是怎么解决这个问题的？

Answer 1

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

覆盖 option:checked 元素的 background-color 值应该有效，但它不起作用，设计。

但是你可以完美的使用background-image 属性:

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

Color contrast ratio for highlighting color of selected item in <select>