WCAG требует, чтобы соотношение цветов текста соответствовало соотношению 4,5: 1.
Когда вы щелкаете элемент на <select>, он обычно выделяется синим цветом фона и белым цветом шрифта, примерно так:
И обычно такое выделение не соответствует «правилу 4,5: 1» - например, в моем браузере коэффициент контрастности такого цветового выделения составляет 2,98: 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');
}
