CODEWITHSUNDEEP
accessibilityhtml-selectcontrastwcagwcag2.0
Jay Somedon
Jay Somedon

Reputation: 1118

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

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:

HTML markup for and screenshot of select list; the selected option is highlighted with white text on a blue background

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?

Upvotes: 1

Views: 1988

Answers (1)

Adam
Adam

Reputation: 18807

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

Upvotes: 1

Related Questions