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

Question

WCAG requires that text color constrast should meet 4.5:1 ratio.

When you click an item on <select> it's usually highlighted with blue background color and white font color, something like this:

And usually such highlighting does not meet that "4.5:1 rule" -- for example on my browser, such color highlighting's contrast ratio is 2.98:1.

How do you resolve such problem?

Answer 1

This is still a non fixed (but closed) bug in some browsers (Chrome for instance: https://bugs.chromium.org/p/chromium/issues/detail?id=398417)

Overriding background-color value for option:checked elements should work but it doesn't, by design.

But you can perfectly use background-image property:

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