New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 795437 link

Starred by 1 user

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug
Team-Accessibility



Sign in to add a comment

Color contrast issue on hovering the options in select element

Reported by gurupras...@gmail.com, Dec 15 2017

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36

Example URL:

Steps to reproduce the problem:
1. Create any select element
2. hover on one of the options
3. On hover text color changes to white color and the background color changes to a kind of blue

What is the expected behavior?
The on hover text as shown on the screenshot should have a color contrast ratio of atleast 4.5 : 1 against the blue background.

What went wrong?
Accessibility: Not enough color contrast on hover over an option

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? No
 Edge, Firefox

Chrome version: 63.0.3239.84  Channel: stable
OS Version: 10.0
Flash Version: 

The colors rendered by the browser should be changed to a more accessible combination
 
Select element color contrast.JPG
11.2 KB View Download
Labels: Needs-Triage-M63
Cc: krajshree@chromium.org
Labels: Needs-Feedback Triaged-ET
Reporter@ - Thanks for filing the issue...!!

Could you please provide a sample webpage/test file to test the issue from TE-end.
This will help us in triaging the issue further.

Thanks...!!
Thanks for getting back, it a simple select tag. There is not way any of the automated tools to get into the semantics and check for color contrast, so I had to do it manually.

Steps to repro:
1) open this fiddle: https://jsbin.com/?html,output
2) Expand the dropdown
3) Hover over any of the options
4) Using any of the color contrast tools, manually check the color contrast ratio of the white text against the blue background
5) observe that the color contrast ratio is falls short of 4.5:1
Project Member

Comment 4 by sheriffbot@chromium.org, Dec 18 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "krajshree@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Components: -Blink Blink>Accessibility
Labels: contrast win-a11y
Status: (was: Unconfirmed)
Status: Untriaged
Labels: -OS-Windows -Arch-x86_64 -Via-Wizard-Content -Needs-Triage-M63 -Triaged-ET -win-a11y -contrast
Status: Available (was: Untriaged)
Summary: Color contrast issue on hovering the options in select element (was: A11y: Color contrast issue on hovering the options in select element)
Marking as available, maybe we can address along with other contrast issues.

Sign in to add a comment