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?
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');
}
